1. INTRO
지난 포스팅에 이어서, LG CNS AM Inspire Camp 1기 4일차 오후 학습 내용을 정리하려고 합니다. 이번 글은 JavaScript의 기본 특징인 동적 타이핑과 호이스팅에 대해 정리하였습니다.
2. 동적 타이핑(dynamic typing)
자바스크립트는 변수에 데이터가 대입되는 시점에 변수의 자료형이 결정되는 특징이 있습니다.
자바에서는 int i = 10; 와 같이 변수를 선언할 때 변수가 가질 수 있는 데이터 타입을 지정하지만, 자바스크립트에서는 var i = 10; 와 같이 변수를 선언할 때 데이터 타입을 지정하지 않고,
변수에 값이 할당되는 시점에 할당되는 값에 따라 변수의 데이터 타입이 결정됩니다.
자바에서는 int i = "abc"; 를 실행했을 때 변수의 데이터 타입과 할당되는 값의 데이터 타입이 일치하지 않아서 오류가 발생하는 반면, 자바스크립트에서는 var i = "abc"; 변수가 할당되는 시점에 데이터 타입이 결정되므로 정상적으로 동작하게 됩니다.
아래는 실습 코드 내용이며, falsy value는 어떤게 있는지 알아두면 좋겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>자바 스크립트 자료형</h1>
<script>
// number type
let n1 = 1234;
let n2 = 56.78;
console.log(n1, typeof(n1)); // 1234 number
console.log(n2, typeof(n2)); // 56.78 number
// string type
let s1 = 'Hello';
let s2 = "World";
// 이스케이프 처리
let s3 = 'Hello, \'Inho\'';
let s4 = "Hello, \"Inho\"";
// 템플릿 문자열(template literal)
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
let name = 'Inho';
let age = 23;
let hello1 = '이름은 "' + name + '"이고, 나이는 ' + age + '세 입니다.';
console.log(hello1);
let hello2 = `이름은 "${name}"이고, 나이는 ${age}세 입니다. 내녕에서는 ${age + 1}세가 됩니다.`;
console.log(hello2);
// boolean type
let b1 = true;
let b2 = false;
console.log(b1, typeof(b1)); // true boolean
console.log(b2, typeof(b2)); // false boolean
// falsy value
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(false)); // false
if (undefined) {
console.log('undefined는 true');
} else {
console.log('undefined는 false'); // undefined는 false 출력
}
if (-1) {
console.log('-1은 true'); // -1은 true 출력
} else {
console.log('-1은 false');
}
// null type
let nullValue = null;
// undefined type
let u1;
let u2 = undefined;
// array type = 다양한 데이터 타입을 순서대로 모아놓은 것
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 2.3, 'hello', true, null, undefined, [1, 2, 3]];
console.log(arr1[3]); // 4
console.log(arr2[5]); // undefined
arr1[3] = 100;
console.log(arr1); // [1, 2, 3, 100, 5]
// object type = key와 value로 이루어진 데이터 타입
// key는 문자열 또는 심볼이어야 하고, 값은 모든 데이터 타입이 가능
let obj1 = { a: 'apple', b: 'banana', c: 'cherry' };
let obj2 = { name: 'Inho', age: 23, 'favorite colors': ['red', 'blue', 'green'] };
console.log(obj1['a']); // apple
console.log(obj1.a); // apple
console.log(obj2['favorite colors']); // ['red', 'blue', 'green']
</script>
</body>
</html>2. var, let, const의 호이스팅
개발자 면접의 단골 질문으로, var, let, const의 차이를 많이 물어보곤 합니다. 그 차이점 중 하나로 호이스팅의 개념을 설명할 수 있습니다.
호이스팅이란, 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.
var는 전역 변수라고 할 수 있습니다. 그래서 값이 재선언되거나 업데이트 될 수 있습니다. 그리고 아래의 예시 처럼 실행할 경우 호이스팅이 적용되어 선언된 것으로 처리되고, 값을 초기화하지않은 경우 undefined라고 표시됩니다. 전역 변수이기 때문에, 혹시 다른 코드에서 값이 초기화 된 경우, 의도치 않은 값이 출력될 수 있다는 단점이 있습니다.
let은 동일 범위({블록} 단위) 내에선 업데이트 될 수 있지만, 다시 선언할 수 없습니다. 이 경우엔 변수 선언은 호이스팅되지만, 값이 초기화될 수 없습니다. 자세히 말하면, 변수는 초기화 되기 전까지 TDZ에 보관되어 참조할 수 없습니다. 따라서 initialization 에러가 발생합니다.
const는 동일 범위({블록} 단위) 내에서만 접근 가능한 변경 불가한 상수 선언형입니다. const도 선언은 호이스팅되지만, 값을 초기화할 수 없습니다. 값 변경 시 typeError가 발생합니다.
위의 세가지 외에도, 아래 예시처럼 함수도 호이스팅 가능합니다.
하지만 아래의 경우엔 호이스팅 되지 않습니다. 호이스팅은 선언만 할 뿐, 초기화 기능을 하지 않기때문에 hello() 함수를 연결할 수 없고, var 선언까지만 인식되어 TypeError를 발생시키기 때문입니다.
3. OUTRO
javascript로 화면 단을 운영했지만, 호이스팅에 대해 잘 모르고 있었다고 생각됩니다. 이번 수업은 새로운 개념에 대해 깊이 생각해볼 수 있는 소중한 시간이었습니다. 구현 시 정확한 문법을 사용할 수 있도록 var, let, const의 개념에 대해 확실하게 알아 두어야겠습니다.
[참고 문헌]
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/
