[JS-011]함수 표현식(익명함수/화살표함수)

[1] 함수표현식

▶️ JS도 다른 프로그래밍 언어처럼 함수를 만든 다음에 함수 이름을 사용해서 함수를 실행하면 됩니다.

▶️ 이 외에도 JS에서는 함수를 실행하는 여러 방법이 있습니다. 이런 방법들은 "함수 표현식"이라고 말합니다.

 

[예제1] 익명함수(Anonymous function)

See the Pen 011_예제1 by wootekken (@wootekken) on CodePen.

✔️ [예제1] JS 코드 설명
◼️ 1번~4번줄: 자바스크립트에서 함수를 만들고 사용하는 일반적인 방법

◼️ 6~8번줄: 자바스크립트에서 익명함수를 만드는 방법. 익명이기 때문에 함수이름은 존재하지 않고 변수 f2에 함수식 자체를 넣어버리는 구조임.
◼️ 9번줄: 익명함수가 들어가 있는 변수 f2를 이용하여 함수를 실행함

 

[예제2] 즉시 실행함수(Immediately-invoked function expression)

See the Pen JS_011__예제2 by wootekken (@wootekken) on CodePen.

✔️ [예제2] JS 코드 설명
◼️ 1~3번줄: 즉시 실행함수는 함수를 만듬과 동시에 바로 실행하는 함수 입니다. 만드는 방법은, 익명함수 코드 전체를 괄호( )로 묶는다고 생각하면 됩니다. 그리고 이 코드에서는 매개변수가 괄호 밖에 존재합니다.

◼️ 5~7번줄: 즉시 실행함수의 매개변수를 괄호( ) 안에 넣을 수도 있습니다.

◼️ 9~10번줄: 즉시 실행함수의 반환값이 저장된 r1, r2의 변수값을 콘솔창에 확인함으로서 즉시 실행함수가 정말로 실행되었는지 확인합니다.

 

 

[예제3] 화살표 함수(Arrow function)

 

See the Pen JS_011_예제3 by wootekken (@wootekken) on CodePen.

✔️ [예제3] JS 코드 설명
◼️ 1~3번줄: 예제1에서 다룬 익명함수 입니다.

◼️ 4~7번줄: 익명함수에서 function을 없애고 화살표(=>)를 추가하면 화살표 함수가 됩니다. 만약 함수에서 실행할 명령어가 1줄이면 7번줄 처럼 중괄호{ }를 생략하고 return도 생략가능 합니다.

◼️ 16번줄: 매개 변수가 없을 경우 화살표 함수에서는 그냥 ( ) 괄호만 사용합니다.
◼️ 20번줄 매개변수가 1개일 경우에는 화살표 함수에서 괄호 없이 매개변수만 사용합니다.
◼️ 매개변수가 2개 이상일 경우에는 화살표 함수에서 (n1, n2) 이런 식으로 괄호를 해야 합니다.