[JavaScript] 함수 - 변수/함수의 유효 범위

변수의 유효 범위(variable scope)

- 해당 변수가 접근할 수 있는 변수, 객체, 함수의 집합

- 객체 / 함수 는 모두 변수

 

1. 지역 변수(local variable)

2. 전역 변수(global variable)

 

1. 지역 변수(local variable)

- 함수 내에서 선언된 변수 / 매개변수

- 변수가 선언된 함수 내에서만 유효 => 함수 종료 시, 메모리에서 사라짐

function localNum() {
	const num = 10;
	console.log(typeof num);	// number
}

localNum();
console.log(typeof num);	// undefined

* 선언되지 않은 변수를 사용 => 오류 / typeof 연산자는 오류 대신 undefined

 

 

2. 전역 변수(global variable)

- 함수 외부에서 선언된 변수

- 프로그램의 어느 영역에서 접근 가능 => 웹 페이지가 닫혀야 메모리에서 사라짐

let num = 10;
function globalNum() {
	console.log(num);	// 10
	num = 20;
}

globalNum();
console.log(num);	// 20

- 전역 변수와 같은 이름의 지역 변수를 선언해서 사용 가능

let num = 10;
function globalNum() {
	let num = 20;
	console.log(num);	// 20
}

globalNum();
console.log(num);	// 10

이 때, 전역 변수 값을 사용하려면 window 객체의 프로퍼티임을 명시하면 됨

let num = 10;
function globalNum() {
	let num = 20;
	console.log(num);		// 20
	console.log(window.num);	// 10
}

globalNum();
console.log(num);	// 10

 

---

 

함수의 유효 범위(function scope)

- 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근 가능

- 전역 함수 => 모든 전역 변수와 전역 함수에 접근 가능

- 내부 함수 => 부모 함수에서 정의된 모든 변수 및 부호 함수가 접근할 수 있는 다른 변수까지 접근 가능

let x = 10, y = 20;

function sub() {
	return x - y;
}

console.log(sub());	// -10

---

function parentFunc() {
	let x = 1, y = 2;
	function add() {
		return x + y;
	}
	return add();
}

console.log(parentFunc());	// 3

 

 

함수 호이스팅(hoisting)

- 유효 범위의 적용이 변수 선언 전에도 똑같이 적용되는 특징

- 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작

const globalNum = 10;
function printNum() {
	console.log(globalNum);	// undefined => 호이스팅 발생
	const globalNum = 20;
	console.log(globalNum);	// 20
}
printNum();

- 함수 호이스팅이 자동이지만 항상 변수를 미리 선언하는 것이 좋음

 

 

 

 

 

http://tcpschool.com/javascript/js_function_variableScope

코딩교육 티씨피스쿨