FE/JavaScript(23)
-
[Javascript] 생성자 함수에 의한 객체 생성
Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); console.log(person); // {} person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); person.sayHello(); Object 생성자 함수 이외 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 빌트인 생성자 함수가 있다. 생성자 함수 생성자 함수는 new 연산자와 함께 호출하여 객체를 생성하는..
2022.10.23 -
[Javascript] 프로퍼티 어트리뷰트
내부 슬롯과 내부 메서드 자바스크립트 엔진 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호 [ [ ... ] ] 로 감싼 이름들이 내부 슬롯과 내부 메서드다. 개발자는 직접 접근할 수 없는 자바스크립트 엔진 내부 로직이다. 하지만 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공한다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖는다. 내부 슬롯은 JS 엔진의 내부 로직이라 직접 접근할 수 없지만 __proto__ 를 통해 간접적으로 접근할 수 있다. const o = {}; o.[[Prototype]] // JS엔진 내부 로직으로 직접 접근 불가 o.__prot..
2022.10.11 -
[Javascript] let, const 키워드와 블록 레벨 스코프
var 키워드로 선언한 변수 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복으로 선언이 가능하다. 중복 선언된 경우 중복 선언할 때 초기화문이 있는 경우는 재할당하고 초기화문이 없는 경우 변수 선언을 무시한다. var x = 1; var x = 100; // 재할당 var y = 1; var y; // 무시한다. console.log(x); // 100 console.log(y); // 1 함수 레벨 스코프 var 키워드로 선언한 변수는 함수 코드 블록만을 지역 스코프로 인정한다. 함수 외부에 var 키워드로 선언한 변수는 모두 전역 변수가 된다. var x = 1; if (true){ var x = 10; } console.log(x); // 10 변수 호이스팅 var 키워드로 변수를 ..
2022.10.09 -
[Javascript] 전역 변수 문제점
변수 생명 주기 지역 변수 생명 주기 함수 내부에 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. function foo(){ var x = 'local'; console.log(x); return x; } foo(); console.log(x); // error 변수 선언은 런타임 이전 단계에서 JS엔진에 의해 먼저 실행되지만 전역 변수에 한정된 것이다. 함수 내부에 선언된 변수는 함수가 호출된 직후 함수 내부 코드 실행 전 JS엔진에 의해 먼저 실행된다. 일반적으로 지역변수와 함수의 생명주기는 일치하지만 함수보다 오래 생존하는 경우가 있다. 함수 내부에 선언된 지역 변수는 함수가 생성한 스코프인 렉시컬 환경에 등록된다. 변수에 할당된 메모리 공간은 아무도 참조하지 않을 때 가비..
2022.10.07 -
[Javascript] 스코프
스코프 스코프는 식별자가 유효한 범위를 말한다. 모든 식별자는 자신이 선언된 위치에 의해 달느 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. let x = 'global'; function foo(){ let x = 'local'; console.log(x); } foo(); console.log(x); JS 엔진은 스코프를 통해 어떤 변수를 참조할지 결정한다. ※ 렉시컬 환경 코드가 어디서 실행되고 주변에 어떤 코드가 있는지 알 수 있다. 코드 문맥은 렉시컬 환경으로 이루어지고 이를 구현한 것이 실행 컨텍스트다. 모든 코드는 실행 컨텐스트에서 평가되고 실행된다. 식별자는 어떤 값을 구별할 수 있어야하므로 유일해 식별자는 중복되어서는 안된다. 하지만 스코프를 통해 유효 범위를 지정하여 스코..
2022.10.07 -
[Javascript] 함수
함수 함수는 입력과 출력이 있고 코드 블록으로 일련의 과정을 감싸 하나의 실행 단위로 정의한 것이다. function add(x, y){ return x + y; } console.log(add(2, 5)); // 7 함수 사용하는 이유 동일한 작업을 반복적으로 수행해야 할 때 재사용이 가능하고 코드 중복을 피할 수 있기 때문이다. 코드를 수정할 때도 비교적 쉽기 때문에 유지 보수성을 높이고 실수를 줄일 수 있어 코드의 신뢰성 또한 높일 수 있다. 함수 리터럴 자바스크립트에서 함수는 객체 타입의 값이다. 일반 객체와는 다른 호출할 수 있는 일급 객체이다. 숫자 값을 숫자 리터럴로 생성하듯이 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 다음과 같다. 함수 리터럴과 함수 선언문은 형태가 동일하다. ..
2022.10.07