js_함수선언방식

BABY CAT·2022년 9월 27일
0

HTML, CSS, JavaScript

목록 보기
8/23

함수를 선언하는 6가지 방법

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

function hello() {
  // ...
}
가장 대중적인 방법이다. 함수의 이름이 hello가 된다. 이미 여러차례 싸질러 놨듯, 
  호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.

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

var hello = function () {
  //...
}
이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 
엔진이 이름을 변수명으로 추정하여 넣는다.

var hello = function () {
  //...
}

hello.name

//  > "hello"
hello

// > ƒ () {
//   //...
// }
변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다.

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

var hello = function originalName() {
  // ...
}
2와 거의 동일하다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에
의해 추론되지 않는 다는 것이다.

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

var hello = (function () {
  //...
})()
즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 
쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 
예제 중 하나로는 카운터가 있다.

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

myCounter() // 2
myCounter() // 3
myCounter() // 4
외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.

5. function constructor

var hello = new Function()
아마도 이런식으로 함수를 쓸일은 거의 없을 것이다.

const adder = new Function('a', 'b', 'return a + b')
adder(2, 6)
// 8
이는 eval()을 사용하는 것과 같기 때문에 굉장히 위험하다. 그리고 이 생성자는 
전역 범위로 한정된 함수만 생성할 수 있다.

6. arrow function (화살표 함수)

var hello = () => {
  //...
}

0개의 댓글