[JS] scope

스코프

 

스코프란 자바스크립트의 코드 범위입니다. 스코프는 전역 스커프와 지역 스코프로 나눌 수 있습니다.

 

전역 스코프(Global Scope)

자바스크립트 프로그램을 시작 후, 어떤 함수도 호출하지 않았을때 , 실행 흐름은 전역 스코프에 있습니다.

중괄호{}의 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 것들을 전역 변수라고 한다. 전역 변수를 많이 이용한다면 부작용이 발생할 수 있습니다.

const name = "홍길동"
const age = 30;

function displayName() {
   console.log("My name is ${name}");
}

function displayAge() {
   console.log("I was born in ${new Date().getFullYear()- this.age}");
}

displayName(); //My name is 홍길동
displayAge(); //I was born in 1993

displayName와 displayAge는 전역 변수 name, age에 의존합니다. 이렇게 되면 어떤 문제가 발생할까?

수 많은 코드 줄이 있으면 부작용이 나타난다. name을 정의했던 것을 잊어버리고 name을 다른 이름으로 정의하려고 하자 에러가 발생한다.

const 대신 var를 사용했다면 에러가 발생하지않고 "홍길동"은 영원히 출력이 되지 않는다.

 

지역 스코프(Local Scope)

중괄호 {} 안을 지역 스코프라고 합니다. 전역 스코프에 선언된 변수가 전역 변수이므로, 지역 스코프에 선언된 변수는 지역 변수 일것이다. 지역 스코프에는 함수 스코프, 블록 스코프 두 가지가 있습니다.

 

함수 스코프(Function Scope)

함수 스코프는 ES6 이전 시적 까지 자바스크립트가 따르던 스코프입니다. 함수스코프는 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수로 취급합니다.

let name = "이름이 없습니다.";
function displayGildong() {
  let name = "홍길동"
  let age = "30"
  
  console.log("My name is ${name}");
  console.log("I was born in ${new Date().getFu;;Year() - age}");
}

{
  let name = "중괄호 내부에 있는 name입니다.";
}

//My name is 홍길동
//I was born in 1993
displayGildong();

console.log(name); // 중괄호 내부에 있는 name입니다.

위에 코드를 보시면 블록 스코프에 name을 정의했음에도 전역 변수로 취급되어서 console.log에 '"중괄호 내부에 있는 name입니다."가 출력된 것을 확인 할 수 있다.

 

ex)

function funcScope() {
//함수 스코프
  const students = ["홍길동"];
  return students;
}
console.log(funcScope);

//f funcScope() {
//함수 스코프
//const students = ["홍길동"];
//  return students;
//}