자바스크립트 75

javaScript-데이터 프로퍼티와 접근자 프로퍼티

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 데이터 프로퍼티(data property) 키와 값으로 구성된 일반적인 프로퍼티다. 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다. 접근자 프로퍼티(accessor property) 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다. 데이터 프로퍼티 데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다. 프로퍼티 어트리뷰트 프로퍼티 디스크립터 객체의 프로퍼티 설명 [[Value]] value 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. 프로퍼티 키를 통해 프로..

JavaScript 2023.03.06

javaScript-프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 여기서 프로퍼티의 상태란 1. 프로퍼티의 값 (value) 2. 값의 갱신 가능 여부 (writable) 3. 열거 가능 여부 (enumerable) 4. 재정의 가능 여부를 말한다. (configurable) 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부슬롯 [[Value]] , [[Writable]], [[Enumerable]], [[Configurable]]이다. 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 는 있다. const person = { nam: ..

JavaScript 2023.03.06

javaScript-프로퍼티 어트리뷰트(내부 슬롯과 내부 메서드)

프로퍼티 어트리 뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념을 알아야한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAscript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호 ([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는..

JavaScript 2023.03.04

javaScript-const 키워드

const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지 않는다. 이는 나중에 설명하고. const 키워드의 특징은 let 키워드와 대부분 동일하기 때문에 let 키워드와 다른 점을 살펴보자. 선언과 초기화 const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. const foo = 1; 그렇지 않으면 다음과 같이 문법 에러가 발생한다. const foo; // SyntaxError: Missing initializer in const declaration const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다. { // 변수 호이스팅이 발생하지 않는 것처럼 동..

JavaScript 2023.03.03

javaScript-let 키워드

전 글에서 알아본 var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다. var 키워드와의 차이점을 중심으로 let 키워드를 정리해보자. 변수 중복 선언 금지 var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다. 이때 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저선언된 변수 값이 재할당되어 변경되는 부작용이 발생한다. 하지만 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. var foo = 123; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var foo = 4..

JavaScript 2023.03.03

javaScript-var 키워드로 선언한 변수의 문제점

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었지만 var 키워드로 선언된 변수에는 다음과 같은 특징이 있다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시된다. console.log(x); // 100 console.log(y); // 1 이처럼 var 키워드로 선언한 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동..

JavaScript 2023.03.03

javaScript-전역 변수의 문제점3(전역 변수의 사용을 억제하는 방법)

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사요해야한다. 변수의 스코프는 좁을수록 좋다. 즉시 실행 함수 함수의 정의와 동시에 호출되는 즉시 실행 함수는 단 한 번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다. 이러한 특성을 이용해 전역 변수의 사용을 제한하는 방법이다. (function (){ var foo = 10; // 즉시 실행 함수의 지역 변수 // ... }()); console.log(foo); // ReferenceError: foo is not defined 이 방법을 사용하면 전역 변수를 생성하지 않으므로 라이브러리 등에 자주 사용된다. 네임스페이스 객체 전역에 네임스페이..

JavaScript 2023.03.02

javaScript-전역 변수의 문제점2(전역 변수의 문제점)

암묵적 결합 전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 인느 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다. 긴 생명 주기 전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경 할 수 있는 시간도 길고 기회도 많다. 더욱이 var 키워드는 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다. 변수 이름이 중복되면 의도치 않은 재할당이 이뤄진다. var x = 1; // ... // 변수의 중복 선언, 기존..

JavaScript 2023.03.02

javaScript-전역 변수의 문제점(변수의 생명 주기)

지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기가 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. function foo(){ var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not define..

JavaScript 2023.03.02

javaScript-스코프4 (함수 레벨 스코프)

지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다고 했는데, 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 뜻이다. c나 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드블록(if, for, while, try 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드블록만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라 한다. var x = 1; if (true){ // var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다. //..

JavaScript 2023.03.02