개발자 퉁이리

ES6에서는 함수를 사용 목적에 따라 일반 함수, 메서드, 화살표 함수 세 가지 종류로 구분했다. ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. const obj = { x: 1, // foo는 메서드다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다. bar: function() { return this.x;} }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 📢ES6 메서드는 생성자 함수로서 호..

클래스 자바스크립트에서 클래스를 한 문장으로 종결시키겠다. 클래스는 함수이다. 자바스크립트에서 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내의 모든 코드는 암묵적으로 strict mode가 실행된다. 클래스는 열거되지 않는다. 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다. 하지만 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다. 따라서 클래스를 새로운 객체 생성 메커니즘으로 보면 된다. 🎢 클래스는 함수로 평가되어 호이스팅이 발생한다. ..

클로저 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라 한다. 📌 const x = 1; // ① function outer() { const x = 10; const inner = function () { console.log(x); }; // ② return inner; } // outer 함수를 호출하면 중첩 함수 inner를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. const innerFunc = outer(); // ③ innerFunc(); // ④ 10 위 예시 코드를 보면 outer() 함수는 inner() 함수를 반환(retur..

실행 컨텍스트 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 전역 코드 함수 코드 eval 코드 모듈 코드 소스코드의 평가와 실행 모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 평가 과정 소스코드의 평가 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 소스코드의 실행 런타임이 시작되고 이때 소스코드 실행에 필요한 정보를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다...

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 🛑함수 호출 방식 일반 함수 호출 메서드 호출 생성자 함수 호출 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 1️⃣ 일반 함수 호출 기본적으로 this에는 전역 객체가 ..

표준 빌트인 객체 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 원시값과 래퍼 객체 원시값은 객체가 아니므로 프로퍼티나 메서드를 가질 수 없는데도 원시값인 문자열이 마치 객체처럼 동작한다. 이는 원시값인 문자열 숫자, 불리언 값의 경우 이들 원시값에 대해 마치 객체처럼 마침표 표기법으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해 주기 때문이다. const str = 'hello'; console.log(str.length); // 5 console.log(str.toUpperCase()); // HELLO cons..

strict mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여, 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode 적용 전역의 선두 또는 함수 몸체의 선두에 'use strict'; 를 추가한다. 1️⃣ 'use strict'; // 전역의 선두에 추가 function foo() { x = 10; // ReferenceError: x is not defined } foo(); 전역의 선두에 추가하면 스크립트 전체에 적용된다. 2️⃣ function foo() { x = 10; // 에러를 발생시키지 않는다. 'use strict'; } foo(); 코드의 선두에 위치시키지 않을 시 제대로 동작하..

프로토타입 프로토타입이란 간단히 말해 상속을 구현하는 방식이다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있다. 프로토타입에 대해 부가설명을 하자면 자바스크립트에서 프로토타입 개념은 프로토타입 객체와 프로토타입 링크를 통틀어 말하고 객체 간 상속을 구현하기 위해 사용된다. ❓ 상속이란 무엇일까? 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 💨 상속을 사용하는 이유 - 상속을 사용하면 기존에 있던 코드를 그대로 사용할 수 있기에 코드의 중복을 피할 수 있다. - 그렇다는 뜻은 상속을 사용하면 코드의 양이 현저히 줄어든다. 자바스크립트는 프로토타입을 기반으로 상속을 구현한다 프..

일급 객체 무명의 리터럴로 생성할 수 있다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. 위 4개의 조건을 모두 만족하면 일급 객체라 한다. // 함수는 무명의 리터럴로 생성할 수 있다. //변수에 저장 가능 const increase = function (num) { return ++num; } const decrease = function (num) { return --num; } // 함수는 객체에 저장 가능 const predicates = { increase, decrease }; // 함수의 매개변수로 전달 가능 // 함수의 반환값으로 사용 가능 function makeCounter(predicate) { let num = 0; ..

생성자 함수 객체 리터럴에 의한 생성 방식은 직관적이고 간편하다. 하지만 단 하나만의 객체만을 생성해 여러 개를 생성해야 할 경우에는 비효율적이다. 그렇지만 생성자 함수에 의한 객체 생성 방식은 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다. 🔍 객체 리터럴에 의한 객체 생성 const circle1 = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle1.getDiameter()); // 10 const circle2 = { radius: 10, getDiameter() { return 2 * this.radius; } }; console.log(circle2.getDiameter()); // 20 ..