스코프(scope)에 대해서 알아보자.

스코프란

스코프는 범위의 뜻을 가지고 있습니다.

자바스크립트에서 사용되는 스코프는 함수나 중괄호에 의해서 변수에 접근할 수 있는 범위를 뜻합니다.

---

스코프의 주요 규칙

1. 중첩 규칙 - 가장 바깥의 스코프는 전역스코프이며, 전역스코프의 반대는 지역스코프입니다. 이처럼 전역스코프 내의 지역스코프들이 중첩이 될 수 있습니다. 지역스코프 내에서도 지역스코프가 중첩될 수 있습니다.

 

※ 변수 접근 규칙에 따른 유효 범위 - 바깥 범위(전역스코프)에서 선언된 변수는 안의 범위(지역스코프)에서도 접근이 가능하지만, 반대로 안의 범위(지역스코프)에서 선언된 변수에는 바깥(전역스코프)에서 접근할 수 없습니다. 

 

2. block scope와 function scope

- block scope는 중괄호에 의해서 정해지는 범위입니다. if와 같이 중괄호를 사용하는 경우에 생기는 스코프가 block입니다.

  function scope는 함수에 의해서 정해지는 범위입니다. 

단, 화살표 함수 let getAge = user => { return user.age; } 의 경우에는 함수 스코프가 아닌 블록 스코프로 취급됩니다.

 

3.  전역 변수와 지역 변수간의 우선 순위

- 전역스코프에서 선언된 전역변수보다 지역스코프 내에서 선언된 지역변수가 더 높은 우선순위를 가지게 됩니다.

 

 

< 예시 > 

1. < 변수 접근 규칙에 따른 유효 범위 >

let name = 'kimsangkwon' 
function printName() { 
	let name = 'kimcoding'
	console.log(name); 
} 
 
 console.log(name); // kimsangkwon
 printName(); // kimcoding
 console.log(name); // kimsangkwon

name이 function 내에서 재선언이 되고 있습니다. 그래서 1번 출력은 전역에서 선언했던 kimsangkwon이 출력이 되고, 2번 출력에서는 함수의 영향을 받아 kimcoding이 출력됩니다. 이처럼 바깥 변수와 동일한 이름의 안쪽 변수가 생길 경우 안쪽 변수에 의해서 바깥 변수가 가려지는 현상을 쉐도잉(variable shadowing) 이라고 합니다.

 

하지만 세번째 출력에서 'kimcoding'이 아니고 'kimsangkwon'이 출력되는 이유는 function scope 내에서 재선언이 되었지만, 함수 밖에서는 영향을 미치질 못하기 때문입니다.(변수 접근 규칙에 따른 유효 범위)

 

2.
let name = 'kimsangkwon' 
function printName() { 
	name = 'kimcoding' 
 	console.log(name); 
} 
 
 console.log(name); //  kimsangkwon
 printName(); // kimcoding
 console.log(name); // kimcoding

1번에서 출력되는 세번째 값과 다른 이유는, 함수에서 변수를 선언하는 것이 전역변수를 재할당으로  'kimsangkwon'에서 'kimcoding' 으로 바꾸기 때문입니다.

---

다른 게시글에서 알아봤던 var, let, const에 대해서 추가적으로 학습을 하면,

 

var - 재선언, 재할당 가능

함수 스코프에는 영향을 받지만,  블록 스코프를 무시하고 블록 스코프의 바깥쪽에서 작용할 수 있습니다. 단, 화살표 함수의 블록 스코프는 무시하지 않습니다.

 

let - 재선언 불가능, 재할당 가능.

블록 및 함수 스코프의 영향을 받습니다.

 

const - 재선언, 재할당 불가능.

블록 및 함수 스코프의 영향을 받습니다.

---

전역 객체(window)의 이해

 

브라우저에는 window라는 객체가 존재합니다.

브라우저의 창(window)을 의미하는 브라우저를 대표하는 객체입니다. 그리고 브라우저 창과 관계 없이 전역 항목도 담고 있습니다. 전역함수와 var로 선언된 전역 변수가 window 객체에 속합니다.

 

기존에 있던 window 객체와 var로 선언된 전역변수가 이름이 동일하다면 부수효과(side effect)가 발생할 수 있습니다. 부수효과는 원래의 목적과 다른 효과나 부작용이 발생하는 것입니다.

 

이러한 부수효과를 줄이기 위해서 전역변수의 사용은 지양하는 것이 좋습니다.

 

선언이 없는 변수도 var로 선언한 전역 변수처럼 취급됩니다.

 

선언 없는 변수를 줄이기 위해서는 'use strict'를 js 파일 상단에 입력함으로써 에러로 잡을 수 있습니다.

 

결론 : var 보다는 let, const를 이용하고, 선언 키워드가 없는 변수는 할당하지 말자.