JavaScript - 함수

1. 함수의 범위

변수를 JavaScript의 어느 부분에 정의하느냐에 따라 액세스 지점이 정해진다.

// 상황 1)
function collectFlags() {
	let totalFlags = 7;
    console.log(totalFlags);
}

// 함수 실행
collectFlags()
7

------------------------------
// 상황 2)
function collectFlags() {
	let totalFlags = 7;
}
console.log(totalFlags);

상황 1)에선 함수가 실행되어 결과값이 출력되었으나
상황 2)에선 함수가 실행되지 않았으며 변수를 지정하라는 에러가 발생했다.

무슨일일까??

우리가 let 키워드를 사용해서 값을 정의한 함수 안에서 정의한 변수들은 함수로 범위가 정해져있기 때문에 에러가 발생하게 된것이다. 그렇기 때문에 totalFlags는 함수 안에서만 유효한 것이다.

예시 2)

let dog = 'Poodle';
function anotherDog() {
	let dog = 'Jindo';
    console.log(dog);
}
console.log(dog);

이 경우에는 전역 변수인 'dog'의 값이 'Poodle'이어도 함수 안의 내부 변수 'dog'가 'Jindo'라는 값을 가지고 있기 때문에 화면에 출력하면 'Jindo'의 값이 출력되게 된다.

만약 함수 안의 내부 변수 'dog'가 정의되지 않은 상태에서 'dog'를 출력했다면 'Poodle'이 출력되게 되는 것이다. 즉, 가까운 곳의 변수의 값을 출력한다고 이해하면 편할 것이다.

2. 함수의 블록범위

예시로 먼저 살펴보자

let mount = 8; 
if (mount > 10) {
	const totalAmount = 10;
    let msg = 'lollol';
    console.log(totalAmount)  // #3

}

console.log(mount);		// #1
console.log(totalAmount)  // #2
-----------------------------
// #1의 출력결과
8

// #2의 출력결과
정의되지 않음.

// #3의 출력결과
10

Q. 왜 #2의 결과값은 정의되지 않았다고 나타날까?

만약 if가 아닌 함수로 정의되어 있었다면 결과값이 출력이 되었을테지만, 함수로 정의되어 있지 않고, 조건문에 해당하였기 때문에 결과값이 나오지 않은 것이다.

즉, 블록은 함수를 제외하고 {중괄호}가 있는 모든 곳을 나타낸다.(for문, if문)

따라서 #3의 결과값이 10으로 출력된 것은 블록 범위에 해당하기 때문에 정상적으로 결과값이 출력된 것이다.

---

물론 주의할 점도 존재한다.

• var 키워드를 사용하면 변수의 범위가 함수로 지정된다.(블록 지정 X)
  ==> let, const는 블록 범위로 지정되기 때문에 {}를 벗어나면 존재하지 않게된다.

3. 렉시컬 범위

function groceryStore(){
	const stores = ['GS25', 'CU', 'seven-eleven', 'emart'];
    function whereGostore() {
    	for(let store of stores){
        	console.log(`나는 ${store} 편의점으로 갈거야!)
        }
    }
}

가상의 코드가 존재한다고 가정하자.
groceryStore() 콘솔에 입력하면 아무런 결과값이 나오지 않는다.

왜? 나오지 않는 것일까?

우선 함수가 중첩되어 있다.
1. groceryStore()라는 부모 함수.
2. whereGostore()라는 자식 함수.

1번 함수를 실행시키기 위해선 2번 함수도 실행이 되어야만 한다.

function groceryStore(){
	const stores = ['GS25', 'CU', 'seven-eleven', 'emart'];
    function whereGostore() {
    	for(let store of stores){
        	console.log(`나는 ${store} 편의점으로 갈거야!)
        }
    } 
    whereGostore();
} 

위의 예시처럼 whereGostore();를 다시 입력해주고 groceryStore()를 실행시키면 결과값이 나오게 된다.

즉, 부모 함수 안에 중첩되어 있는 내부 함수는 해당 부모 함수의 범위나 범위 내에서 정의된 변수에 액세스 할 수 있다는 것이다.

function groceryStore(){
	const stores = ['GS25', 'CU', 'seven-eleven', 'emart'];
    function whereGostore() {
    	function inner() {
        	for(let store of stores){
        	console.log(`나는 ${store} 편의점으로 갈거야!)
        	}
        } 
        inner();
    } 
    whereGostore();
} 

• 중첩 함수가 추가되어도 부모 함수나 조부모 함수 등이 액세스하는 동일한 항목에 액세스 할 수 있으나, 반대로 조부모 함수 내에서 정의된 변수를 부모함수에선 액세스가 불가능하다.