320x100 Study/JavaScript & Typescript4 [JS] 클로저(Closure)와 렉시컬 스코핑 Javascript를 어느정도 사용해 보았다면 클로저 라는 단어를 한번쯤은 들어보았을 것이다. 그러나 실제로 클로저가 정확이 어떤 것이고, 어떤 상황에 쓰이는지 애매한 점이 있어서 정리하려고 한다. 먼저 MDN에서는 클로저를 다음과 같이 설명하고 있다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 함수와 함수가 선언된 어휘적 환경의 조합 이라고 설명하고 있다. 이를 이해하기 위해 렉시컬 스코핑을 먼저 훑어본다. 어휘적 범위 지정(Lexical Scoping) 자바스크립트에서 상단과 같은 코드가 있다고 할때, 콘솔에는 2가 찍힌다는것을 쉽게 예측할 수 있다. 기본적으로 함수.. 2021. 12. 17. [JS] 자바스크립트의 동작 원리 개요 자바스크립트가 어떻게 돌아가는지 알기 위해서, 자바스크립트 엔진에 대해 알아야 한다. Javascript 엔진이란, 자바스크립트를 실행시키는 인터프리터를 일컫는 말이다. 자바스크립트가 처음 나왔을 때는, 단순히 웹 페이지에서 Html Elements를 조작하는데에만 사용했다, 그러나 시간이 지남에 따라 Nodejs 등등 다양한 런타임 환경이 등장하면서 그 쓰임새는 다양해졌다. 현재 가장 유명한 JS 엔진으로 V8 엔진을 들 수 있겠다. V8 엔진은 구글 크롬에서 사용되며 Nodejs의 기반이 된 엔진이다. 구성 요소 자바스크립트의 엔진은 위 그림처럼 메모리 힙과 콜스택을 기반으로 한다. 메모리 힙은 동적으로 생성된 Object 들이 저장되는 곳이다. 콜스택과 다르게 메모리 힙에는 참조 타입들이 저장.. 2021. 12. 9. [JS] 호이스팅(Hoisting)이란 무엇인가?? Javascript를 사용 하다보면 호이스팅 이라는 말을 들어본 적이 있을 것이다. 실제로 나도 호이스팅 이라는 말을 들어본 적만 있고, 개념이 제대로 잡혀있는 것 같지 않아 블로그에 보기 좋기 정리하려고 한다. 들어가기에 앞서 호이스팅은 let과 const가 추가된 ES2015(ES6)에서부터 var를 사용하지 않으면서 중요도가 떨어졌다. 그래도 자바스크립트의 실행 환경을 이해하기 위해 알아두면 좋을 것 같다. Hoisting의 뜻 네이버 영어사전을 통해 알아본 호이스팅의 뜻은, "끌어 올리기" 이다. 무엇을 끌어올린다는 것일까? 선언을 끌어올린다 MDN web Docs에서는 호이스팅을 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것 이라고 말하고 있다. 코드를 보면서 어떤 .. 2021. 11. 6. [JS] this 부터 call, apply, bind 까지 내가 다른 언어보다 JS에서 가장 애를 먹었던 키워드들 중 하나가 this 이다. this에 대해 공부한 내용을 최대한 내 언어로 정리해보려고 한다. this는 무엇인가? JAVA에서의 this는 간단히 말하면 해당 인스턴스를 가리키는 키워드이다. JS에서도 클래스의 인스턴스 내에서 this를 사용하면 해당 객체를 가리키게 된다..만, JS의 this는 조금 다른 의미를 가지고 있다. this는 기본적으로 전역 객체를 가리킨다 Chrome 브라우저에서 개발자 도구 콘솔을 열고 this를 입력해보면 다음과 같이 나온다. 이렇게 Window 객체가 나오는것을 확인할 수 있다. 이번에는 nodejs에서 this를 출력해 본다. nodejs에서 this를 입력하여 확인해보면, 이렇게 global 객체의 정보가 .. 2021. 9. 26. 이전 1 다음
