JS | 함수 선언문 vs 함수 표현식

BOZZANG·2022년 4월 30일
0

JavaScript

목록 보기
5/14
post-thumbnail

🎇 함수 표현식

JS는 함수도 하나의 자료라는 개념을 가지고 있다.
다른 언어에서처럼 함수를 지정된 위치에서 만들지 않아도 되고, 특별한 동작을 하는 구조로 취급되지 않는다.

함수 선언 Functional Declaration

function showMessgae() {
  alert( '안녕' );
}

함수 표현식 Function Expression, 익명 함수 anonymous function

let showMessage = function() {
  alert( '안녕' );
};

alert( showMessage ); // 함수 소스 코드가 문자형으로 출력됨

❕함수 표현식 끝에 세미콜론이 있는 이유

함수 표현식은 let showMessage = ...; 와 같은 구문 안에서 값의 역할을 하기 때문이다. 모든 구문의 끝에는 세미 콜론을 붙이는 게 좋다.

함수 표현식 에서 변수에 함수를 할당했다.
JS는 함수를 하나의 자료로 취급하기 때문에 변수에 할당할 수 있다.

기존에 변수를 활용하던 것과 마찬가지로 alert( showMessage ) 와 같이 사용할 수 있고, 할당, 복사, 선언을 할 수 있다.

다만 위의 alert 예시에서는
() , 괄호가 붙어있지 않은데, 그렇기에 함수는 실행되지 않는다.
JS에서는 () 를 함수를 실행시키는 역할로 보면 된다.

함수이름 -> 함수 그 자체
함수이름() -> 함수의 실행 결과 리턴값

이를 이해하기 위한 예시

function showMessage() {
  alert( '안녕' );
}

let func = showMessage; // showMessage의 함수 자체를 복사한 것이다.

func(); // 복사한 변수 값에 함수를 실행시킨다는 () 괄호를 넣었고, 
	    // showMessage()와 동일하게 실행된다.
showMessage(); 

🎇 함수 선언문 vs 함수 표현식

🔗 문법

함수 선언문 : 독자적인 구문 형태

함수 표현식 : 표현식, 구문 구성(syntax construct) 내부에 생성


🔗 함수를 생성하는 단계

함수 선언문

순차적인 코드 실행이 일어나기 전에 생성된다.
그래서 함수 선언문이 정의되기 전에도 호출할 수 있다.

전역 함수 선언문은 위치에 상관없이 (정의되기 전,후) 사용할 수 있다.
전역 함수가 아니라면, 같은 블록 안에서 상관이 없다.

또한 입력한 순서대로 생성되고, 같은 이름이라면 마지막 함수로 덮어쓴다.

showMessage(); // 안녕 

function showMessage() {
  alert( '안녕' );
}

함수 표현식 (익명함수)

순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.
따라서 실행 흐름이 함수에 도달했을 때부터 함수를 사용할 수 있다.

이 때 이후부터 해당 함수를 할당, 호출, 등을 할 수 있다.

왜❓❕

이게 가능한 이유는 JS의 내부 알고리즘 때문이다.
JS의 내부 알고리즘이 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 초기화 단계 에서 함수 선언방식으로 정의한 함수가 생성되는 것이다.

showMessage(); // error

let showMessage = function() {
  alert( '안녕' );
};

🔗 스코프

스코프 scope 란, 변수가 존재하는 범위를 말한다.
이 스코프는 같은 단계에 있을 경우 충돌이 일어난다.

JS에서 스코프 단계를 변경하는 방법

1. 중괄호를 사용해서 블록 만들기
2. 함수를 생성해서 블록 만들기

함수 선언문

엄격 모드 strict mode 에서,
함수 선언문이 코드 블럭 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다.
하지만 블록 밖에서는 함수에 접근하지 못한다. 엄격하니까.. ㅎㅎ

'use strict'; // 엄격 모드 사용

let age = prompt(' 나이 : ', 23);

if (age > 19) {                      
  									  
  showMessage(); // 정상적으로 실행      
  									  
  function showMessage() {			 
    alert( '으른' );				    
  } 
  
  showMessage(); // 정상적으로 실행
  
} else { 
  function showMessage() {
    alert( '애' );
  }
}

showMessage(); //  Error: welcome is not defined

함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하다.
if 코드 블록 안에 선언된 함수 두 개만 유효하기 때문에, 마지막에 에러가 발생한다.

이럴 때 함수 표현식을 사용하면, 코드 블록 밖에서도 함수를 호출할 수 있다.

'use strict'; // 엄격 모드 사용

let age = prompt(' 나이 : ', 23);

let showMessage;

 if (age > 19) {                      
  									  
 showMessage = function() {
   alert( '으른' );
 };
} else { 
  
  showMessage = function() {
    alert( '애' );
  };
}

showMessage(); // 정상적으로 실행

🙄 함수 선언문, 함수 표현식(익명 함수) 둘 중 무엇을 사용할지...

함수 표현식(익명 함수)는 우리가 코드를 읽을 때와 같은 순서로 함수가 선언되지만, 함수 선언문은 우리가 코드를 읽는 순서와 다르게 (블록에 따라서) 선언된다.
그래서 안전하게 함수를 사용하려면 함수 표현식(익명 함수)가 좋다고 한다.
하지만 이러한 먼저 선언되어서 언제든지 활용할 수 있다는 것이 장점이 되기도 하고, 함수 선언문의 가독성이 더 좋아서 때에 따라 잘.. 써보도록 해보자!


✔ 엄격 모드 Strict mode

'use strict' // 엄격 모드 실행!! 나 지금 엄격하다!

JS는 위와 같은 코드를 읽은 이후로, 그 순간부터 코드를 엄격하게 검사한다.
JS는 오류를 어느정도 무시하고 넘어가는게 있긴 하다. 그래서 일반적으로 엄격 모드를 사용하는 것이 좋다고 한다.
블록의 가장 위쪽에서 엄격 모드를 적용하면 해당 블록 내부에만 엄격 모드가 적용된다. 이런 식으로 활용한다고 한다.


참고 Modern JavaScript Tutorial

0개의 댓글