9-2. [JavaScript] 스코프

 

스코프 Scope

JavaScript에서의 스코프는 "변수접근 규칙에 따른 유효범위"이다.

 

 

---

스코프  규칙

 

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 바깥쪽 스코프에서 안쪽 스코프로의 접근은 불가능하다.

 

2. 스코프는 중첩이 가능하다.  

- 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)

- 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)

- 지역 스코프에 선언한 변수는 지역변수, 전역 스코프에 선언한 변수는 전역변수

- 지역변수는 전역변수보다 더 높은 우선순위를 가짐

 

예제)

let name = '고기만두';

function showName() {
  let name = '김치만두'; // 지역 변수
  console.log(name); // 두 번째 출력
}

console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력

 

첫 번째 출력은 첫째 줄에서 전역 변수로 선언된 name을 가져옵니다. 이는, showName 함수 안쪽에 선언된 지역 변수 name은 애초에 스코프 규칙에 의해 접근할 수 없기 때문입니다. 따라서 "고기만두"을 출력합니다.

 

반면, 두 번째 출력은 함수 안에서 선언한 name이라는 지역 변수에 접근하고 있습니다. 변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name이 출력되는 것입니다. 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.

두번째 출력 "김치만두"

 

세 번째 출력은 첫 번째 출력과 마찬가지로 전역 변수 name을 출력합니다. 지역 변수에 선언된 name 변수는 안쪽 스코프이므로 접근이 불가능합니다. 따라서 "고기만두"을 출력합니다.

 

 

 

---

 

스코프  종류

 

1. 블록 스코프(block scope) :  중괄호를 기준으로 범위가 구분됩니다.

2. 함수 스코프(function scope) : Function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듭니다.

 

 

---

 

변수 정의 키워드  var,  let,  const

 

 

•  var키워드는 블록 스코프를 무시하고, 함수 스코프만 따른다.
   (단, 화살표 함수의 블록스코프는 무시하지 않는다.)

 

• var보다는 let으로 변수 선언을 하는것을 권장함
   let키워드는 재선언을 방지하기 때문에 더 안전하다.

 

• const는 값이 변하지 않는 상수를 정의할 때 사용한다.
  값의 변경을 최소화하여 안전한 프로그램을 만든다.
  만약 값을 새롭게 할당할 일이 없다면 const의 사용이 권장됨
  const를 사용하면 값의 재할당이 불가능하다. 재할당시 TypeError
  따라서 의도치않은 값의 재할당을 막는다.

 

 

변수 정의 키워드	let	const	var
유효 범위	블록 스코프 및 함수스코프	블록 스코프 및 함수스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

 

 

---

scope 변수선언 주의사항

 

변수선언 주의사항
Window 객체	브라우저에만 존재 브라우저 창을 대표하는 객체 그러나 브라우저 창과 관계없이 전역 항목을 포함 var로 선언된 전역 변수, 전역 함수는 window객체에 속함
전역변수의 최소화	전역변수는 어디서든 접근 가능하다. 편리하지만 너무 함수를 많이넣으면 부수효과(side effect)가 발생
let, const 사용하기	var은 블록 스코프를 무시 var은 재선언시 에러를 내지 않는다.(재선언은 버그를 유발) 전역변수를 var으로 선언한다면 window기능을 덮어씌워서 내장 기능을 사용하지 못하게 만든다.
선언없는 변수할당 금지	선언키워드(var,let,const)없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

 

 

 

 

 

 

끝 🤪