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

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

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

[JavaScript] 자바스크립트 내장 객체

자바스크립트의 내장 객체들 자바스크립트는 여러 용도에 활요하는 객체를 내장하고 있다. 숫자 다루기, 문자 다루기, 날짜 다루기, JSON 객체 다루기 등에 유용한 객체를 제공한다. 핵심 내장 객체들의 기능을 이해하면, 실제 프로젝트에서 유용하게 활용할 수 있다. globalThis globalThis는 전역 객체를 지칭하는 변수이다. 전역 객체는 환경에 따라 다르다. 브라우저 환경은 window, node환경은 global 객체를 지칭한다. globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다. window const targetURL = "https://www.naver.com"; const windowSize = `height=${window.innerHei..

• format_list_bulleted Front-End
• · 2023. 3. 30.
• 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] 자바스크립트 클로저 (Closure)

일급 객체 first-class object 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것 자바스크립트에서 함수는 일급 객체이다. 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다. function add(a, b) { return a + b } // 함수를 다른 함수의 인자로 넘긴다. [1, 2, 3].reduce(add, 0) (() => { console.log('익명 함수를 생성한다.') })() function outer(a) { function inner(b) { return a + b } // 중첩 함수를 생성한다. return inner(10) } const Person = (name) => { // 함수를 변수로 생성한다. const printName = () => console..

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