JS & TS/Javascript

자바스크립트에서 비동기 로직을 다루다 보면 await이나 then 메서드로 값을 처리하는 경우가 많다. 보통 우리는 이런 값을 Promise라고 부르지만, 사실 자바스크립트 엔진은 어떤 값이 진짜 Promise인지 여부보다 then 메서드를 가지고 있는지를 먼저 확인한다. 이렇게 then 메서드를 가진 객체를 thenable이라 부르며, await이나 then 메서드 호출 시 핵심적인 역할을 한다.thenable은 Promise와 유사하게 동작할 수 있는 객체를 의미한다. ECMAScript 명세에 따르면, await와 then 메서드 호출은 내부적으로 동화(assimilation) 과정을 거쳐 모든 thenable을 표준 Promise로 감싸 처리한다. 즉, Promise가 아니더라도 then 메서드만..

이 글의 제목은 ‘자바스크립트에서의 멀티패러다임 프로그래밍’이지만, 우선은 영어에 대해 이야기해보자. 다소 뜬금없다고 느낄 수도 있겠지만, 다 이유가 있다.아주 오래전, 국제 외교의 언어는 프랑스어였다. 왕실 간의 외교문서와 고위 외교관의 대화는 프랑스어로 쓰이는 것이 관례였다. 하지만 지금은 전 세계 어디서든 영어가 표준 언어처럼 쓰인다. 그 배경에는 분명히 영국의 제국주의와 미국의 군사력, 경제력, 그리고 인터넷과 미디어 산업의 힘이 있다.하지만 나는 거기에 더해 영어 자체의 문법적 유연함도 중요한 역할을 했다고 생각한다. 영어는 문법이 다소 틀려도 의미가 통하고, 억양이나 맥락으로도 충분히 의사소통이 가능하다. 완벽하지 않아도 전달되는 언어, 이것이 영어가 세계적으로 퍼질 수 있었던 이유 중 하나였..

Iteration Protocol이터레이션 프로토콜은 자바스크립트에서 데이터를 순회하기 위한 표준화된 규약으로, 컬렉션(배열, 문자열 등)을 순회 가능한 형태로 정의한다. 이 프로토콜은 두 가지로 나뉘며, 하나는 이터러블 프로토콜(Iterable Protocol), 다른 하나는 이터레이터 프로토콜(Iterator Protocol)이다. 어떤 객체가 Symbol.iterator 메서드를 가지고 있고 이를 호출한 결과로 이터레이터(iterator)가 반환된다면, 그 객체는 이터러블하다고 말할 수 있다. 이터러블한 객체는 for...of 문, 전개 연산자(...), 비구조화 할당 등에서 사용할 수 있으며, 자바스크립트의 다양한 문법이 이 프로토콜 위에 구성되어 있다.반면, 이터레이터는 next() 메서드를 가..

기존 자바스크립트 사용자들은 객체의 속성 접근을 감지하거나 동작을 변경하기 위해 Object.defineProperty() 같은 방법을 사용했다. 그러나 여기에는 동적 속성 추가나 함수 호출과 같은 동작을 탐지하는 데 어려움이 있었다. 이를 해결하기 위해 자바스크립트에 Proxy 처리기가 도입되었다. 이 클래스는 get, set, apply 등 다양한 트랩(trap)을 제공하여 객체의 속성 접근, 값 변경, 삭제, 함수 호출 등의 동작을 자유롭게 제어할 수 있도록 한다. 아마도 이것이 Proxy 처리기에 대한 일반적인 인식일 것이다. 나도 큰 틀에서는 이러한 인식에 동의한다. 사소한 문제가 하나 있다면, 나는 '객체의 속성 접근을 감지하거나 동작을 변경'해야할 필요를 느끼지 못했다는 것이다. 더 자세히 ..

렉시컬 스코프라는 단어를 처음 접했을 때, 나는 별 생각 없이 이것이 '렉시컬 환경에 따른 스코프 체인에 대한 것'이라고 생각했다. 때문에 모 회사의 면접에서 렉시컬 스코프를 설명하라는 질문에 부끄럽게도 스코프 체인에 대한 내용만 읊어버리고 말았다. 면접이 끝나고 이 두 개념이 다른 것이라는 말을 들었지만, 왜 다른 건지 뭐가 다른 건지 어떻게 다른 건지는 알 수 없었다. 이후 코어 자바스크립트와 YDKJSY를 읽으며 이 두 개념이 비슷하지만 확실히 다르다는 사실을 알게 되었다. 렉시컬 스코프는 변수와 함수가 어디에서 선언되었는지에 따라 그 유효 범위(scope)가 결정되는 원칙을 의미한다. 이는 정적으로 결정되며, 코드가 작성되는 위치에 따라 스코프가 결정된다. 즉, 함수가 어떤 코드 블록 내에서 선언..

자바스크립트는 프로토타입 기반(prototype-based) 언어로, 객체 지향 프로그래밍에서 클래스를 사용하는 대신 프로토타입을 활용해 객체를 상속한다. 모든 객체는 __proto__라는 숨겨진 프로퍼티를 통해 프로토타입 객체에 정의된 프로퍼티와 메서드를 상속받을 수 있다. 또한, 자바스크립트에서는 number, string, boolean 같은 원시 값도 객체처럼 동작하는데, 이는 자바스크립트 엔진이 자동으로 해당 값을 감싸는 래퍼 객체(Wrapper Object)를 생성하기 때문이다. 덕분에 원시 값도 String.prototype.toUpperCase() 같은 메서드를 사용할 수 있으며, 메서드 호출 후 래퍼 객체는 즉시 사라져 원시 값의 특성을 유지한다.클래스 문법이 등장한 이후로도 프로토타입은..

제어 반전(Inversion of Control, IoC)은 SOLID 원칙 중 하나인 의존성 역전 원칙(Dependency Inversion Principle, DIP)을 구현하는 핵심 개념이다. 제어 반전에서는 객체 생성과 실행 흐름을 제어하는 주체가 개발자가 아니라 프레임워크나 외부 컨테이너로 넘어가게 된다. 즉, 원래는 개발자가 직접 객체를 만들고 메서드를 호출했지만, 제어 반전을 적용하면 이 제어권이 역전되어 개발자가 아닌 다른 주체(라이브러리, 이벤트 루프, 프레임워크 등)가 객체를 관리하고 필요한 시점에 실행하게 된다. 이를 통해 코드의 결합도를 낮추고 확장성과 테스트 용이성을 높일 수 있다.제어 반전을 달성하기 위해 네 가지 방법이 주로 사용된다. 첫 번째는 의존성 주입(Dependency..

객체 지향 프로그래밍은 코드의 재사용성과 유지보수성을 높이기 위해 다양한 설계 원칙을 제공한다. 그중 클래스 상속(Class Inheritance)과 클래스 합성(Class Composition)은 객체들 간의 관계를 정의하고, 코드의 유연성과 확장성을 높이는 중요한 개념이다. 두 접근법은 유사한 목적을 가지고 있지만, 문제를 해결하는 방식에 차이가 있다.클래스 상속은 부모 클래스의 속성과 메서드를 자식 클래스가 물려받는 방식으로, 코드의 중복을 줄이고 계층적인 관계를 표현하는 데 유용하다. 반면, 합성은 객체들이 다른 객체를 포함하여 새로운 기능을 구현하는 방식으로, 더 나은 유연성을 제공한다.최근에는 상속 대신 합성을 더 자주 사용하자는 이야기가 종종 나오고 있으며, 심한 경우 상속은 코드의 품질을 ..

자바스크립트는 객체 지향 프로그래밍을 지원하기 위해 다양한 키워드와 수단을 지속적으로 추가해나가고 있다. 이러한 변화는 개발자들이 복잡한 객체 구조를 다룰 때 가독성과 유지보수성을 높이고, 캡슐화를 보다 쉽게 구현할 수 있도록 돕는다. 특히, #를 사용한 프라이빗 멤버 변수는 기존의 약속된 네이밍 관례(예: _로 시작하는 변수명)를 대체하며, 접근 제어를 언어 차원에서 명확히 보장한다는 점에서 큰 의의를 가진다. 이러한 기능들은 자바스크립트를 단순한 스크립팅 언어에서 벗어나 대규모 애플리케이션 개발에도 적합한 언어로 발전시키는 데 중요한 역할을 하고 있다.그러나 한편으로는 이러한 설계가 개발자들에게 오해를 불러일으킬 여지가 있다. #를 사용하기만 하면 캡슐화가 완벽하게 보장된다고 착각하는 경우가 그것이다..

프로토타입 오버라이드는 JavaScript에서 객체 지향 프로그래밍을 할 때 객체의 동작을 커스터마이징하거나 확장하기 위해 사용하는 기법 중 하나다. JavaScript의 모든 객체는 프로토타입 체인을 통해 부모 객체의 속성과 메서드를 상속받는데, 이때 기본 제공되는 객체의 프로토타입에 새로운 메서드를 추가하거나 기존 메서드를 수정하는 것을 프로토타입 오버라이드라고 부른다. 예를 들어, Array나 String 같은 빌트인 객체의 프로토타입에 새로운 메서드를 추가하면, 해당 타입의 모든 인스턴스에서 이를 사용할 수 있는 것이다.프로토타입 오버라이드는 프로젝트 전반에 걸쳐 상당히 강력한 영향력을 행사한다. 올바르게 사용하면 중복 코드를 줄이고 개발 생산성을 높일 수 있지만, 잘못 사용하면 예기치 못한 동작..

[ this is this ]라는 포스트에서 이야기했던 것처럼 나는 this가 어떻게 바인딩되는지 정확히 알지 못했고, 그로 인해 꽤 오래 고통받았다. 이번 포스트에서는 자바스크립트에서 this가 정확히 어떻게 바인딩되는 지를 알아보고자 한다. this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 결국 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 호출하는 방식에 의해 같은 함수라 해도 this가 가리키는 값은 달라질 수 있다. 전역 공간에서 함수를 호출하거나, 메소드 내부에서 함수를 호출하는 경우라면 this는 전역 객체를 가리킨다. 만약 메소드 내부에서 함수를 호출할 때 this가 전역 객체가 아닌 상위 컨..

Tagged Template Literal 혹은 태그된 템플릿 리터럴이라 불리는 문법은 ES6부터 지원되는 자바스크립트 기능으로, 템플릿 리터럴을 함수와 함께 사용하여 더 강력하게 값을 조작할 수 있게 한다. 기본 템플릿 리터럴은 문자열을 표현하는 데 쓰이지만, 태그를 사용하면 문자열의 각 부분과 값들을 원하는 대로 가공할 수 있다. 태그 함수는 일반 함수와는 다르게 템플릿 리터럴 바로 앞에 위치해, 해당 함수가 템플릿을 처리하게 된다.기본적으로 태그 함수의 타입은 아래와 같다. 템플릿 리터럴로 무엇이 올지 모른다는 점 때문에 unknown으로 선언했지만, 필요하다면 Array 타입과 같은 방식으로 정해진 타입만을 받을 수도 있다.function myTag(strings: TemplateStringsAr..