익명 함수와 선언적 함수의 차이!

hyo·2021년 11월 13일
0

[Javascript] 기초 학습

목록 보기
23/62

익명함수와 선언적함수의 차이

while반복문for반복문은 2가지 모두 많이 사용되지만,
사용하는 상황이 조금씩 다르다.

while반복문은 조건을 중심으로 반복할때,
for반복문은 횟수를 중심으로 또는 배열 등을 중심으로 반복할 때 사용한다.

그런데 익명함수선언적 함수는 사용하는 상황이 비슷하다.

기본적으로 혼자 개발할 때는 자신이 편하다고 생각하는 것을 사용하고, 다른 사람들과 함께 개발할 때는 모두가 편하다고 생각하는 것을 사용하면 된다.

다만 최근에는 많은 개발자가 안전 등의 이유로 익명 함수를 선호하는 편이다.

자바스크립트는 네임스페이스(namespace)라는 문법이 따로 없어서 이름 충돌이 쉽게 발생할 수 있는 언어이다.
그래서 이후에 활용하는 객체로 네임스페이스를 유사적으로 만들어 활용한다.
그래서 선언적 함수를 잘 안쓴다.

익명 함수가 더 안전하다고 하는지,
어떤 차이가 있기에 그러는지 알아보자.

우선 익명 함수선언적 함수에 대해 정리해본다.

익명 함수 호출

익명함수는 우선 변수와 같기 때문에 위에서 아래로 코드가 읽어지면서 함수가 만들어지게 된다.

즉, 익명 함수는 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.

따라서 아래와 같은 코드가 있다면 위에서 아래로 차례대로 코드가 실행되면서 익명 함수라는 변수에 2번째 익명함수를 호출하는 함수가 할당된다.

아래 코드들은 위의 코드에서 익명함수()라는 코드를 상단에 위치했을때의 출력값을 보기 위해 썻지만,
에러가 났다.
당연히 익명 함수는 순차적으로 실행시키기때문에 에러가 나옴.


선언적 함수 호출

선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성된다.
따라서 선언적 함수는 같은 블록이라면 어디에서 함수를 호출해도 상관없다.

위의 코드를 보면 익명함수처럼 순차적으로 읽어 가고 가장 나중에 함수를 출력시킨것처럼 보이지만,
선언적함수는 순차적인 코드 실행이 아니다.
그저 익명함수와 같이 입력한 순서대로 생성되고 같은 이름이라면 덮어쓰는것 뿐이다.

이번엔 호출을 위해 함수()를 선언적 함수 생성 위에 입력해본다.
함수()를 가장 상단에 입력하고 실행시켜도
에러가 발생하지않고 실행된다.

이유는 선언적 함수를 생성하기 전에 함수를 호출해도 함수가 이미 생성된 상태이므로 아무 문제없이 실행되는것이다.


익명함수와 선언적함수 조합해보기

위의 코드를 실행시켜보면 왼쪽과 같이 출력된다.

가장 위의 함수() -> 선언적 함수를 호출하고
하단의 함수() -> 함수가 함수라는 변수자체를 덮어쓰기 때문에 익명함수라는 결과를 출력하게 된다.

선언적 함수는 무조건적으로 전체코드를 실행하기 전에 만들어지고 익명함수는 코드를 하나하나 실행하면서 만들어진다! 잘 기억하자.


HTMl로 익명함수를 쓰는이유 알아보기

위의 코드는 당연히 첫번째 script태그안의 익명함수는 순차적으로 읽어나가기 때문에 위의 함수() 라는 호출은 에러를 나타낸다.
두번째 script태그안의 선언적 함수는 당연히 위치에 상관없으므로 그대로 출력을 한다.

하지만 좀더 코드의 위치를 바꿔서 왜 익명함수를 써야하는지 이유를 알아보자.

보는바와같이

두번째 script태그안의 상단 함수() 호출에
'선언적함수 입니다'가 출력되었다.

이처럼 블록이 나뉘어진 경우에는 선언적 함수의 실행 흐름을 예측하는 것이 훨씬 어려워진다.

그러므로 익명함수가 훨씬 더 안전하고 더 많이 쓰인다.

profile
개발 재밌다

0개의 댓글