자바스크립트(JavaScript) 중급

유튜버 코딩앙마의 자바스크립트 중급 강좌를 보고 정리하였다.

변수

• let
• const
• var

var는 한 번 선언된 변수를 다시 선언할 수 있다.

    var name = ‘Mike’;
    console.log(name);
    var name = ‘Jane’;
    console.log(name);

같은 상황에서 let은 에러 발생

var는 선언하기 전에 사용할 수 있다.

console.log(name); //undefined
var name = ‘Mike’;

이 코드에서 에러는 일어나지 않는다.
아래와 같이 동작하기 때문

var name;
console.log(name); //undefined
name = ‘Mike’;

var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌어올려진 것처럼 동작한다.
이를 호이스팅(hoisting)이라고 한다.

하지만 콘솔은 undefined를 찍는데 그 이유는 선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문

let과 const도 호이스팅 된다.

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동

Temporal Dead Zone

---

TDZ 영역에 있는 변수들은 사용할 수 없다.
let과 const는 TDZ의 영향을 받음, 할당을 하기 전에는 사용할 수 없다.
이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있다.

let age = 30;
functionshowAge(){
    console.log(age);
}
showAge();

이 코드는 문제가 없으나

let age = 30;
functionshowAge(){
    console.log(age);

    let age =20;
}
showAge();

이 코드는 문제가 발생한다.
호이스팅은 스코프 단위로 일어난다. 여기서 스코프는 함수 내부이다. let으로 선언된 두번째 변수가 호이스팅을 일으킨다. 만약 호이스팅이 되지 않았다면 함수 바깥에서 선언한 age 30이 정상적으로 찍혀야 한다.

변수의 생성과정

1. 선언 단계
2. 초기화 단계
3. 할당 단계

var

1. 선언 및 초기화 단계
2. 할당 단계

var는 선언과 초기화가 동시에 되기 때문에 할당 전에 호출하면 에러를 내지 않고 undefined가 나온다.

초기화 : undefined를 할당해주는 단계

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

let은 선언 단계와 초기화 단계가 분리돼서 진행된다.
호이스팅 되면서 선언단계가 이뤄지지만 초기화 단계는 실제 코드에 도달했을 때 되기 때문에 레퍼런스 에러가 발생하는 것이다.

const

1. 선언 + 초기화 + 할당

선언하면서 할당을 해줘야 함

const gender;
gender = male;

이런 식으로 하면 에러 발생

스코프

• var : 함수 스코프(function-scoped)

함수 내에서 선언한 변수만 그 지역변수가 됨

• let, const : 블록 스코프 (block-scoped)

블록 스코프는 모든 코드블럭 내에서 선언된 변수는 코드블럭 내에서만 유효하며 외부에서는 접근할 수 없음

코드블럭 : 함수, if문, for문, while문, try/catch문 등

const age = 30;
if(age>19){
    var txt = '성인';
}
console.log(txt);

예를 들어 if문 안에서 var로 선언한 변수는 if문 밖에서도 사용 가능, 하지만 let과 const는 이렇게 사용 불가능

function add(num1, num2){
    var result = num1+num2;
}
add(2,3);
console.log(result); var도 함수 내에서 선언되면 함수 바깥에서 사용할 수 없음    유일하게 벗어날 수 없는 스코프가 함수 스코프임