[JavaScript] 클로저(closure)의 개념과 클로저를 이용한 캡슐화(encapsulation)

우선 클로저의 캡슐화에 대해 알아보기 전에 클로저가 무엇인지 먼저 알아보겠다. 위 사진은 자바스크립트 엔진이다. 보이는 것과 같이 메모리 힙과 콜 스택으로 나뉘게 된다. 여기서 콜 스택은 "실행 컨텍스트"라는 것들을 차곡차곡 쌓게 된다. EcmaScript 공식문서에서 정의한 "실행 컨텍스트"란 "실행 가능한 JS 코드블럭이 실행되는 환경" 이다. 이 때, 자바스크립트는 함수 레벨 스코프 언어이기 때문에, "실행 가능한 JS 코드블럭"이 의미하는 것은 대부분의 경우 함수가 된다. 여기서 예시 코드를 한번 들어보자. 위와 같은 코드가 있다고 가정해보고, 그림을 통해 어떻게 동작할지 잘 생각해보.......

blog.naver.com/dlaxodud2388/222150877668

[JavaScript] strict mode(use strict)

ES5부터 strict mode가 사용 가능하다. strict mode는 자바스크립트의 문법을 엄격히 적용하여 원래 무시되던 오류들이나 잠재적으로 오류를 발생시킬 수 있는 코드에 대해 오류를 발생시키는 모드이다. 적용 방법은 아래와 같다. 이는 아래와 같이 함수 단위로도 사용이 가능하다. 단, 주의할 점은 코드의 최상단에 사용하지 않는다면 strict 모드가 제대로 동작하지 않는다. 그렇다면 strict mode가 걸러내는 에러들에 대해 간단하게 몇가지만 알아보자. 1. 암묵적 전역 변수 2. delete 사용 3. arguments.callee 또는 arguments.caller 사용 불가능 이 외에 여러가지가 있다. MDN의 Strict mode에 들어가서 보면 확인할 수 있다.

[JavaScript] 명시적 변수와 암묵적 전역 변수

우선 이 코드에 대해서 먼저 생각해보자. 결과는 예상한 대로 10이 찍힐 것이다. 위와 같은 경우 또한 10이 찍히게 될 것이다. 왜 찍힐까? 잘 생각해보면 a라는 변수는 선언문이 없다. js 엔진은 a라는 변수를 우선적으로 hello실행 컨텍스트의 변수객체에서 a라는 변수가 존재하는지 확인할 것이다. 하지만, hello의 변수객체에서는 a라는 변수를 찾지 못할 것이고 이후 전역 객체로 스코프 체인을 따라 확인할 것이다. 그러나 a는 선언문이 없기에 전역에서도 찾지 못하여 reference Error가 발생하지 않을까 하고 생각할 수 있다. 아래 그림과 같이 말이다. 그럼에도 10이 출력되는 이유는 뭘까? 이렇게 되는 이유는 js엔진이 전역 객체에 a라.......

[JavaScript] 클로저(closure)의 개념과 클로저를 이용한 캡슐화(encapsulation)

[JavaScript] ES6의 Class키워드의 동작원리에 대해 알아보자.

우선 ES6부터는 Class키워드를 사용하여 클래스 정의가 가능하다. 사용법부터 간단하게 알아보자. 위와 같이 사용할 수 있다. 자바와 비교하여 한번 보자. 위를 보면 알 수 있겠지만, constructor()이 자바의 생성자와 비슷하다고 보면 된다. 이 외로는 별다를게 없어보인다. 그런데 알다싶이 자바스크립트는 프로토타입을 이용해 동작하기때문에, 자바와 전혀 다르게 동작한다. 그렇다면 이 Class키워드는 어떻게 동작하는 걸까? 아래는 아까와 같은 코드이다. 여기서 Hello클래스와 그 인스턴스인 a를 한번 콘솔로 찍어보자. 우선 console.dir(Hello)의 결과부터 먼저 보자. 결과는 아래와 같다. 위를 보면 알 수 있지만, 일반 함수가 생성되었.......

[JavaScript] 자바스크립트의 프로토타입을 이용한 상속 구현

우선, ES6 부터는 Class라는 키워드를 사용함으로써, Class 오브젝트를 사용할 수 있다. 대강 아래와 같이 말이다. 하지만 이는 조금 자세히 보면 모두 prototype을 이용하여 결국 구현되었다는 것을 알 수 있다. 아래와 같은 코드의 결과를 한번 봐보자. 결국 함수가 생성되면 생기는 arguments객체, prototype객체가 class 키워드를 썼을 때에도 모두 존재하고 __proto__가 Function.prototype을 향해있는 사실또한 같다는 것을 확인할 수 있다. 아래와 같이 말이다. 그렇다면 이제 prototype을 이용하여 클래스와 비슷하게 동작하도록 코드로 만들어보자. 이렇게 만든다면 생성자 함수 Hello()에서 만든 인스턴스들은 모두 프로토타입 체이닝.......