자바스크립트 공부하다 보면 this 때문에 한 번씩 멈추게 된다.나도 코드 보다가 “왜 여기서는 this가 Tom이고 여기서는 undefined지?” 하면서 정리하게 됐다.결론부터 말하면 자바스크립트에서 this는함수가 어떻게 호출되었는지에 따라 결정된다.즉 어디서 선언됐는지가 아니라, 어떻게 실행됐는지가 중요하다.일반 함수 호출function test() { console.log(this);}test();브라우저에서 실행하면 결과는window일반 함수로 실행하면 기본적으로 this는 전역 객체를 가리킨다.브라우저에서는 전역 객체가 window이다.그래서 일반 함수에서는 보통this = window라고 생각하면 편하다.객체의 메서드로 호출객체 안에 있는 함수를 호출하면 this는 그 객체를 가리킨다.c..

JavaScript 는 클래스 기반 언어가 아니라 Prototype 기반 객체지향 언어이다.즉 객체는 클래스로부터 상속되는 것이 아니라Prototype 객체를 통해 기능을 공유한다.JavaScript 객체는 내부적으로 다음과 같은 구조를 가진다.객체 ↓prototype ↓상위 prototype이 구조를 Prototype Chain이라고 한다.Prototype이란 무엇인가prototype은 생성자 함수가 가지고 있는 객체이다.이 객체에는 해당 생성자로 생성된 인스턴스들이 공통으로 사용할 속성과 메서드를 정의할 수 있다.예시function Person(name) { this.name = name;}JavaScript는 자동으로 다음 객체를 생성한다.Person.prototype여기에 공통 기능을 추가할 수..

왜 var는 쓰면 안 되고, React · TypeScript에서는 어떻게 보일까?자바스크립트를 어느 정도 하다 보면 반드시 듣게 되는 말이 있음“자바스크립트는 호이스팅 된다”“TDZ 때문에 에러 나는 거다”“var는 쓰면 안 된다”그런데 막상 왜 그런지를 명확히 설명하기는 어려움이 글에서는 최대한 쉽게, 하지만 동작 원리까지 이해할 수 있게 정리해보고자 함호이스팅이란 무엇인가?호이스팅(Hoisting) 이란,자바스크립트 엔진이 코드를 실행하기 전에변수와 함수 선언을 먼저 메모리에 등록하는 동작중요한 점은“코드가 위로 올라간다”가 아니라“실행 전에 미리 준비한다” 는 것임자바스크립트 실행 과정JS는 코드를 다음과 같이 실행함호이스팅은 실행 준비 단계에서 발생함Creation Phase (실행 준비 단계)..