JavaScript #7

스코프 (scope)

단어 자체의 뜻 : 범위

Javascript에서 자세하게 설명하면

변수의 유효범위

1. 블록 스코프 if, for, ...

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

console.log(message); // ReferenceError

• if { } 안 쪽에서 선언된 'message'는
  if { } 안 쪽에서만 사용(접근, 참조) 가능하다

2. 함수 스코프 function

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

console.log(greetSomeone()); // 'Hello alskfl'
console.log(firstName); // ReferenceError

• function { } 안 쪽에서 선언된 'firstName'은
  function { } 안 쪽에서만 사용(접근, 참조) 가능하다

• 화살표 함수는 블록 스코프! (≠ 함수 스코프)

{ }로 나뉘는 범위 = 스코프

---

스코프의 규칙

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

• 바깥쪽 스코프에서 선언된 변수는 안쪽 스코프에서 접근 가능하다
  안쪽 스코프에서 선언된 변수는 바깥쪽 스코프에서 접근할 수 없다
  
• 스코프는 중첩 가능하다
  
  - 가장 바깥쪽 스코프 : 전역 스코프 (global scope)
  - 안쪽 스코프들 : 지역 스코프 (local scope)
  
• 안에서 선언된 변수(지역 변수)는 전역에서 선언된 변수(전역 변수)보다
  우선 순위가 높다
  

let name = 'alskfl';	# 전역 변수 

function showName() {	
  let name = 'tpffjfl';	# 지역 변수 ≠ 전역 변수
  console.log(name);
}

console.log(name);	# 'alskfl'
showName();		# 'tpffjfl'
console.log(name);	# 'alskfl'

- 다른 경우

let name = 'alskfl';	# 전역 변수 

function showName() {	
  name = 'tpffjfl';	# 새로 선언하지 않음 = 전역 변수
  console.log(name);
}

console.log(name);	# 'alskfl'
showName();		# 'tpffjfl'
console.log(name);	# 'tpffjfl'

---

let, const, var

1. 변수 선언 키워드 var

var로 선언된 변수는 블록 스코프를 무시 (화살표 함수 제외)

• 블록 단위로 스코프를 구분할 때 훨씬 예측 가능한 코드를 쓸 수 있음
  - 보통 블록은 들여쓰기가 적용되고, 그 구분이 시각적으로 분명하기 때문

• let 은 재선언 되지 않음

let 사용 권장

2. 변수 선언 키워드 const

• let 과 같이 블록 스코프를 따른다

• 값이 재할당되지 않는다
  - 재할당 하는 경우 TypeError, 의도하지 않은 값의 변경을 막는다

---

그림 출처 : codestates