[JavaScript] 자바스크립트 제어 흐름 - 비동기

자바스크립트 비동기? 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다. 멀티스레드 프로그래밍 언어 EX) Java, C++ 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라가기 어렵다. 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야만 한다. 자바스크립트 엔진 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 실행한다. 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다. 동기적 제어 흐름 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다. 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다. 코..

• format_list_bulleted Front-End
• · 2023. 4. 3.
• textsms

[JavaScript] 자바스크립트 호이스팅(Hoisting)

코드 실행 시 변수 처리 자바스크립트 엔진이 코드를 읽으면, 생성 단계에서 실행 컨텍스트를 생성한다. 이 때 함수 선언문은 생성 단계에서 함수 전체가 실행 컨텍스트에 저장된다. var 변수는 저장 시 undefined로 초기화된다. (undefined는 엄연히 javascript에서 값이다.) let, const는 초기화되지 않는다. (== uninitialized) Hoisting console.log(callMe()) //undefined var x = 10 console.log(callMe()) // 10 function callMe() { return x } Hoisting은 변수가 선언된 시점보다 앞에서 사용되는 현상이다. 이는 var 변수가 생성 단계에서 undefined로 초기화되는 것이 원..

• format_list_bulleted Front-End
• · 2023. 3. 29.
• textsms

[JavaScript] 자바스크립트 엔진, 변수 정의 과정

자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. Chrome 브라우저의 경우 V8 엔진을 사용한다. node.js 는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램이다. node.js는 여러 프로그램으로 구성되며, 자바스크립트 코드를 읽는 프로그램으로 V8을 사용한다. 브라우저 환경과 node.js 환경은 같은 자바스크립트 코드를 작성해도 다르게 동작할 수 있다. 자바스크립트 코드 실행 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성한다. 실행 컨텍스트는 두 단계를 통해 생성된다. 생성 단계에서 자바스크립트 엔진은 변수 선언을 읽는다. 실행 단계에서 자바스크립트 엔진은..

• format_list_bulleted Front-End
• · 2023. 3. 29.
• textsms

[JavaScript] ES6 Rest, Spread Operator

Rest Operator 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다. 함수의 인자 중 나머지를 가리킨다. 배열의 나머지 인자를 가리킨다. 객체의 나머지 필드를 가리킨다. 함수 인자 Rest Operator function findMin(...rest) { return rest.reduce((a, b) => a < b ? a : b) } findMin(7, 3, 5, 2, 4, 1) // 1 함수 인자 rest operator는, 인자들을 배열로 묶는다. rest에는 숫자들이 배열로 담긴다. reduce 함수로 min 값을 리턴한다. 객체 Rest Operator const o = { name: "Daniel", age: 23, address: "Street", job: "Softwa..

• format_list_bulleted Front-End
• · 2023. 3. 25.
• textsms

[JavaScript] this가 가리키는 것

Dynamic Binding 함수가 호출되는 상황은 4가지가 있다. 함수 호출 - 함수를 직접 호출 myFunc() 메서드 호출 - 객체의 메서드를 호출 o.method() 생성자 호출 - 생성자 함수를 호출 function Person() { this.name = 'Tom' } const p = new Person() 간접 호출 - call, apply 등으로 함수를 간접 호출 func.call(null, a) function myFunc() { console.log('myFunc called') } myFunc() // 함수를 직접 호출 const o = { name : 'Daniel', printName : function() { console.log(this.name) } } o.printName..

• format_list_bulleted Front-End
• · 2023. 3. 22.
• textsms

[JavaScript] 실행 컨텍스트 (Execution Context)

실행 컨텍스트 (Execution context) 실행 컨텍스트 혹은 실행 맥락은, 자바스크립트 코드가 실행되는 환경. 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다. 실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다. 실행 컨텍스트 스택 let a = 10 function f1() { let b = 20 function print(v) { console.log(v) } function f2() { let c = 30 print(a + b + c) } f2() } f1() print 실행 컨텍스트 : v f2 실행 컨텍스트 : c f1 실행 컨텍스트 : b, print, f2 global 실행 컨텍스트 : a, console, f1 호출되는 순서대로..

• format_list_bulleted Front-End
• · 2023. 3. 22.
• textsms