- JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어
- 자바스크립트는 느슨한 타입의 동적언어이다.
- JS의 변수는 어떤 특정한 타입과 연결되지 않으며, 모든 타입으로 할당 및 재할당이 가능하다
let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언
이런 느낌쓰~
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
- 문제점은?
JavaScript는 느슨한 타입의 동적 언어이기 때문에 (변수 생성 시)원시 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있다.
하지만 많은 기능 명세서와 API가 오고 가는 대형프로젝트(혹은 협업 시)에서 타입이 올바른지 체크하는 것이 굉장히 까다롭기 때문에 배포 시 예상치 못한 문제와 직면할 수 있다. - 보완할 방법?
JavaScript의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한 TypeScript, Flow를 사용하여 보완 가능
- undefined와 null의 미세한 차이들을 비교해보세요.
- undefined는 예를 들면 "박스만 만들어 놓은 상태"
- null은 예를 들면 "박스만들고 아무것도 안넣고 포장함"
- JavaScript 객체와 불변성이란?
- Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.
Immutability은 함수형 프로그래밍의 핵심 원리이다.
불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화 할 수 있고 성능 개선에도 도움이 된다.
하지만 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절한 경우가 있다.
- 기본형 데이터와 참조형 데이터
-
기본형 데이터(Primitive Type)
기본형 데이터는 값을 그대로 할당하는 것.
메모리 내에 고정된 크기로 저장되면서, 원시 데이터 값 자체를 보관, 불변적
기본적으로 데이터는 하나의 메모리를 사용한다.(재사용 한다)
기본형 타입의 종류에는 숫자, 문자열, 불리언, null, undefined, symbol이 있습니다. -
참조형 데이터(Reference Type)
참조형은 기본형 데이터의 집합이고, 참조형 데이터는 값이 지정된 주소의 값을 할당한다.
참조형 타입의 종류는 객체, 배열, 함수, 날짜, 정규표현식, Map, WeakMap, Set, WeakSet이 있다.
- JavaScript 형변환
- 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다.
이런 과정을 "형 변환(type conversion)"이라고 합니다.
- 불변 객체를 만드는 방법
-
불변(immutability)
-
불변 객체란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
즉, 객체를 처음 생성(초기화) 후에는 객체가 가지는 상태를 변경할 수 없는 것을 의미합니다. -
불변 객체 만드는 방법은? 코드를 통해 살펴보자!
var o1 = {name:'kim', score:[1, 2]}
Object.freeze(01);
o1.name = 'lee';
console.log(o1);
> {name:'kim' score:[1, 2]} 나온다정답은 Object.freeze()라는 함수를 호출하는 것이다.
Immutability의 상태가 되었다.
객체를 얼려버렸다.
- 얕은 복사와 깊은 복사
-
얕은 복사 : 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.
-
깊은 복사 : 깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.
- 호이스팅과 TDZ는 무엇일까 ?
- 호이스팅 : 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다.
더 쉽게 말하자면 스코푸 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
var랑 let은 비슷한데 호이스팅이 안된다
그럼 왜 var처럼 행동하지 않고 let은 에러를 낼까? 바로 TDZ때문에 그렇다
- TDZ(Temporal Dead Zone) 해석하면 일시적 사각지대 : 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있겠습니다.
- 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
-
함수 선언문과 함수 표현식의 차이는 호이스팅 방식의 차이다
-
함수 선언문 : 함수 선언식은 일반적인 함수 표현식으로, 함수를 선언과 동시에 내용을 함께 정의한다.
-
함수 표현식 : 함수 표현식은 변수로 저장할 수 있다.
변수를 먼저 할당하고, 할당 된 변수에 함수를 선언한다.
즉 함수 선언식은 코드가 실행되기 전에 로드 되지만, 함수 표현식은
해당 코드 줄에 도달 할 때만 로드된다.(그전에는 선언한 변수 명만 로드된다)
- 실행 컨텍스트와 콜 스택
- 실행 컨텍스트(Execution context) : 자바스크립트 코드가 실행되는 환경을 의미한다.
자바스크립트에서 대표적으로 두 가지 타입의 Execution context가 있다.
실행할 코드에 제공할 환경 정보들을 모아놓은 객체들로
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.
-
Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object (Node는 Global) 를 생성하고 this가 Window 객체를 가리키도록 한다. -
Function Execution context
자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성한다.
모든 함수는 호출되는 시점에 자신만의 Execution Context를 가진다.
- 콜 스텍 : 코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조
- 스코프 체인, 변수 은닉화
-
스코프 체인 : 스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.
-
변수 은닉화 : 외부 객체로부터 '속성 값(데이터, 멤버 변수값)'을 감추는 특성
