Daehyunii's Dev-blog

오늘은 클래스에 대해서 배웠다. 클래스에 대해서는 파이썬에서 한 번 골머리를 앓으면서 공부해서 그런지, 아니면 자바스크립트의 생성자 함수를 배워서 그런지 생각보다 가볍게 느껴졌다. 우선 자바스크립트의 클래스는 인스턴스의 프로퍼티를 생성하기 위한 방법이나, 프로토타입 메서드, 정적 메서드를 표현하는 방식의 차이 외에는 거의 생성자 함수와 비슷하다고 느꼈다. 사실 클래스도 함수 객체이고, constructor인 생성자 함수니 당연한 말일 수 있겠다. 클래스와 생성자 함수의 가장 큰 차이점이 하나 있다면, 생성자 함수는 프로토타입을 기반으로 상속관계가 이루어 진다면, 클래스는 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 방식으로 상속관계가 이뤄진다는 것이다. 그런데 여기서 한 가지 의문점은 자바스..

25.2 클래스 정의 클래스는 class 키워드를 사용하여 정의한다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는것이 일반적이다. // 클래스 선언문 class Person {} 클래스는 함수고, 따라서 클래스는 값처럼 사용할 수 있는 일급 객체다. 클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor, 프로토타입 메서드, 정적 메서드의 세 가지가 있다. // 클래스 선언문 class Person { // 생성자 constructor(name){ this.name = name; // 클래스에 의해 미래에 생성될 객체의 프로퍼티 } // 프로토타입 메서드 sayHi(){ console.log(`Hi my name is ${..

이번주는 빌트인 객체, this, 실행 컨텍스트, 클로저, 클래스에 대해서 공부를 했다. 이 중 제일 나의 발목을 잡았던 부분은 this와 실행 컥텍스트였다. this에 대해서는 앞부분을 공부하면서 함수의 호출 방식에 따라서 this가 바인딩되는 것이 달라진다 라는것을 알고 있었다. 일반 함수로 호출한다면 this는 전역 객체와 바인딩되고 메서드와 호출한다면 해당 메서드를 호출한 객체에 바인딩되며 생성자 함수로 호출한다면 생성자 함수가 미래에 생성할 인스턴스에 바인딩 된다는 것은 명확하게 알고 있었으나, 오히려 메서드로 호출되었을때 해당 메서드를 호출한 객체에 바인딩 된다는 말이 이상하게 헷갈리게 만들었다. 그러다 한 발 뒤에서 바라보니 말 그대로 마침표 앞에 있는 해당 객체를 가리킨다는 것을 정말 어이..

var 키워드로 선언한 전역 변수 -window 전역객체의 프로퍼티는 빌트인 객체, 자바스크립트 실행 환경에 따라 추가적인 프로퍼티와 메서드, var키워드로 선언한 전역 변수, 암묵적 전역, 전역 함수를 갖는다. 그렇다면 변수는 결국 전역 객체의 프로퍼티인가? -let과const키워드로 선언한 전역 변수는 보이지 않는 개념적인 블록인 전역 렉시컬 환경의 선언적 환경 레코드 내에 존재하게 된다고 했는데 그렇다면 let과 const키워드로 선언한 전역 변수는 전역 렉시컬 환경의 선언적 환경 레코드의 프로퍼티로 존재하는가? -그렇다면 전역 렉시컬 환경의 선언적 환경 레코드는 객체인가??

- var 키워드 : 선언 단계와 초기화 단계가 모두 런타임 이전 자바스크립트 엔진의 평가 단계에 이뤄진다. - let const 키워드 : 선언 단계는 런타임 이전 평가 단계에서 이뤄지고, 초기화 단계는 런타임에 변수 선언문에 도달했을 때 실행된다. 그렇다면 왜 var 키워드와 let, const 키워드의 초기화 단계의 시점 차이가 존재하도록 만든 것일까?? 답 : var 키워드로 선언한 변수는 코드의 흐름에 맞지 않게 호이스팅 되기 때문에 코드의 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남기지만 let, const 키워드로 선언한 변수는 호이스팅은 되지만 '초기화 단계'가 런타임에 변수 선언문에 도달했을 때 실행되기 때문에 코드의 흐름에 맞게 코드를 읽을 수 있기 때문이다. 2022.07.06 - ..

오늘 공부한 내용은 클로저이다. 클로저는 외부 함수보다 생명주기가 길며 외부 함수의 식별자를 참조하는 중첩 함수를 말한다. 비록 외부 함수의 생명 주기가 종료되어 외부 함수의 실행 컨텍스트는 제거 되었을지라도, 외부 함수의 렉시컬 환경은 별도의 객체로 중첩 함수의 [[Environment]] 내부 슬롯이 기억을 하고 있으며, 중첩 함수 호출시 생성되는 중첩 함수의 함수 실행 컨텍스트의 렉시컬 환경(자세하게는 외부 렉시컬 환경 참조)이 외부 함수의 렉시컬 환경을 참조하고 있다. 이는 자바스크립트 함수는 렉시컬 스코프를 갖기 때문이며, 렉시컬 스코프를 갖는 이유는 자바스크립트의 렉시컬 환경에서 그 이유를 찾을 수 있다. 클로저의 개념을 이해하는데는 큰 어려움은 없었다. 또한 클로저가 가져다 주는 장점 또한 ..

클로저의 핵심 키워드는 '함수가 선언된 렉시컬 환경'이다. 24.1 렉시컬 스코프 자바스크르립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. (관련된 내용은 13장 스코프 정리를 보면 자세하게 알 수 있다.) 2022.07.03 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 13장 스코프 13장 스코프 13.1 스코프란? 스코프란 식별자 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 앞서 경험한 바와 같 pinetree93.tistory.com 그리고 결국 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다...

오늘은 자바스크립트의 실행 컨텍스트에 대해 배웠다. 오늘 배운 내용은 여태까지 배웠던 내용들의 전체적인 흐름에 대해서 배울 수 있었다. 앞에 배운 내용들이 자동차의 재료들에 대한 개념을 배웠다면, 오늘은 자동차가 만들어지는 과정에 대해서 배우게 된 것 같다. 실행 컨텍스트를 공부하니 여태까지 배웠던 개념들을 배워야 했던 이유에 대해서 알 수 있게 되었다. 사실상 실행 컨텍스트는 스타그래프트의 일종의 scv라고 생각하면 될 것 같다. 코드의 유형을 분류해서 해당 코드 별로 담당하는 일꾼들을 만들어 내고 정보들을 저장해서 활용하는 구조로 자바스크립트는 실행되고 있었다. 내가 생각하는 자바스크립트의 핵심 개념 두가지를 뽑으라고 한다면, '스코프'와 '프로토타입'이라는 개념이라고 생각한다. 그 중 스코프가 생성..