[JS] 스코프

스코프

개념

let username = 'kimcoding';
let myname = 'heoboogie'
if (username) {
  let message = `Hello, ${username}!`; 
  console.log(message); // 'Hello, kimcoding!'
  console.log(myname); // 'heoboogie'
// *블록 밖에서 선언된 변수(바깥 스코프)는 안쪽에서 접근이 가능함
}
console.log(message); // referenceError; 
// *블록 안에서 선언된 변수(안쪽 스코프)는 바깥에서 접근이 불가능함

이처럼 변수에 접근할 수 있는 범위가 존재합니다. 중괄호 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요합니다. 이 범위를 우리는 스코프라고 부릅니다.

규칙

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.
2. 스코프는 중첩이 가능합니다. (스코프안에 스코프 안에 ... 스코프)
3. 가장 바깥 스코프는 전역 스코프, 이외의 모든 스코프는 지역 스코프라고 부릅니다.
4. 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수입니다.
5. 지역 변수는 전역 변수보다 더 높은 우선순위를 가집니다.

종류

스코프에는 두가지 종류가 있습니다.
먼저, 중괄호를 기준으로 범위를 구분하는 블록 스코프가 있습니다.
블록 스코프 내에서 선언된 변수는 블록 범위를 벗어나는 즉시 접근 할 수 없습니다.

그 다음으로 function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듭니다.
함수 스코프 내에서 선언된 변수는 함수의 실행부터 종료까지 접근 할 수 있습니다.

*주의할 점: 화살표 함수는 함수 스코프가 아닌 블록 스코프로 취급됩니다.

var, let, const

var 키워드로 선언된 변수는 화살표 함수를 제외한 모든 블록 스코프를 무시하며 함수 스코프만 따릅니다.
선언 키워드 없는 선언은 전역 변수로 취급됩니다.

var 키워드로 선언된 변수가 의도치않게 다른 곳에 접근하는 것을 막기 위해 let 키워드 사용을 권장합니다. 또한 let 키워드는 재선언하는 것을 막아주기도 합니다.

함수 스코프는 함수의 실행부터 종료까지이고, var 선언은 함수 스코프의 최상단에 선언됩니다. 선언 키워드 없는 선언은 최고 스코프에 선언됩니다.

let과 const의 차이는 설명해놓은 글을 참고하실 수 있습니다.
https://velog.io/@heojeong_/JS-let-const

변수 선언시 주의해야 할 점

• 전역 변수 및 전역 함수는 var로 선언하지 말아야합니다. (윈도우 객체에 속하게 됨)
• 전역 변수에 너무 많은 변수를 할당하지 말아야합니다. (프로그래밍은 혼자하는 것이 아니기 때문. 혼란을 초래함)
• 이 외에 var에 대한 자유로움이 각종 에러를 일으킵니다.

strict mode

여러 문제들을 사전에 방지하기 위한 엄격 모드입니다. JS 파일 첫번째 줄에 'use strict' 를 추가하면 됩니다.