자바스크립트 클래스 ?자바스크립트는 엄밀이 말하면 클래스의 개념이 존재하지 않고, 프로토타입 기반으로 클래스처럼 사용할 수 있습니다. 예를 들어 Array 타입의 객체를 new 연산자를 통해 인스턴스를 생성하면, Array의 프로토타입 내부 요소들이 참조되는데, 이를 클래스 기반 언어의 상속과 비슷하다고 볼 수 있습니다. ES5까지의 자바스크립트에서는 클래스가 없으며, ES6부터 프로토타입을 기반으로 클래스의 역할을 하는 기능이 도입되었습니다. 프로토타입 메서드 vs 스태틱 메서드자바스크립트는 프로토타입을 활용해서 인스턴스가 접근 가능한 프로토타입 메서드와 접근 불가능한 스태틱 메서드로 나누어집니다. const Rectangle = function (width, height) { this.width = ..

프로토타입 vs 클래스프로그래밍 언어에는 상속을 사용하는 클래스 기반의 언어와 객체를 프로토타입으로 삼고 이를 복제하는 프로토타입 기반 언어가 있습니다. 자바스크립트는 프로토타입 기반의 언어로 만들어져 있습니다. 프로토타입 기반 언어는 객체를 생성할 때 객체를 다른 객체 기반으로 생성합니다. 이를 프로토타입 체인이라고 부르며, 체인 상의 상위 객체를 상속받아 생성하여 상위 객체의 프로퍼티와 메서드를 사용할 수 있습니다. 클래스 기반의 언어는 정형화된 구조를 가지고 있어 코드의 재사용성과 유지보수성이 높지만, 프로토타입 기반의 언어는 프로토타입 체인을 통해 비정형화된 구조를 갖고 있으나, 객체를 유연하게 생성하고 확장할 수 있어 코드의 표현력이 높습니다. 프로토타입 사용 목적프로토타입은 자바에서 stati..

자바스크립트에서 public, private ? 자바스크립트는 변수에 접근 제한자 (public, private, protected 등)을 직접 부여하도록 설계되어 있지 않고, 클로저를 이용하여 함수 차원에서 public한 값과 private한 값을 구분하는 것이 가능합니다. 외부에 제공하고자 하는 정보들을 모아서 return 하고, 내부에서만 사용할 정보들은 return 하지 않는 것으로 접근 권한 제어를 할 수 있습니다. 따라서 return 한 변수들은 public, 그렇지 않은 변수들은 private 한 상태가 됩니다. let outer = function() { let a = 1; let inner = function() { return ++a; }; return inner; // 함수의 실행 결..

클로저 개요 클로저(Closure)는 여러 함수형 프로그래밍에서 등장하는 특성으로, 문헌 별로 다르게 정의되고 있습니다. MDN (Mozila Developer Network)에서는 클로저에 대해 "함수와 그 함수가 선언될 당시의 lexical environment의 상호 관계에 따른 현상"이라고 소개합니다. LexicalEnvironment는 자바스크립트에서 실행 컨텍스트를 생성 및 실행하는 과정에 사용되는 컴포넌트로, environmentRecord, outerEnvironmentReference, thisBinding 등의 작업을 통해 변수의 유효범위인 스코프가 결정되고, 스코프 체인이 가능해집니다. 이 중 outerEnvironmentReference는 현재 컴포넌트에서 변수를 찾지 못하면 외부 ..

콜백 함수 개요 콜백 함수는 다른 함수 또는 메서드에게 인자로 넘겨주면서 제어권도 함께 위임한 함수를 의미합니다. 일반적으로 다른 함수의 작업이 끝나면 실행되는 함수이며, 비동기나 복잡한 작업 환경에서 유용하게 사용됩니다. 콜백 함수 예제 - 제어권 let count = 0; let timer = function() { console.log(count); if (++count > 5) clearInterval(alarm); }; let alarm = setInterval(timer, 1000); delay의 값을 입력받아 5번 울리면 alarm을 종료하는 timer 콜백함수를 만들고, setInterval에 timer와 delay를 넘겨주는 코드입니다. timer()와 setInterval(timer, ..

this 함수 자바스크립트에서 this는 실행 컨텍스트가 생성될 때마다 this가 결정됩니다. 즉, 최초에 전역 컨텍스트 생성 시에 window 객체로 한 번 생성하고 이후 함수 실행 컨텍스트에 의해 함수를 호출할 때마다 생성됩니다. 전역 스코프에서의 this 전역 컨텍스트가 생성되면서의 this는 브라우저 환경 기준으로 window, Node 에선 global 객체가 됩니다. console.log(this); // true console.log(this === window); // true var a = 1; console.log(this.a); // 1 console.log(window.a); // 1 console.log(a); // 1 let b = 1; console.log(this.b); //..

Execution Context 란? Execution Context는 코드를 실행할 때 필요한 환경 정보들을 모아 둔 객체를 의미합니다. 자바스크립트에서는 실행 컨텍스트에 따라서 선언된 변수를 위로 끌어올리는 호이스팅, this 값 설정, 외부 환경 정보 구성 등의 동작이 발생합니다. 자바스크립가 실행 될 때마다 Execution Context 내에서 실행된다 정도로 이해하고 있습니다. Execution Context 종류 자바스크립트에선 실행 컨텍스트를 다음과 같이 3가지 나누어서 분류되고 있습니다. 전역 실행 컨텍스트 (Global Execution Context) 전역 컨텍스트는 최상단의 공간으로 자바스크립트 파일이 실행되는 순간 전역 컨텍스트가 활성화됩니다. 전역 컨텍스트는 브라우저의 Windo..

객체의 가변성 const originalArr = [1, 2, 3, 4, 5]; let copiedArr = originalArr; console.log(originalArr === copiedArr); copiedArr[0] = 6; console.log(originalArr, copiedArr); // [6,2,3,4,5] , [6,2,3,4,5] 위의 코드처럼 원본 객체는 그대로 두고 싶은 상황에서 복사본이 변경될 때 원본도 같이 변하는 문제점이 발생할 때가 있습니다. 이는 객체의 가변성으로 인해 생기는 문제입니다. == VS === ==은 값이 같은지만 비교하고, ===은 값과 타입이 같은지를 모두 비교합니다. let a = 1; let b = "1" console.log(a == b); // t..