1. JavaScript의 자료형과 JavaScript만의 특성
1) 느슨한 타입(loosely typed)의 동적(dynamic) 언어
JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당 가능하다.
2) JavaScript 형 변환
함수와 연산자에 전달되는 값은 대부분 적절한 자료형(타입)으로 자동 변환된다. 이런 과정을 '형 변환(type conversion)'이라고 한다.
3) ==, ===
자바스크립트에는 두 가지의 일치 연산자가 있다.
==는 비교하는 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터 타입을 자동으로 변환해 주는 자바스크립트만의 특성이 있다. 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있다.
===는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴한다.
console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력
4) 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법
실행 도중에 예상치 못한 타입이 변수에 들어와 에러가 발생할 수 있다. 동적 타입 언어는 런타임 시 확인할 수밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워진다. 이러한 불편함을 해소하기 위해 TypeScipt나 Flow 등을 사용할 수 있다.
5) undefined와 null의 미세한 차이들을 비교
null은 텅텅 비어 있는 값을 의미한다.
undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것이다.
let name1 = null
console.log(name) // null을 출력
let name2
console.log(name2) // undefined를 출력
2. JavaScript 객체와 불변성
1) 기본형 데이터와 참조형 데이터
기본데이터는 값을 그대로 할당한다.
number, string, boolean, null, undefined이 기본형데이터에 해당된다.
참조형은 값이 지정된 주소의 값을 할당한다.
Array,function,Object,Date이 참조형데이터에 해당된다.
2) JavaScript 형변환
문자형 환은 무언가를 출력할 때 주로 일어납니다. String(value)을 사용하면 문자형으로 명시적 변환이 가능합니다.
숫자형 환은 수학 련 연산시 주로 일어나고, Number(value)로도 형변환을 할 수 있다.
불린 형 변환은 논리연산 시 발생하고, Boolean(value)으로도 변환할 수 있다.
3) 불변 객체를 만드는 방법
불변 객체란 변하지 않는 객체 즉, 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
const와 Object.freeze()를 조합하여 만들 수 있다. (const의 재할당 불가 + Object.freeze()의 객체 속성 변경 불가)
const test = {
'name' : 'jung'
};
Object.freeze(test);
먼저 const 키워드로 바인딩 된 변수를 상수화 시킨 뒤, Object.freeze()로 해당 변수를 동결 객체를 만들면 객체의 재할당과 객체의 속성 둘 다 변경 불가능한 불변 객체가 된다.
4) 얕은 복사와 깊은 복사
얕은 복사(Shallow Copy)는 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성한다. 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조한다.따라서, 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.
깊은 복사(Deep Copy)객체를 복사 할 때, 해당 객체와 인스턴스 변수까지 복사하는 방식이다.
3. 호이스팅과 TDZ
1) 스코프, 호이스팅, TDZ
스코프는 변수, 함수, 클래스가 접근할 수 있는 유효 범위이다.
호이스팅은 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
TDZ는 const, let, class는 TDZ에 영향을 받는다. 즉 const, let, class는 선언 전에 변수를 사용하는 것을 허용하지 않는다.
2) 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
함수 선언문은 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것을 함수 전체를 호이스팅 한다.
function sum(a,b) {
return a + b;
}
함수 표현식은 한 function을 별도의 변수에 할당하는 것 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 한다.
const sum = function(a,b) {
return a + b;
}
함수 선언식으로 작성한 함수는 함수 전체가 호이스팅 된다. 그러나 전역적으로 선언하게 되면 중복적으로 동명의 함수를 쓰게 되는데 이때, 원치 않은 결과를 초래할 수 있다. 이를 방지하려면 함수 표현식으로 작성하면 된다.
3) let, const, function이 실행되는 원리
let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.
const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.
function은 이름(식별자) 가 있어야 스코프에서 값을 참조하여 함수를 실행할 수 있다.
4) 실행 컨텍스트와 콜 스택
실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
콜스텍은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이고, 항상 맨 위에 놓인 함수를 우선으로 실행된다.
5) 스코프 체인, 변수 은닉화
스코프 체인은 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이 현상을 스코프 체인이라고 하며 스코프가 중첩되어 있는 모든 상황에서 발생한다.
변수 은닉화는 외부 객체로부터 '속성 값(데이터, 멤버 변숫값)'을 감추는 특성을 가졌다.
4. 실습 과제
1. 문제
콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.(오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.)
let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}
//console.log(a);
console.log(b);
hi();
console.log(b);
답
//console.log(a) : a의 선언을 function hi() 내부에서 하여 값을 불러올 수 없고, 전역변수로 선언을 해주면 오류가 발생하지 않는다.
console.log(b); : 1 (let b = 1 이 선언된 출력값)
hi(); : 1, 101 (함수 내의 a와 b가 선언된 출력값)
console.log(b); : 1 (let b =1 로 선언되었던 출력값)
2. 문제
두 값이 다른 이유를 설명해보세요.
1 == "1"
1 === "1"
예상출력 값
console.log(1 == "1") // true를 출력
console.log(1 === "1") // false를 출력
답
Javascript에서는 1은 숫자로 인식하고, "1"은 문자로 인식한다.
1 == "1"; 경우는 숫자인 1과 문자인 "1"의 타입이 다르기 때문에 false을 출력되어야 하고,
1 === "1"; 경우는 숫자인 1과 문자인 "1"의 타입이 같지 않기 때문에 false을 출력되는 게 맞다.
Javascript에는 두 가지의 일치 연산자가 있다. ===는 엄밀한(strict) 일치 연산자여서 비교하는 두 값의 데이터 타입과 값 자체가 정확히 일치해야만 true를 리턴한다. 반면 ==는 비교하는 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해 주는 자바스크립트만의 특성이 있다. 즉, 이 특성이 버그를 유발해서 두 값이 다르게 출력되었다.
