자바스크립트 함수 범위와 표현식

지난시간에는 함수 기본을 공부했었다.

https://jjaong34.tistory.com/24

자바스크립트 함수

이어서 좀 더 파고들어보려고 한다.

자바스크립트 함수 범위

함수내에서의 변수와 함수밖에서의 변수는 다른가?

let print = 'AAAAA';
function printFn(){
	let print = 'BBBBB';

    console.log(print)
}

printFn(); // BBBBB
console.log(print); // AAAAA

이렇게 서로 출력결과가 다르다.

함수 안에서 선언한 변수는 함수안에서만 영향을 미치고

함수 밖에서 안에 있는 변수를 찾으려고하면 undefined가 나온다.

 

이때  AAAAA가 나오게 하는 변수를 전역변수라고 한다.

 

let print = 'AAAAA';
function printFn(){
	print = 'BBBBB';
}

printFn();
console.log(print); // BBBBB

함수내에서 전역변수를 변경하려면 새로운값을 준뒤에

함수를 호출후에 출력해보면 

영향이 간것을 알 수 있다.

 

변수의 범위는 어떻게 되는 것인가 범위에는 무엇이 있는지 알아보자.

일단 위에서 다룬 내용은 함수의 범위에 대한 내용이고

다른 범위에 대해서도 알아보자

 

블록범위

조건문이나 반복문에서

중괄호 {} 안쪽을 블록 범위라고 한다.

블록 범위 안에서 변수를 생성하면

외부에서는 사용 할 수 없다.

하지만 var을 사용하게 될 경우에는 쓰다보면 범위에 문제가 될 수 있다.

가급적 let 과 const 를 사용하자

렉시컬 범위 

만약 함수안에서 함수를 실행했을때

function 함수1(){
	const name = ['sujin','minsu'];
	function 함수2(){
    	console.log(name);
    }
}

함수2라는 내부 함수에서 함수1에서 생성한 변수를 가져올 수 있는지?

정답은 가져올 수 있다.

함수에서 선언한 변수는 내부함수가 몇개가 있든 접근이 가능하다.

이것을 렉시컬 범위라고 한다.

하지만 반대로는 접근이 불가능하다.

 

자바스크립트 함수 표현식

기본 구조는

function add(a,b){
	return a + b;
}

이런 식으로 function 함수명(인수) { 문장 } 의 구조 였다.

 

표현식으로 나타내면

const add = function(a,b){
	return a+b;
}

기본구조와 작동하는 방식은 같다.

하지만 이것은 함수명이 add 인것 이랑은 좀 다르니 참고하자.

 

함수표현식은 정의되는 또 하나의 구문이고 변수에 저장될 뿐이라고 생각하면 된다.

함수 표현식을 알아야 하는 이유는

자바스크립트에서 기본적으로 함수를 배열 같은 값의 하나로 간주하기 때문이다.

함수를 변수로 저장하는 이 방식으로 엄청난 작업들을 할 것이다.

함수 자체를 인수로 쓸 수도 있고, 함수 자체를 반환 할 수도 있다.

 

배우면 배울수록 흥미로우면서도 점점 어려워져가는게 느껴진다