JS & TS/Javascript

기존 자바스크립트 사용자들은 객체의 속성 접근을 감지하거나 동작을 변경하기 위해 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..

대소문자 변경 : toLowerCase∙toUpperCase()이 두 메소드는 원본 문자열을 수정하지 않고 대문자 혹은 소문자로 변환하여 새로운 문자열로 반환한다.  문자열 반복 : repeat()repeat()은 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다."abc".repeat(2); // 'abcabc'  공백 제거 : trim∙trimEnd∙trimStart()trim()은 문자열 양 끝의 공백을 제거하면서 원본 문자열을 수정하지 않고 새로운 문자열을 반환한다. 만약 특정 방향의 공백만을 제거해야 한다면 trimEnd∙trimStart()를 사용할 수 있다.const greeting = ' Hello world! ';greeting.trim() // "Hello world..

자바스크립트의 모든 것은 사실상 객체이다. 이는 문자열이나 배열 등이 object의 프로토타입을 상속받는다는 의미이다. 따라서 다른 타입의 메소드와 달리 객체의 메소드는 대부분 Object 프로토타입에 걸려있는 정적 메소드이다.  객체를 배열로 : keys()∙values()∙entries()이 메소드들은 객체로부터 직접 찾은 열거 가능한 문자열을 요소로 하는 배열을 반환한다. 배열도 객체이기 때문에 values()를 통해 배열을 복제하는 방식도 사용할 수 있다.// 단순 배열const arr = ["a", "b", "c"];Object.keys(arr) // console: ['0', '1', '2']// 유사 배열 (숫자를 속성으로 사용하는 객체)var obj = { 0: "a", 1: "b", 2:..

값 변경 : with()with()은 할당 연산자 없이 특정 인덱스의 값을 바꾸며, 값이 바뀐 새로운 배열을 반환한다. 기존의 배열은 수정되지 않는다. 이를 통해 조작을 수행하는 동안 메소드 체이닝을 사용할 수 있다.// 할당 연산자를 사용했을 때const arr = [1, 2, 3]const newArr = [...arr]newArr[0] = 12newArr.forEach(() => {})// with()을 사용했을 때const arr = [1, 2, 3]arr.with(0, 12).forEach(() => {})  스택과 큐 : shift∙unshift()와 push∙pop()알고리즘을 풀다보면 배열을 사용해서 스택과 큐를 구현하는데, 이 네 가지 메소드를 사용해 FIFO와 LIFO를 구현한다. 특히..