자바스크립트 JavaScript

생성자와 This

들어가며 생성자와 this 에 대해서 알아보았다. 개인적으로 생성자 함수라는 말 보다는 함수의 생성자가 맞다고 생각하지만, 생성자라고 작성하면 읽는데 헷갈리는 부분이 있을 것 같아 이해를 위해 생성자 함수라고 적었다. 인사이드 자바스크립트 Ch.4.4를 참고하였다. 생성자와 this 예를 들어 이런 코드가 있다고 해보자. function foo() { this.name = 'foo'; // ... } var bar = new foo(); bar 는 foo 에게 접근할 수 있다. 이것이 가능한 이유는 bar 가 생성될 때 foo() 의 constructor 로 하여금, bar.__proto__ 가 foo()의 prototype 객체를 가리키게끔 했기 때문이다. 그리고 이 때 새롭게 생성된 new objec..

This 의 바인딩

들어가며 실행 컨텍스트에 관한 지난번 자료 에서 this는 실행 컨텍스트에 따라 달라진다 라는 내용을 간단하게 언급했었다. 그 때는 왜 달라지는지 에 대해서 언급을 했었다. 이번에는 어떻게 달라지는지 에 대한 내용이다. 혹시나 링크를 타고가지 않을 누군가를 위해 간단하게 말해보자면, Execution context 가 만들어질 때 this 가 바인딩이 되기 때문이다. 그러니까 실행 중에 결정이 된다는 말이다. 추가적으로 this 를 찾다보면 this는 Lexical Scope 와 아무런 관계가 없다 라는 것을 종종 볼 수 있다. 나는 이 말을 Execution context 가 만들어질 때 activation object(variable object) 안에서 this 와 parameter 가 아예 별개의..

함수

들어가며 함수에 대한 내용입니다. 책 인사이드 자바스크립트(4.1~4.3)를 참고하였습니다. 함수의 정의 함수를 정의하는 방식에는 크게 세 가지 방식이 있다. 함수 선언문 함수 표현식 Function() 생성자 함수 그리고 1번과 2번은 함수 리터럴 방식 을 이용해서 선언된다. 3번은 말 그대로, Function() 생성자 함수 를 통해서 선언된다. 함수 리터럴 방식 리터럴이란, 선언함과 동시에 값 또는 코드를 지정해주는 것을 말한다. -참고1 함수 선언문 - 기명 함수 function fInit(a) { console.log(a); } 함수를 선언할 때 이름이 꼭 있어야(기명) 한다. 그리고 선언문 이기 때문에 호이스팅이 일어날 수 있다. 때문에 코드 구성을 엉성하게 만들 수 있어서, 되도록이면 선언문..

Closure

들어가며 클로저에 관한 내용입니다. 개념 위주로 작성하였습니다. Closure 책과 여러 자료를 보고 정리 해봤을 때, 클로저는 아래와 같은 개념을 말한다고 나름의 정리를 해봤다. 클로저는 함수 자신과 함수 자신이 선언된 어휘적 환경을 기억하고 있다. 따라서 생명주기가 끝난 외부 함수의 변수를 스코프 체인 을 통해서 참조 를 할 수 있다. 코드를 보자. function outerFunc() { // 외부 함수 var x = 10; function innerFunc() { console.log(x); } return innerFunc; } var inner = outerFunc(); inner(); // 10 ffInner = fOuter() 를 했을 때, fOuter()의 execution context..

Scope

Scope 스코프는 흔히, 변수의 생존 범위 라고 알고 있다. 나 또한 그렇게만 생각하고 있었다. 물론 이 말이 마냥 틀린것은 아니지만, 스코프는 보다 넓은 개념을 포함하는 단어이다. 그래서 스코프를 알기 전에, 자바스크립트 프로그램이 어떻게 작동하는지를 먼저 볼것이다. 자바스크립트 프로그램은 어떻게 실행될까? 자바스크립트 프로그램은 Engine, Compiler, Scope에 의해 실행된다. (보다 정확하게는 엔진에 의해 실행되지만, 컴파일러와 스코프는 엔진의 명령에 따라 각기 맡은 일을 하기 때문에, 각각에 의해 실행된다는 것도 마냥 틀리지만은 않다고 생각한다) Engine Compilation의 전 과정과 자바스크립트 프로그램 실행의 전 과정을 담당한다. (우리가 흔히 아는 V8은 자바스크립트의 다..

실행 컨텍스트 (Execution Context)

들어가며 지난 JavaScript, Front-End 발표 주제는 this 였지만, 공부하다 보니 실행 컨텍스트에 대한 내용이 선행되야 할 것 같아 실행 컨텍스트에 대하여 발표를 하게 되었다. 여러 자료와 책을 참고하며 공부를 하고 있음에도 내용이 잘 와닿지 않아 참고1을 참고2, 참고3, 참고4, 책 인사이드 자바스크립트, Poiema Web을 참고하여 번역을 해보고자 한다. 추가적으로 내가 여러 자료를 찾아보면서 알게 된 내용들도 덧붙일 것이다. 실행 컨텍스트, Execution Context(이하 EC) 라는 개념은 나에겐 낯설었기에 나와 같은 사람들이 있을 것 같아 흔히들 아는 콜스택 을 시작으로 글을 써보도록 하겠다. Call Stack과 EC var x = 'xxx'; function foo ..

JITC, Adaptive-JITC

들어가며 자바스크립트는 컴파일 언어인가요, 인터프리터 언어인가요? 라는 내용을 검색하면 종종 보이는 단어가 있다. 바로 JITC (Just-In-Time Compiler) 라는 단어인데, 같이 나오는 내용인 즉 JITC는 인터프리팅을 하다가, 필요한 부분에 대해서는 컴파일을 하여 최적화를 한다 이다. 이 말은 내용은 맞지만 이름이 틀렸다. 위의 방식은 Adaptive JITC 라고 하여, 최근 대다수의 JavaScript 엔진들이 차용하는 방식이다. 그리고 JITC 는 과거의 JavaScript 엔진들이 차용하던 방식이다. 그렇다면 JITC와 Adaptive JITC는 무엇이고, 이들의 차이점은 무엇인지 알아보자. JITC JITC는, 위에서 언급했듯이 인터프리터 언어와 달리 bytecode를 nativ..

JavaScript 의 역사

JS? ES6? ES? 넷스케이프 커뮤니케이션즈에서 JavaScript를 선보였다. 1995년, 넷스케이프 커뮤니케이션즈는 정적인 HTML을 동적으로 표현하기 위해 JavaScript를 도입하게 되었다. (처음에는 Mocha, 그 다음에 LiveScript, 그 다음에 JavaScript가 되었다) 마이크로소프트에서 JScript를 선보였다. 그러나, JavaScript가 탄생한 뒤 얼마 지나지 않아, MS에서 자바스크립트의 파생 버전인 JScript를 출시하였다. 이로써 JavaScript가 위기를 맞기 시작했다. 더해서 1996년 8월, MS는 JScript를 IE 3.0에 탑재하였다. 그런데 문제는 JScript와 JavaScript가 표준화되지 못하고 적당히 호환되었다는 것이다. 왜냐하면 자사 브..