기본기 너무 부족해서 javascript공부해야지 했는데 고맙게도 스터디가 결성되어 시작하는 공부
(이 글의 내용은 유튜브 코딩앙마의 영상을 보고 정리한것입니다.)
변수
var let const
var는 한번 선언된 변수를 다시 선언할 수 있다. 또한 선언하기 전에 사용이 가능하다.
var, let은 비슷한데 다른것을 아래에서 알아보자.
var는 한번 선언된 변수를 다시 선언할 수 있다.
var name = 'Mike';
console.log(name); //Mike
var name = 'Jane';
console.log(name); //Jane참고) 같은 상황에서 let은 오류가 뜬다.
또한 var는 선언하기 전에 사용가능
var name;
console.log(name);
name = ‘Mike’;var로 선언한 모든 변수는 코드가 실제로 이동하진 않지만, 최상위로 끌어올려진거처럼 동작한다.
이를 호이스팅이라고한다.
호이스팅
var name;
console.log(name); //undefined
name = ‘Mike’;위의 코드 console은 undefined가 뜬다.
선언은 호이스팅 되지만 할당은 호이스팅되지 않기 때문이다. 할당은 세번째줄인 name = 'Mike';에서 처리된다.
즉, name이라는 변수만 올려지고, 'Mike'라는 값은 그자리에 있는것이다.
같은상황에서 let은 오류가 뜬다. 하지만 호이스팅때문은 아니다 let도 호이스팅이 된다.
호이스팅은 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다는 뜻이다. 하지만 let은 왜 오류가 날까?
→ Temporal Dead Zone (TDZ) 때문이다.
console.log(name); // Temporal Dead Zone
const name = ‘Mike’; // 함수 선언 및 할당
console.log(name); // 사용가능let 과 const는 TDZ의 영향을 받는다. 할당을 하기전에는 사용을 할 수 없다.
이는 코드를 예측가능하게 한다. 또한 버그를 줄일 수 있다.
변수의 생성과정
1. 선언 2. 초기화 3. 할당
var는 선언과 초기화가 동시에 된다. (초기화 undefined를 할당 해주는 단계)
let은 선언단계와 초기화단계가 분리되어 진행된다. 호이스팅 되면서 선언단계가 이루어지지만, 초기화 단계는 실제 코드에 도달했을때 된다. 따라서 referrence err가 발생하는 것이다.
const는 선언과 할당이 동시에 되어야한다.
let name;
name = 'Mike';
var age;
age = 30;
const gender;
gender = 'male';위의 코드에서 let 과 var로 선언해준 name 과 age는 괜찮지만 gender에서 에러가 발생하게 된다.(Uncaught SyntaxError)
선언하면서 할당을 해주지 않았기 때문이다.
스코프
var : 함수 스코프( function-scoped)
let, const : 블록 스코프 (block-scoped). 블록스코프는 선언한 블록내에서만 유효하며 외부에서는 접근할 수 없다.
(코드 블록의 예 : 함수, if문, for문, while문, try/catch문 등) 코드블록 내부에서 선언한 변수는 지역변수가 된다.
const age = 60;
if(age>19){
var txt = '성인';
}
console.log(txt); //'성인'예를들어 if문안에서 바로 선언한 변수는 if문 밖에서도 사용이 가능하다.
하지만 let과 const 는 위의 코드에서 {중괄호} 내부에서만 사용 가능하다. 이를 블록 스코프라고 하는것이다.
함수스코프
function add(num1, num2){
var result = num1 + num2;
}
add(2,3);
console.log(result);var도 위와같이 함수내에서 선언되면 오류뜬다. (Uncaught ReferenceError)
유일하게 벗어날 수 없는 스코프가 함수라고 생각하면 된다.