자바스크립트의 변수와 배열에 대하여 알아보자
변수 ( Variable )
변수는 데이터를 저장하는 공간이다.
변수를 생성하는 것을 변수를 '선언'한다고 한다.
const data1; // 변수 선언
const data2 = 10; // data2 라는 변수에 10이라는 데이터를 할당그런데 변수 앞에 'const' 라는 것은 뭐죠?
변수를 선언할 때 필요한 키워드이다.
var, let, const 세 종류가 있으며 선언시 사용된 것에 따라 변수의 특징이 달라진다.
var
var는 const, let이 나온 ES6전부터 사용된 키워드이다.
현재는 불편한 특징을 가지고 cosnt와 let으로 대체 할 수 있어서 잘 사용하지 않는다고 한다.
(프로젝트마다 다르고 사람마다 다르다고 함)
var의 특징
1. hoisting
hoisting 은 '들어올리다'라는 뜻을 가진 단어이며, 변수 및 함수 선언을 스코프 상단으로 들어올리는 것을 의미한다.
다음 코드는 어떻게 출력 될까 생각해보자
hoiFunc();
function hoiFunc() {
console.log(text);
var text = "영차영차";
};위 코드는 undefined 가 출력된다. 왜일까? 🤔
'이게 다 hoisting 때문이다'
자바스크립트는 위에서 아래로 코드를 읽는다.
따라서 hoiFunc(); 이 실행되지 않을 것 같지만 hoisting을 통해서 hoiFunc()의 선언이 스코프에 맞춰 맨 위로 올려지게 되므로 실행되는 것이다.
그런데, 위 설명대로면 console.log(text)의 값이 "영차영차"로 출력되어야 하는거 아닌가요? 🤕
'hoisting' 의 대상은 '선언' 이다.
따라서 선언var text;가 위로 올라갈 뿐이지 할당text = "영차영차"은 올라가지 않으며, 변수를 인식하되 할당이 안됐다며undefined를 출력하는 것이다!hositing의 대상 🚀
var, let, const, function, class 등등의 선언 키워드
hoisting시 var와 let, const의 차이점
hoisting 시 초기 값이 없을 경우 var는 undefined를 초기 값으로 메모리를 할당하고 let, const는 그렇지 않다.
때문에 hoisting 되는 건 같지만 결과는 다르다.
console.log(v); // undefined
var v;
console.log(l); // 오류
let l;2. 중복 선언 가능
var name = "정찬영";
console.log(name); // 정찬영
var name = "개나리";
console.log(name); // 개나리3. 함수 스코프
스코프는 생존 반경이라고 생각하면 되는데 var는 함수 스코프를 가진다.
if(true) {
var name = "딸기";
}
console.log(name); // 딸기
function getName() {
var innerName = "딸기";
}
console.log(innerName); // 오류let & const
let과 const는 ES6에서 추가된 키워드로 var와 같이 변수 선언시 사용하며,
let 변수는 변경이 가능하고 const는 변경이 불가능하다는 것이 중요한 차이점이다.
let & const 공통점
- 중복 선언 불가능
- 블럭 스코프
let l = 'let';
let l = 'let2'; // 오류
if(true) {
let l = 'let'
const c = 'const';
}
console.log(l); // 오류
console.log(c); // 오류let & const 차이점
- 재할당
var와 let은 재할당이 가능하지만 const는 안된다.
var v = "가";
let l = "나";
const c = "다";
v = "라";
l = "마";
c = "사"; // 오류- 선언시 초기값
const는 변경 불가능한 값이다. 따라서 선언과 동시에 값을 할당 하는 것이 원칙이다. ( 데이터를 담지도 않을 변수를 만들 이유는 없으니까! )
var v;
let l;
const c; // 오류끝! 🔸
