[JS/Node] : Scope

💡Scope

📌예제로 알아보는 Scope

☑️예제 1

• 콘솔에 순서대로 출력되는 결과는?

let username = 'Kim Hosik';

if (username) {
   let message = `Hello, ${username}!`;
  console.log(message); // 1
}

console.log(message); // 2

• 1번 : Hello, Kim Hosik!
  : 5번 줄에서 message 를 출력할 때, 4번 줄의 username 을 중괄호(블럭) 바깥에서 가져왔으므로 정상적으로 출력된다.
• 2번 : Uncaught ReferenceError: message is not defined at <anonymous>:8:13
  : 8번 줄에서는 message 라는 변수 자체가 중괄호(블럭) 안쪽에서 선언되었으므로, 바깥쪽에서는 접근 불가하여 ReferenceError 가 된다.

  ☑️예제 2

• 콘솔에 순서대로 출력되는 결과는?

let greeting = 'Hello';
function greetSomeone () {
  let firstName = 'Hosik';
  return greeting + ' ' + firstName;
}

console.log(greetSomeone()); // 1
console.log(firstName); // 2

• 1번 : Hello Hoisk
  : greeting 변수는 바깥에 정의되어 있으므로, 함수 안쪽에서 사용할 수 있다.
  : greeting 변수와 firstName 변수의 조합에 의해 'Hello Hosik' 문자열을 반환한다.
• 2번 : Uncaught ReferenceError: firstName is not defined at <anonymous>:8:13
  : firstName 변수는 함수 안쪽에 정의되어 있으므로 함수 바깥쪽에서는 접근이 불가하여 ReferenceError 가 된다.

  ☑️예제 3

• 콘솔에 순서대로 출력되는 결과는?

let name = '김코딩'; // 전역 변수

function showName() {
  let name = '김호식'; // 지역 변수
  console.log(name); // 1
}

console.log(name); // 2
showName();
console.log(name); // 3

• 1번 : 김호식
  : 함수 안에서 선언한 name 이라는 지역 변수에 접근
  : 변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name 이 출력된다
  : 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 variable shadowing 이라고 한다.

• 2번 : 김코딩
  : 1번 줄에서 전역 변수로 선언된 name을 가져온다.
  : Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다.

• 3번 : 김코딩
  : 1번 줄에서 전역 변수로 선언된 name 을 가져온다.
  : Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다.

  ☑️예제 4

  • 콘솔에 순서대로 출력되는 결과는?

let name = '김코딩'; // 전역 변수

function showName() {
  name = '김호식'; // 지역 변수
  console.log(name); // 1
}

console.log(name); // 2
showName(); 
console.log(name); // 3

• 1번 : 김호식
  : 함수 안에서 선언한 name 이라는 지역 변수에 접근
  : 변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name 이 출력된다.
  : 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 variable shadowing 이라고 한다.

• 2번 : 김코딩
  : 1번 줄에서 전역 변수로 선언된 name 을 가져온다.
  : Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다.

• 3번 : 김호식
  : let 키워드를 사용한 선언이 존재하지 않으므로, '김호식'이라는 값으로 할당하고 있는 name 변수는 전역에 선언된 name 변수를 그대로 사용하겠다는 의미이다.
  : showName 함수가 실행되기 전에는 '김코딩'을 출력하고, 그 이후에는 전역 변수 name 으로 값이 바뀌기 때문에 3번은 '김호식'을 출력

📌Scope란?

• 변수에 접근할 수 있는 범위가 존재하며, 이 범위를 Scope라고 한다.
• 중괄호(블럭) 안쪽에 변수가 선언되었는지, 바깥쪽에 변수가 선언되었는지가 중요하다.
• 변수의 접근 범위는 함수에 의해 나뉘어지기도 한다.
• 바깥쪽 Scope 에서 선언한 변수는 안쪽 Scope 에서 사용 가능하다.
• 안쪽에서 선언한 변수는 바깥쪽 Scope 에서 사용 불가하다.

✔️Scope 유효 범위

• 가장 바깥쪽의 Scope는 Global Scope(전역 스코프)라고 부른다.

• 전역이 아닌 다른 Scope 는 Local Scope(지역 스코프)라고 부른다.

• Global Scope(전역 스코프)에서 선언한 변수는 전역 변수이다.

• Local Scope(지역 스코프)에서 선언한 변수는 지역 변수이다.

• 변수 접근 규칙에 다른 유효 범위

  • 규칙 1. 안쪽 Scope 에서 바깥쪽 Scope 로는 접근할 수 있지만 반대는 불가능하다.
  • 규칙 2. Scope 는 중첩이 가능하다.
  • 규칙 3. 지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다.

📌Scope의 종류

✔️Block Scope

: 중괄호를 기준으로 범위 구분

• function 키워드를 사용해도, 화살표 함수에 해당하면 Block Scope 로 취급한다.

☑️예제 1

• 콘솔에 출력되는 결과는?

for (let i = 0; i < 5; i++) {
  console.log(i) // 다섯 번 반복한다.
}

console.log('final i:', i); // 1

• 1번 : 5
  : var 키워드는 Block Scope 를 무시하고 Funtion Scope 만 따르므로, Block 범위를 벗어나도 사용 가능하다.

Function Scope

: 함수 선언식 및 함수 표현식으로 범위 구분

• function 키워드를 사용하면 Function Scope
• 함수의 실행부터 종료까지가 범위에 해당된다.
• 함수 내에 선언 키워드가 ㅅ없는 선언은, 함수의 실행 전까지 선언되지 않은 것으로 취급한다.

📌var, let, const

var 키워드

• Block Scope 를 무시하고 Function Scope 만 따른다.
• 화살표 함수의 Block Scope 는 무시하지 않는다.
• Block 단위로 Scope 를 구분했을 때 일반적으로 들여쓰기가 적용되어 시각적으로 분명하기 때문에 더 예측 가능한 코드 작성이
  가능하므로, let 키워드 사용을 권장한다.
• Function Scope 의 최상단에 선언되며, 선언 키워드 없는 선언은 최고 Scope 에 선언된다.
• 재선언을 해도 에러가 나지 않아 사람의 실수를 찾기 어렵다.

let 키워드

• Block Scope 를 따른다.
• 불필요한 재선언을 방지한다.

const 키워드

• 값이 변하지 않는 상수를 정의할 때 사용한다.
• Block Scope 를 따른다.
• 값의 변경을 최소화하여 의도하지 않는 값의 변경을 막을 수 있으므로, 값을 새롭게 할당할 일이 없다면 const 키워드의 사용을 권장한다.
• 값을 재할당하는 경우, TypeError 를 낸다.