느슨한 타입(loosely typed)의 동적(dynamic) 언어
Javascript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능합니다. 동적 언어는 런타임에 비로소 타입이 결정되는 언어입니다. 변수를 생성할 때 마다 매번 타입을 써 줄 필요가 없어서 편합니다.
Javascript 의 형변환
Javascript는 타입이 매우 유연한 언어입니다. 그렇기 때문에 자바스크립트 엔진이 필요에 따라 암시적 변환 혹은 개발자의 의도에 따라 명시적 변환을 실행합니다.
암시적 형 변환이란
JS 엔진이 필요에 따라 자동으로 데이터 타입을 변환하는 것입니다.
명시적 변환이란
개발자가 의도를 가지고 데이터 타입을 변환시키는 것 입니다. 타입을 변경하는 기본적인 방법은 Object, Number, toString, Boolean 과 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용이 됩니다.
느슨한 타입의 동적 언어의 문제점
정적 언어와 달리 실행되는 시점에서 오류를 출력한다. 코드가 길어지고 복잡해지면 타입 에러를 찾기 어려워 지는 문제점이 있다.
보완할 수 있는 방법
그래서 이러한 단점을 보완하는 방법은 TypeScript 를 사용하는 방법이 있다.
객체의 불변성이란?
기본형 데이터와 참조형 데이터
기본형 데이터는 Number, String, Boolean, Null, undefined, symbol 이 있으며 참조형 데이터에는 Object와 그 하위에 Array, Function, RefExp, Map, Set, WeakMap, WeakSet 등이 있다. 두 타입에 대표적인 차이로는 기본형에는 바로 값을 그대로 할당한다는 점이고 참조형은 값이 저장된 주소값을 할당한다는 것이다.
불변 객체를 만드는 방법
Const와 Object.freeze() 조합을 통해 만들 수 있다. const는 재할당이 불가하며, Object.freeze()는 객체 속성 변경이 불가능하다.
const list = {
'name':'jung'
};
Object.freeze(list);위는 예시이다.
얕은 복사와 깊은 복사
얕은 복사란 객체를 복사 할 때 원래값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체 안에 객체가 있을 경우 한개의 객체라도 원복 객체를 참조하고 있다면 얕은 복사이다.
깊은 복사 된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.
호이스팅과 TDZ는 무엇일까...?
스코프, 호이스팅, TDZ
스코프는 참조 대상 식별자(identifer, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 이름)를 찾아내기 위한 규칙이다. 스코프는 2개로 나눌수 있는데 전역 스코프(코드 어디에서든지 참조할 수 있음)가 있다. 모든 변수는 스코프를 갖는다.
변수의 관점에서 스코프를 구분하면 다음과 같이 두가지로 나눈다.
전역변수(전역에서 선언된 변수이며 어디에든 참조 가능하다), 지역변수(지역 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조 할 수 있다.)
호이스팅은 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 스코프의 최상단에서 선언하는 것을 말한다. var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것 처럼 동작하는 것이다. let, const 를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간이다.
함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
함수 선언식은 함수 전체를 호이스팅한다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것. 함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅한다.
여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
var : 전역 변수로 사용되거나 함수, 지역변수로도 사용됩니다. var 변수가 함수 외부에 선언되면 스코프는 전역이 됩니다. 즉 함수 블록 외부에 var로 선언된 모든 변수를 전체 window에서 사용이 가능합니다. var이 함수 내에서 선언되면 함수스코프를 갖습니다. 즉 해당 함수에서만 사용가능합니다. var은 재선언 및 업데이트가 가능합니다. 동일한 스코프 내에서 변수 재선언을 할 수 있습니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 합니다. 반면 let 과 const 는 초기화 하지 않습니다.
let : 요즘 변수에는 var의 문제점들을 Let 이 해결해 주기 때문에 Let을 쓰는 것을 더 선호합니다. Let으로 선언된 변수는 해당 블록 내에서만 사용 할 수 있습니다. 블록 외부에서 hello를 사용하면 undefined 오류가 반환됩니다. Let 은 업데이트는 할 수 있지만 재선언은 할 수가 없습니다. Let의 호이스팅은 var처럼 Let도 선언을 최상단으로 끌어올립니다. 하지만 var과 달리 Let 의 변수는 초기화되지 않습니다.
Const : Const로 선언된 변수는 상수값을 유지합니다. let 선언과 마찬가지로 선언된 블록 내에서만 접근이 가능합니다.
const로 선언된 변수는 해당 스코프 내에서 동일하게 유지됩니다. 한 번 선언된 변수는 업데이트하거나 다시 선언 할 수 없습니다. 따라서 모든 const는 첫 선언에서 초기화가 되어야 합니다. 하지만 const로 선언된 객체에 대해서는 다르게 동작합니다. const 객체는 업데이트 할 수 없지만 객체의 속성은 업데이트 할 수가 있습니다. const의 호이스팅은 최상단으로 호이스팅 되지만, 초기화가 되지는 않습니다.
var 선언은 전역 혹은 함수 스코프지만, let 및 const는 블록 스코프입니다.
var 변수는 해당 스코프 내에서 업데이트 및 재선언 될 수 있습니다. let 변수는 업데이트 될 수 있지만 재선언할 수 없습니다. const 변수는 업데이트와 재선언 모두 불가합니다.
세가지 모두 최상단으로 호이스팅됩니다. 차이점 var은 undefinded 상태로 초기화되지만, let과 const 는 초기화되지 않습니다. var과 let 은 초기화하지 않고 선언할 수 있지만, const 는 선언과 동시에 초기화 해야합니다.
실행 컨텍스트와 콜 스택
실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미합니다. 대표적으로 두가지 타입의 Execution Context 가 있습니다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체들로 JavaScript 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다.
Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution context가 생성됩니다. 생성 과정에서 전역 객체인 Global을 생성하고 this가 Window 객체를 가리키도록 합니다.
Function Excution context
Javascript 엔진은 함수가 호출될 때마다 호출된 함수를 위한 Execution Context를 생성합니다. 모든 함수는 호출되는 시점에 자신만의 Execution Context를 가집니다.
자바스크립트는 실행 컨텍스트가 활성화 되는 시점에서 호이스팅(선언된 변수를 위로 끌어올림)이 발생, 외부 환경 정보를 구성, this 값을 설정하는 현상이 발생합니다.
콜 스택은 코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조를 말합니다.
엔진이 처음 script 를 실행할 때, Global Execution Context를 생성하고 이를 Call Stack에 Push합니다. 자바스크립트 엔진은 Call Stack의 Top에 위치한 함수를 실행하며, 함수가 종료되면 Stack에서 제거하고 제어를 다음 Top에 위치한 함수로 이동합니다. 즉 프로그램이 함수 호출을 추적할 때 사용합니다.
스코프 체인, 변수 은닉화
스코프는 함수의 중첩에 의해 계층적 구조를 가집니다.
변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프로 이동하면서 선언된 변수를 검색합니다. outerEnvironmentReference와 밀접한 관계를 가집니다.
변수 은닉화는 여러 스코프에서 동일한 식벽자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 검색된 식별자에서만 접근이 가능합니다. 즉, 직접적으로 변경되면 안되는 변수에 대한 접근을 막는 것입니다.
