javascript5 생성자 함수와 Prototype Prototype을 설명하기 전 생성자 함수(constructor function)를 이해하는 게 좋다. 생성자 함수는 다음과 같은 특징이 있다. 1. 일반 함수와 같지만 생성자 함수를 호출할 때 new 예약어를 사용한다. - new 예약어를 사용하여 생성자 함수를 호출하는 순간 다음과 같은 일이 발생한다. 새로운 빈 객체가 생성됨. this 키워드가 만들어진 빈 객체를 가리킴. prototype 프로퍼티가 만들어짐. 위에서 만들어진 객체가 리턴됨. 2. 생성자 함수명의 첫글자는 대문자로 한다. 3. 생성자 함수는 화살표 함수가 아닌 일반 함수로 선언해야 한다. 위 내용을 주의하여 생성자 함수를 만들어 보자. const Book = function(name, publicationYear) { consol.. 2020. 11. 17. Closure의 이해 우선 closure는 우리 개발자가 직접 생성하는 것이 아닌 특정 상황에서 JavaScript에 의해 자동으로 나타나는 결과이다. 우리가 closure를 직접 만들진 않지만 어떤 상황에서 어떤 원리에 의해 closure가 생성되는지 알아야 적절한 때에 용도에 맞게 closure를 활용할 수 있을 것이다. 몇가지 예제 코드와 해당 코드가 실행될 때의 JavaScript 엔진의 동작 방식을 통해 closure를 이해하보자. const attack = function() { let hp = 100; return function() { hp--; console.log(`Your current HP: ${hp}`) }; }; const user = attack(); 코드와 첨부된 사진을 같이 보면 global 실.. 2020. 11. 17. this 키워드 this 키워드(또는 변수)는 각 실행 컨택스트마다 별도로 생성되는 특별한 키워드로써 this 키워드가 사용되고 있는 함수의 주인을 가리킨다. this가 가리키는 것은 상황 별로 다음과 같이 달라진다. 1. 기본 함수의 this: undefined 2. 화살표 함수의 this: 화살표 함수 자체의 this는 존재하지 않지만 화살표 함수의 상위 함수를 가리킴. 3. 메서드의 this: 메서드를 포함하고 있는 객체를 가리킴. 4. 이벤트 핸들러의 this: 해당 이벤트 핸들러가 적용된 DOM을 가리킴. * 주의! this는 this가 사용되고 있는 함수 자체를 가리키거나 실행 컨택스트 마다 존재하는 개별 함수의 변수가 모여있는 공간인 variable environment을 가리키지 않는다. 다음 코드를 통해.. 2020. 11. 16. Hoisting과 Temporal Dead Zone (TDZ) JavaScript로 개발을 하거나 JavaScript로 짜여진 코드를 많이 본 사람들은 한번쯤 궁금했을 개념 hoising에 대해 알아보자. Hoising이란 변수나 함수가 선언되기 전에 이를 사용할 수 있는 현상을 말한다. 프로그램이 실행되기 전 JavaScript는 코드를 스캔하여 어떤 변수가 선언되어 있는지 확인하고 각 변수가 variable environment에 미리 생성된다. 이 작업은 각 함수에 대한 실행 컨택스트가 생성되는 단계에서 일어난다. 다음은 변수 및 함수에 따라 hoisting이 어떻게 적용되는지 표를 통해 살펴보자. Hoising과 더불어 초기값과 스코프에 대한 내용도 함께 정리했다. 위 표를 참고하여 다음 코드를 살펴보자. // undefined console.log(lang.. 2020. 11. 16. Scope와 Call Stack 본 포스팅을 통해 JavaScript Scope와 Call Stack의 차이를 알아보자. 우선 다음의 코드를 먼저 살펴보자. const a = 'How old are you?'; first(); function first() { const b = 20; sedonc(); function second() { const c = 30; third(); } } function third() { const d = 40; console.log(d + c + b + a); // ReferenceError } 함수가 불려진 순서에 따라 콜 스택에 쌓이기 때문에 위 코드에 대한 콜 스택은 다음과 같을 것이다. 각 함수별 실행 컨텍스트가 존재하며 각 실행 컨텐스트에 해당 함수에 포함된 변수들이 표기되어 있다. 함수 별 실.. 2020. 11. 14. 이전 1 다음
