[ 자바스크립트 ] 함수 - 스코프 (Scope)

📌 스코프 (Scope)

• 변수에 접근 가능한 범위
• 함수 실행컨텍스트 내부의 변수 환경

# 컨텍스트 (context)

this 키워드 값, 함수가 선언된 환경을 의미한다.
'어떤 친구가 날 불렀는가?'

function hi(){
	console.log('hi');
  
  function ask(){
  	console.log('what is your name?');
  }
  
  ask() // context = function hi 
}

hi() // context = global 

# 함수 스코프

JS는 기본적으로 함수 스코프를 따른다
=> 함수가 선언될 때마다 새로운 스코프 발생

if( 5 > 3){
  var num = 12345;
}

console.log(num); // 12345

• 함수가 선언되지 않았기 때문에 같은 컨텍스트 안에 존재, num에 접근 가능

function a(){
 var num = 12345;
}

console.log(num) // ReferenceError

• 함수가 선언되면서 a의 실행 컨텍스트가 생성
• 이 실행 컨텍스트 내부에 존재하는 변수환경(variable environment)에 num 변수가 저장됨
• 따라서 함수 외부에서 num에 접근하려고 할 경우 스코프가 다르기 때문에 해당 변수에 접근이 불가능
• 함수외부는 global scope이고, 함수 내부는 a함수의 scope인데 부모스코프는 자식스코프에서 간섭할 수 없기 떄문에 접근이 불가능

# 블록 스코프

{ } 블록이 생성될 때마다 스코프가 생성됨
let, const의 등장으로 블록 스코프 생성 가능

function index() {
	for(var i = 0; i < 5; i++) {
		console.log(i);
	}
	console.log('last',i);
}
index();
/*
0
1
2
3
4
'last' 5 
*/

• var 로 변수 i를 초기화 하여 함수 스코프를 따르고
• for문과 console.log('last',i)은 같은 스코프에 있어서 변수에 접근 가능

function index() {
	for(let i = 0; i < 5; i++) {
		console.log(i);
	}
	console.log('last',i);
}
index(); /* ReferenceError: i is not defined */

• let으로 변수 i를 초기화 하여 블록 스코프를 생성
• for문과 console.log('last',i)의 스코프가 달라서 변수에 접근 불가능

참조👀 https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84