JavaScript/Modern JS Deep Dive 5

[JS Deep Dive]let,const

let 키워드 15.2.3 변수 호이스팅 var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 다음 예제를 보자. 이처럼 let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생한다. var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화단계"가 한번에 진행된다. 즉, 선언단계에서 스코프(실행 컨텍스트의 렉시컬환경(Lexical Environment))에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 따라서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하..

[JS Deep Dive]함수 레벨 스코프

지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다고 했다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미이다. C나 Java 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드블록(if, for, while, try/catch 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프(block level scope)라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프(function level scope)라 한다. 다음 예제를 보자. 전역 변수 x가 선언되었고 if 문의 코드 블록 내에도 x변수가 선언되었다. 이때 if문의 코드 블록내에서 선언된 x 변수는..

[JS Deep Dive]원시 값과 객체의 비교

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, boolean, null, undefined, symbol, 객체 타입)은 크게 원시타입(primitive type)과 객체타입(object/reference type)으로 구분할 수 있다. 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는 무엇일까? 원시 타입과 객체 타입은 근본적으로 다르다는 의미일 것이다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 개체는 변경 가능한 값(mutable value)이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를..

[JS Deep Dive]프로퍼티(property)

10.5 프로퍼티 접근 프로퍼티에 접근하는 방법은 다음과 같이 두 가지다. 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation) 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation) 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 JS에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다. 마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다. 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근 연산자의 내부에는 프로퍼티 키를 지정한다. 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반..

[JS Deep Dive]단축 평가

p.121 함수 매개변수에 기본값을 설정할 때 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다. //단축평가를 사용한 매개변수의 기본값 설정 const getStringLength = (str)=>{ str = str || ''; return str.length; } getStringLength(); //->0 getStringLength('hi')//->2 //ES6의 매개변수의 기본값 설정 const getStringLength = (str = '') => { return str.length; } getStringLength(); //->0 getS..