본문 바로가기

Javascript/Javascript(2022 version)

 (10)
Javascript 기초(8) - callback hell, Promise, async/await 1) Javascript 기초 1-1) callback hell 1-2) Promise 1-3) async/await 1) Javascript 기초 학습 순서 callback Promise async/await socket.on('data', (chunk) => { console.log(chunk); }) // 비동기 코드: 언제 올지 모르는 코드 // 콜백 함수 안에서 다시 콜백 함수를 실행하는 것을 여러번 반복한 상황을 "callback hell"이라 부른다!! // "callback hell"이 나올 수밖에 없는 이유는 비동기 코드를 처리하기 위함이다! // 이 과정에서 "이벤트 기법"이라는 것을 활용해 처리함! net.createServer((socket) => { socket.on('data',..
Javascript 복습(2) - 클로저, 로또 Refactoring 1) Javascript 복습 1-1) 클로저 1-2) 로또 Refactoring 1) Javascript 복습 1-1) 클로저 function main() { for (var i = 0; i { console.log(i); }, 1000 * i); } } main(); // 문제 // var 키워드는 "함수 레벨 스코프"이므로 // main 함수 바로 밑(for 문 바로 위)에 "var i;"로 선언이 되고, // setTimeout()의 경우, 본인 스코프(for 문 내부) 내에서는 변수 i를 찾을 수 없기에 // for 문 위로 올라와 변수 i를 찾게 되는데 // 이때 변수 i는 이미 for 문을 다 돈 상태이기에 결과적으로 "i = 5"의 값을 ..
Javascript 복습 - 스코프, 호이스팅, function 키워드, this binding 1) Javascript 복습 1-1) 스코프 1-2) 호이스팅 1-3) function 키워드 1-4) this binding(this가 어려운 이유) 1) Javascript 복습 Javascript 기본문법 - 공부 순서 1. 함수 선언과 호출 2. 콜스택 3. 스코프(전역변수, 지역변수) 4. 호이스팅("실행 컨텍스트"를 배우기 위한 사전 작업) 5. function 키워드 6. this 7. 클로저 8. 함수형 프로그래밍 : map, forEach, filter 등 1-1) 스코프 var, let의 차이는 호이스팅의 발생유무(var는 호이스팅이 일어나는 반면 let은 호이스팅이 일어나지 않는다!!)이다!! 블록 레벨 스코프 함수 레벨 스코프 렉시컬 스코프 { var a = 10; } consol..
Javascript 기초(7) - 함수, 콜스택, 스코프 체인, this 1) Javascript 복습 1-1) 함수 선언과 호출 1-2) 콜스택 1-3) 스코프 체인 1-4) this 1-5) function(this binding) 1-6) function의 다양한 활용 1) Javascript 복습 1-1) 함수 선언과 호출 함수 선언과 호출의 차이를 이해하는 것이 중요하다!! 함수 선언문 function add(a, b) { return a + b; } add(1, 2); // 결과: 3 function calculator(func, a, b) { return func(a, b); } calculator(add, 1, 2); // 결과: 3 함수 표현식(arrow function) const add = (a, b) => a + b; const calculator = (..
Javascript 기초(6) - 상속 및 메서드 1) Javascript 상속 1-1) 객체지향 1-2) Prototype +) 호이스팅 / this 2) Javascript 메서드 및 생성자 함수 2-1) Date() 2-2) indexOf() +) 삼항 연산자 1) Javascript 상속 1-1) 객체지향 // 객체지향 프로그래밍 // 객체지향은 서양의 세계관을 가지고 있는데 // 이는 일종의 이분법적 사고(추상적 / 구체적)라고 볼 수 있다!! // 예를 들어 마우스라는 이미지(유선 마우스, 무선 마우스, 게이밍 마우스 등)를 그리면 // 각각 다르지만 마우스라는 특정 기능, 속성은 모두 다 같을 것이다!! // 추상적인 것(class)을 만든 후 그것을 통해 구체적인 것(instance)을 만든다!! /* class Chair { this.s..
Javascript 기초(5) - 객체 및 메서드 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 2) Javascript 객체 2-1) 메서드 및 this 예약어 2-2) setter와 getter 2-3) 생성자 함수 2-4) class 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 // 피보나치 수열을 구하는 함수 : 메모이제이션 기법을 사용한 함수 let memo = {}; function fibo(n) { let result; if (n in memo) { // memo는 객체이고, n은 매개변수임 result = memo[n]; } else { if (n == 1 || n == 2) { result = 1; } else { result = fibo(n - 1) + fibo(n - 2)..
Javascript 기초(4) - 함수 및 객체 1) Javascript 함수 1-1) 함수 복습 1-2) 함수 표현식 1-3) 화살표 함수(arrow function) 1-4) 콜백 함수(callback function) 1-5) 콜스택 / 콜백 함수 활용 예시 2) Javascript 객체 2-1) 객체 생성 방법 2-2) 점 표기법 / 응용 방법 2-3) in 연산자 / for in 문 2-4) Spread Operator(스프레드 연산자) 2-5) 참조형 데이터 타입 활용 예시 1) Javascript 함수 1-1) 함수 복습 // 복습 // 함수 선언 /* 함수 호이스팅 : 함수 호출 구문이 함수 선언문보다 위에 있어도 코드가 정상 실행됨 (함수 선언문이 최상단으로 끌어올려저서 코드 형태 상에서는 호출 구문이 상단에 있는 것처럼 보여도 내부에..
Javascript 기초(3) - 함수 1) Javascript 함수 1-1) 함수 사용 이유 1-2) 함수 선언 및 호출 1-3) 매개변수 / 인자 1-4) return 1-5) 콜스택 / 힙 1) Javascript 함수 1-1) 함수 사용 이유 /* 함수 중복코드를 피하기 위해서 함수를 사용함!! */ // example : 동일한 결과를 출력하는 코드 간에도 함수를 사용하지 않을 시 아래와 같이 코드 양이 많아지고, 자연스레 코드 효율성 또한 떨어짐!! function showMessage() { console.log("hello world! I am developer."); } showMessage(); showMessage(); showMessage(); showMessage(); showMessage(); console.log("..

티스토리툴바