[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

[JavaScript] 화살표 함수 / 일반 함수 에서의 this

화살표 함수 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다 일반 함수 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다. const o = { method() { console.log("context : ", this) // o let f1 = function() { console.log("[f1] this : ", this) } let f2 = () => console.log("[f2] this : ", this) f1() // global f2() // o }, }; o.method() f1() 은 실행될 때 새로운 컨텍스트를 생성한다. 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다. f2()는 함수 컨텍스트를 생성하며 this 변수는..

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

[Programmers] Javascript 해시 - 완주하지 못한 선수

프로그래머스 고득점 KIT 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한 사항 - 마라톤 경기에 참여한 수는 1명 이상 100,000명 이하입니다. - completion의 길이는 participant의 길이보다 1 작습니다. - 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. - 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion..

• format_list_bulleted Algorithm
• · 2023. 3. 23.
• textsms