본문 바로가기

Backend/Javascript

 (35)
ES2022 다소 (많이) 늦었지만, ES2022 에서 새로 나온 기능들 중 일부에 대해 얘기를 해보려 합니다. - ES2022 ? ES2022, ES6, ES5, ES2015 등의 용어는 자바스크립트 개발자라면 꽤 자주 봤을 것 입니다. 여기서 ES 는 ECMAScript 의 줄임말로, 국제적 표준화 기구인 Ecma International 이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 뜻한다고 합니다. 알아둬야 할 건 자바스크립트 표준화를 위해 만들어졌다는 것 입니다. ECMAScript 에 대해선 다른 포스팅에서 좀 더 적어보도록 하겠습니다. 무튼 이 버전은 publish 되는 해에 맞춰서 네이밍 되는 것 같습니다. ES2020, ES2021, ES2022 이런 순서로 ..
Javascript 내장 클래스 확장 - 문제 상황 배치 프로그램 작성 중 Javascript 의 내장 클래스인 Map 을 사용하면 딱 적절할 부분이 있었는데, 해당 클래스에 몇 가지의 메서드를 추가하거나 기존 메서드를 수정하고 싶은 케이스가 있었습니다. 예를 들면 생성한 Map 에 set 을 하는데 조건을 만족하는 key 에 대해서만 얼마나 set 이 호출되었는지 카운팅을 하기 위해서 말이죠. const map = new Map(); map.set(...); map.set(...); ... console.info(map.getSpecificCount()); // ? 원하는 바를 약간 수도코드처럼 작성하면 위와 같을 것 입니다. 하지만 내장 클래스인 Map 에 set 메서드는 있지만 getSpecificCount 와 같은 메서드는 없고, 기..
Javascript - Closure (클로저) 에 대해 - 클로저에 대한 이해 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 바로 코드 예시를 보도록 하겠습니다. const outer = function () { let a = 1; const inner = function () { console.info(++a); }; inner(); }; outer(); 위 코드가 실행될 때 콜스택 및 실행 컨텍스트를 도식으로 나타내 보겠습니다. 뭐 딱히 특별한 점은 없습니다. (실행 컨텍스트 참고 링크) 그럼 위 코드를 조금 변경 해보겠습니다. const outer = function () { let a = 1; const inner = function () { return ++a; }; return inner; }; const out = out..
Javascript - 실행 컨텍스트란 - 실행 컨텍스트 ? 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 상단으로 끌어 올리고 (호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데 이 과정에서 다른 언어에선 볼 수 없는 현상들이 발생합니다. 여기서 실행 컨텍스트 (execution context) 는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 동적 언어로서의 자바스크립트 성격에 대해 가장 잘 파악할 수 있는 개념입니다. 자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 넣었다가 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 하나의 실행 컨텍스트를 구성할 수 ..
JavaScript - this 에 대해 자바스크립트에서 혼란스러운 개념엔 몇 가지가 있지만, 그 중 1순위를 꼽으라면 this 일 것입니다. 깊숙히는 아니지만 제가 경험해봤던 객체지향 언어에서 this 는 클래스로 생성한 인스턴스 객체를 의미합니다. 클래스에서만 사용할 수 있기 때문에 혼란스러울 부분이 없었지만, 자바스크립트는 어디에서나 this 를 사용할 수 있습니다. 이 점 때문에 JS 에서 this 가 참 혼란스러운 개념이라 생각하며, 제대로 한 번 짚고 넘어가보겠습니다. - 상황에 따른 this 자바스크립트에서 this 는 기본적으로 실행 컨텍스트에 따라 바뀝니다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this 는 함수를 호출할 때 결정된다고 할 수 있습니다. • 전역 공간 전역 공간에서 this 는 전역 객체를 가리킵니다. ..
JavaScript - 프로토타입 (Prototype) 에 대해 자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반 언어에서는 '상속' 을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻습니다. - 프로토타입의 개념 프로토타입 개념을 설명하기 위해 다이어그램을 하나 그려봤습니다. 이를 텍스트로 풀어서 설명하면 아래와 같습니다. • 어떠한 생성자 함수 (Constructor) 를 new 연산자와 함께 호출하면, Constructor 에 정의된 내용을 바탕으로 새로운 인스턴스 (instance) 가 생성됩니다. • 이 instance 에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor 의 prototype 이라는 프로퍼티를 참조합니다. prototype 프로퍼티와 ..
[Javascript] - Weakness Weakness (자바스크립트의 단점) ‣ 자바스크립트의 == 연산자 "" == false // true [] == false // true null == false // true undefined == false // true 빈 문자열은 '거짓이라고 볼 수 있는 값' 이기 때문에 false, 하지만 빈 배열은 '거짓이라고 볼 수 있는 값' 이 아닌데 false 입니다. null 과 undefined 또한 '거짓이라고 볼 수 있는 값' 이지만 false 는 아닙니다. [] == [] // false [] == ![] // true 두 개의 빈 배열은 같은 객체가 아니므로 동등하지 않습니다. 하지만 두번째 비교문은, 먼저 빈 배열은 '참이라고 볼 수 있는 값' 이라 ![] 는 false 입니다. == 연..
[Javascript] - Transpiling Transpiling (트랜스파일링) 트랜스파일링, 트랜스파일러에 그간 거의 관심이 없었지만, 책에 나온 김에 쓸만한 부분이 있을지 보도록 하겠습니다. - 트랜스파일링은 하나의 프로그래밍 언어를 다른 언어로 컴파일하는 특별한 형태입니다. 트랜스파일링에 자바스크립트가 많이 이용됩니다. 자바스크립트를 이식 가능하고 실행 가능한 형식으로 쓰는 것 + 자바스크립트의 범용성과 안정성을 이용하는 것입니다. - 자바스크립트는 이식성이 뛰어나고 최소화된 형태의 소스를 충분히 빠른 속도로 토큰화하고 파싱할 수 있습니다. - 트랜스파일러가 만들어지는 이유 ‣ 실험적인 용도 실험적인 언어와 기능을 만들고 테스트하는데 트랜스파일러는 이상적인 방법입니다. ‣ 특수화 트랜스파일러는 특별한 목적으로 만들어진 언어를 구현하기 위해 ..

티스토리툴바