꾸준한 개발자

계속적인 성장을 추구하는 개발자입니다. 꾸준함을 추구합니다.

계속 쓰는 개발 노트

자바스크립트 35

클로저란

MDN에서는 클로저를 다음과 같이 정의합니다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). (번역) 클로저는 주변 상태 (렉시컬 환경)에 대한 참조와 함께 번들로 묶인 (포함된) 함수의 조합입니다. 위 정의만으로는 이해가 쉽게 되지 않습니다. 다음 예제를 보겠습니다. const a = 1; function outerFunc() { const a = 2; function innerFunc() { console.log(a); // 2 } innerFunc(); } outerFunc(); outerFunc 함..

실행 컨텍스트란

ECMAScript 사양은 소스코드를 4가지 타입으로 구분합니다. 전역 코드 : 전역에 존재하는 소스코드 함수 코드 : 함수 내부에 존재하는 소스코드 eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 : 모듈 내부에 존재하는 소스코드 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문입니다. 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역입니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스..

자바스크립트에서 this는 어떻게 바인딩될까

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. const person = { name: 'geumyong', sayHi() { console.log(`Hi! ${this.name}`); } }; person.sayHi(); 위 예제에서 this는 person을 가리킵니다. function Person(name) { this.name = name; } person.prototype.sayHi = function () { console.log(`Hi! ${this.name}`); }; const p..

프로토타입이란

객체지향 프로그래밍 객체지향 프로그래밍이란 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다. 철학적 사고를 프로그래밍에 접목하려는 시도들이 있었고, 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있습니다. 예를 들어서 사람은 이름, 성별, 나이, 주소 등 다양한 속성을 갖습니다. "이름이 석금용이고 성별은 남자이며 나이는 29살인 사람"으로 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구별하여 인식할 수 있습니다. 프로그램에 대입해보면, "이름"과 "성별"에만 관심있다고 할 때, 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 표현하는 것을 추상화라 합니다. 아래 예시는"이름"과 "성별"이라는 속성을 갖..

var 키워드와 let, const 키워드의 차이점

var 키워드 var 키워드는 ES6 이전에 변수를 선언하기 위한 유일한 방법이었습니다. var 키워드의 특징 중 하나는 변수 중복 선언이 가능하다는 것입니다. 아래 예시와 같이 중복해서 선언을 해도 에러가 발생하지 않습니다. var x = 1; var x = 'geumyong'; console.log(x); // geumyong 이렇게 중복선언이 가능하다는 것은 개발자가 실수로 이미 선언해놓은 변수에 다른 값을 재할당할 수도 있다는 위험이 있습니다. 두 번째 특징으로, 스코프 범위입니다. var 키워드는 함수 레벨 스코프를 갖습니다. 함수가 아닌 다른 블록 내에서(for문과 같은) var 키워드로 선언을 할 경우 전역 변수가 됩니다. 전역 변수의 경우 생명주기가 길고 어디서든 참조가 가능하기 때문에 피..

스코프란

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 이를 스코프라 합니다. 전역 스코프, 지역 스코프 코드는 전역과 지역으로 구분됩니다. 이때 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정됩니다. 전역에 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수입니다. 전역 스코프에 있는 전역 변수 같은 경우 어디서든 참조할 수 있습니다. 그리고 지역 스코프에 있는 지역 변수는 자신의 지역 스코프는 자신의 지역 스코프와 하위 지역 스코프에서 참조할 수 있습니다. 스코프 체인 함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서 정의할 수도 있습니다. 함수 몸체 내부에서 정의한 함수..

변수란

변수란 1+2 위의 식이 있습니다. 사람의 경우 1과 2라는 숫자를 기억하고 +가 더하다는 의미인 것을 파악하고 더할 것입니다. 그리고 나온 결과 3을 뇌에서 기억합니다. 컴퓨터(자바스크립트 엔진)는 사람이 아닙니다. 컴퓨터가 위의 식을 만난다면 어떤 과정을 거치게 될까요? 자바스크립트 엔진은 1과 2, 즉 피연산자를 기억하기 위해 메모리 공간을 사용합니다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체로서, 메모리 셀 하나의 크기는 1바이트입니다. 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어 들입니다. 만약 메모리 셀 하나에 데이터가 저장되었다고 합시다. 다시 그 데이터를 참조하기 위해서는 어떻게 해야될까요? 우리가 친구의 집에 찾아갈 때 주소를 알아야 찾아가듯이 자바스크립트 엔진도 마찬가..