개발개굴🐸

등장 배경 자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요 없는 객체지향 프로그래밍 언어입니다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었습니다. 따라서 ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시하였습니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수 있습니다. 하지만, 생성자 함수와 매우 유사하게 동작하는 반면 몇 가지 차이점이 있어 새로운 객체 생성 메커니즘으로 보는 것이 좀 더 ..

클로저(closure)는 자바스크립트 고유의 개념이 아닌 함수형 프로그래밍 언어에서 사용되는 중요한 특성으로 MDN에서는 클로저를 "함수와 그 함수가 선언된 렉시컬 환경과의 조합"이라고 정의합니다. 따라서 클로저를 이해하기 위해선 함수가 선언된 렉시컬 환경에 대해 알아야합니다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 정의했는지에 따라 상위 스코프인 렉시컬 스코프(정적 스코프)를 결정합니다. const x = 1; function foo () { const x = 10; bar(); } function bar () { console.log(X); } foo(); // 1 bar(); // 1 위 예제의 foo 함수와 bar 함수는 모드 전역에서 정의된 전역 함수로 foo 함수와 bar 함수 모두 ..

실행 컨텍스트(execution context)란? 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역으로 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분하는데 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다릅니다. 소스코드 타입 설명 전역 코드 - 전역에 존재하는 소스코드 - 최상위 스코프인 전역 스코프 생성 - 전역 코드가 평가되면 전역 실행 컨텍스트가 생성 함수 코드 - 함수 내부에 존재하는 소스코드 - 지역 스코프를 생성 - 함수 코드가 평가되면 함수 실행 컨텍스트가 생성 eval 코드 - 빌트인 전역 함수인 eval 함수에 인자로 전달되어 실행되는 소..

this 키워드 this는 자신이 속한 객체를 또는 자신이 생성할 인스턴스를 가르키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. // 생성자 함수 function Circle(radius) { // this는 생성자 함수가 생성할 인스턴스를 가리킴 this.radius = radius; } Circle.prototype.getDiameter = function () { // this는 생성자 함수가 생성할 인스턴스를 가리킴 return 2 * this.radius; }; // 인스턴스 생성 const circle = new Circle(5); console.log(circle.getDiameter()); // 10 자바..

자바스크립트 객체의 분류 자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있습니다. 종류 설명 표준 빌트인 객체 - ESMAScript 사양에 정의된 객체 - 애플리케이션 전역의 공통 기능을 제공 - 자바스크립트 실행 환경과 관계없이 언제나 사용 가능 - 전역 객체의 프로퍼티로서 제공됨 - 별도의 선언 없이 전역 변수처럼 언제나 참조 가능 호스트 객체 - 자바스크립트 실행 환경에서 추가로 제공하는 객체 (ESMAScript 사양에 정의된 객체X) - 브라우저 환경 : *클라이언트 사이드 Web API를 호스트 객체로 제공 - Node.js 환경 : 고유의 API를 호스트 객체로 제공 사용자 정의 객체 - 사용자가 직접 정의한 객체 (표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체X)..

strict mode란? ES5부터 추가된 strict mode(엄격 모드)는 자바스크립트 언어의 문법을 좀더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 기능입니다. 오류를 줄여 안정적인 코드를 생성하기 위한 해결책으로, 잠재적인 오류를 발생시키기 어려운 개발 환경인 strict mode를 만들고 그 환경에서 개발하는 것입니다. *ESLint : 정적 분석기능을 통해 소스코드를 실행하기 전에 소스코드를 스캔하여 문법적 오류뿐만 아니라 잠재적 오류까지 찾아내고 오류의 원인을 리포팅해주는 유용한 도구. 린트 도구를 활용하면 strict mode와 유사한 효과를 얻을 수 있어 실제 개발 환경에서는 ESLint..

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다. C++나 자바와 같은 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있습니다. 객체지향 프로그래밍 객체지향 프로그래밍은 프로그래밍을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다. // 이름과 주소 속성을 갖는 객체 const person = { name: 'Lee', address: 'Seoul' }; const circle = { radius: 5, getDiameter() { return 2 * radi..

일급 객체 일급 객체란, 다음과 조건을 만족하는 객체입니다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 보두 만족하므로 일급 객체입니다. // 1. 함수는 무명 리터럴로 생성 가능 // 2. 함수는 변수에 저장할 수 있음 // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당됨 const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체..