[JavaScript] 함수 선언 방법

 

다른 언어에 비해 자바스크립트는 함수 선언 방법이 참 다양합니다. 그래서 각 상황에 맞게 사용해보고자, 각 선언 방법을 정리해보고자 합니다.

1. named function declaration (명명 함수 선언)

function helloJS(){
  // 함수 내용
}

가장 대중적인 방법으로, 함수 호이스팅으로 어느 위치에서든 호출할 수 있는 함수이다.

 

2. anonymous function expression (익명 함수 표현)

const myName = function () {
 // 함수 내용
}

이름이 없이 함수를 변수에 담는 방식이다. 이름이 없는 함수지만, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다. 변수 할당은 호이스팅 되지 않으므로, 할당된 이후에만 실행 가능하다.

 

3. named function expression (명명 함수 표현)

const myName = function helloJs() {
 // 함수 내용
}

2와 거의 동일한 표현이다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 자바스크립트 엔진이 추정할 필요가 없다는 것이다.

 

4. Immediately-invoked expression (즉시 실행 표현)

var myName = (function () {
 // 함수 내용
})()

즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수 등을 쓸 수 있지만, 이 함수 밖에서는 완전히 캡슐화되어 접근할 수 없다. 아래는 카운터 예제이다.

const myCounter = (function(initialValue = 0){
	let count = initialValue
    return function() {
    	count++
        return count
    }
})(1)

myCounter() // 2
myCounter() // 3
myCounter() // 4

외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.

 

5. function constructor

const myName = new Function()

사용할 일이 거의 없는 함수표현

const adder = new Function('a', 'b', 'return a + b')
adder(2, 6)
// 8

이는 `eval()`을 사용하는 것과 같기 때문에 굉장히 위험하다. 그리고 이 생성자는 전역 범위로 한정된 함수만 생성할 수 있다.

 

6. arrow function (화살표 함수)

다른 방법들과 차이점

• `constructor` 로 쓰일 수 없다.
• `prototype` 을 가지고 있지 않는다.
• `yield` 키워드를 허용하지 않으므로 generator를 쓸 수 없다.
• `this`도 다르다.

리턴 형태

// 형태 1
const f1 = (x, y, z) => x + y + z;

// 형태 2
const f2 = (x, y, z) => {
	return x + y + z
}

object를 바로 리턴하려면? ( ) 괄호를 씌워주면 된다.

const f3 = (x, y, z) => ({x, y, z})

---

| 참고사이트​

1. 모던 자바스크립트 저자이신 이웅모 대표님 사이트: 

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

2. https://yceffort.kr/2020/10/6-different-ways-to-declare-javascript-function