[JS] 범위 (Scope)

Scope?

변수의 유효범위

Scope 규칙

안쪽 스코프 에서는 바깥쪽 스코프 사용 가능
바깥쪽 스코프 에서는 안쪽 스코프 사용 불가능

scope는 중첩이 가능하다.

가장 바깥쪽 스코프를 Global scope(전역 스코프)라 한다.
다른 스코프들은 전부 Local scope(지역 스코프)라 한다.

local 변수는 global 변수보다 더 높은 우선순위를 가진다.

let name = '짱구'
function showName(){
  let name = '맹구'; // <---------name 변수가 새로 선언됬다.
  console.log(name);
}
console.log(name); //짱구
showName(); //맹구 // <-----------높은 우선순위를 가진 name변수가 출력
console.log(name); //짱구

let name = '짱구'
function showName(){
  name = '맹구'; //<---------상단의 name 변수와 같은 변수이다.
  console.log(name);
}
console.log(name); //짱구
showName(); //맹구
console.log(name); //맹구 <-----------함수실행으로 name에 맹구가 할당됬다.

Scope 종류

두가지 종류가 있다.

Block scope

중괄호로 둘러싼 범위

if (true){
  console.log('I am in the block')
}

for (let i = 0; i < 10; i++{
  console.log(i);
}

{
  console.log('it works');
}

화살표 함수로 둘러싼 범위

let getName = user => {
  return user.name;
}

Function scope

함수선언식과 함수표현식으로 둘러싼 범위

function getName(user){
  return user.name;
}

let getName = function(user){
  return user.name;
}

Scope 선언 키워드

var

	유효한가?
블록스코프 (화살표 함수 제외)	X
함수스코프 (화살표 함수 포함)	O
재선언	O
재할당	O

let

	유효한가?
블록스코프	O
함수스코프	O
재선언	X
재할당	O

const

	유효한가?
블록스코프	O
함수스코프	O
재선언	X
재할당	X

변수 선언 주의점

전역 변수는 어디서든 접근 가능한 변수이므로 편리하지만 다른 함수나 로직에 의해 의도되지 않은 변경(side effect)이 발생할 수 있다.

var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다. (브라우저에서만)

var name = '짱구';
console.log(window.name); // 짱구

function isWhat(name){
  console.log(name + '는 못말려')
}
console.log(isWhat === window.isWhat); // true

전역 변수를 var로 선언할 경우 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다.

console.log('hello') //hello
var console = 'console game'
console.log('hello') // 에러

선언 없는 변수 할당 금지

function showName(){
  name = '짱구';
  console.log(name)
}
showName(); //짱구
console.log(name === window.name); //true

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