Unit 9. [JS]스코프

📣 스코프

✔️ 변수의 유효범위

범위는 중괄호 또는 함수에 의해 나누어지고 그 범위를 스코프 라고 부른다.
바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다.
안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능하다.
중첩이 가능하다.
가장 바깥쪽 스코프는 전역 스코프(Global Scope) -> 전역 변수
전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope) -> 지역 변수
지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

let name = '김코딩';

function showName() {
  let name = '박해커'; // 지역 변수
  console.log(name); // 두 번째 출력
}

console.log(name); // 김코딩
showName();	// 박해커
console.log(name); // 김코딩

🚨 함수 안에서 다시 let으로 선언해줬기 때문에 함수 안에 선언된 name은 함수 안에서만 유효하다.

➰ 첫번째는 전역 변수로 선언된 name을 출력한다.

➰ 함수를 호출했기 때문에 함수 안에 지역 변수로 선언 된 name을 출력한다.

➰ 전역 변수를 출력한다. 지역 변수에 선언된 name은 안쪽 스코프 이므로 접근이 불가능하다.

 

let name = '김코딩';

function showName() {
  name = '박해커';
  console.log(name); // 김코딩
}

console.log(name); // 박해커
showName();
console.log(name); // 박해커

🚨 전역 변수로 선언한 name을 함수 안에서도 사용하고 있으므로 마지막에 name을 출력하면 함수 안에서 바뀐 name이 출력된다.

 

📣 스코프의 종류

✔️ 블록 스코프 : 중괄호를 기준으로 범위가 구분된다.

✔️ 함수 스코프 

  🚨 화살표 함수는 블록 스코프로 취급된다.

 

✔️ var 키워드는 let과 다르게 for문이 만들어낸 블록 스코프를 무시한다. (for문 밖에서도 사용가능)

  🚨 var 키워드는 화살표 함수를 제외한 블록 스코프를 무시한다.

 

✔️ var 키워드보다는 let 키워드를 사용하자

  ➰ let 키워드는 블록 스코프를 무시하지 않는다.

  ➰ let 키워드는 재선언을 방지한다.

 

✔️ const : 변하지 않는 값(상수)

  ➰ 재할당이 불가능하다. (재할당 할 경우 TypeError 발생)

 

📣 변수 선언에서 주의할 점

1️⃣ var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.

✔️ window 객체 : 브라우저의 창을 의미하는 객체

 

2️⃣ 전역 변수에 너무 많은 변수를 선언하지 않는다.

✔️ side effect : 너도나도 같은 이름으로 전역 변수를 선언하면 충돌이 발생할 수 있다.

 

3️⃣ 선언 키워드(var, let, const) 없이 변수를 할당하지 않는다.

✔️ 선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수로 취급된다.

 

4️⃣ 실수를 방지하기 위해 Strict Mode를 사용할 수 있다.

✔️ js 파일 상단에 'use strict' 라고 입력하면 엄격하게 판단한다.

✔️ 선언 없는 변수의 할당도 에러로 판단한다.