[JavaScript] 함수 선언 방식(함수 표현식, 함수 선언식, 차이점)

 

 

---

목차

 

1. 함수 표현식

2. 함수 선언식

3. 함수 표현식과 함수 선언식의 차이점

4. 화살표 함수 / 화살표 함수와 함수 표현식의 차이점

---

 

 

 

1. 함수 표현식 (function expressions)

---

- 함수 표현식: 함수 리터럴로 생성한 함수를 변수에 할당하는 방법

 

아래의 코드는 함수의 참조값이 example1라는 변수로 저장된 예시이다. 주의할 것은 example1은 함수의 이름이 아니라는 것이다. function은 익명함수이고 함수가 할당된 변수인 example1을 통해 호출할 수 있다.

 

또한 함수 표현식에 함수 이름을 지정하였다고 해도, 호출 방식에는 영향을 미치지 않는다. (호이스팅 되지 않음)

 

 함수 표현식으로 함수를 선언할 때는 세미콜론을 붙인다.

const example1 = function () { console.log('hello') };
// 변수 example1에 함수 할당

example1(); // 함수 호출 (호이스팅)

 

 

*호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

 

(참고 사이트: https://developer.mozilla.org/ko/docs/Glossary/Hoisting )

 

 

 

 

2. 함수 선언식 (function statement)

---

example2(); // 함수 호출 (호이스팅)

function example2() {
  console.log('hello');
} // 함수 선언

 

함수 선언 방식은 함수 리터럴 형식과 같다. 또한 함수 선언문은 반드시 함수 이름이 명시되어 있어야 한다. 이후 함수 이름으로 함수를 호출하면 된다. ex) example();

 

 

 

3. 함수 표현식과 함수 선언식의 차이점

---

1. 호이스팅

 

- 함수 선언식으로 선언된 함수는 호이스팅이 된다.

- 함수 표현식으로 선언된 함수는 호이스팅이 되지 않는다.

 

 

2. 세미콜론(;) 사용

 

- 함수 선언식에서 함수를 선언할 떄는 세미콜론(;)을 사용하지 않는다.

- 함수 표현식으로 함수를 선언할 떄는 세미콜론을 붙인다.

 

 

 

 

4. 화살표 함수와 함수 표현식의 차이점

---

https://codingtoddlerr.tistory.com/21

위는 화살표 함수를 다룬 글이다. 화살표 함수에 대해 알고 아래의 글을 읽으면 이해하는데 도움이 된다.

 

 

- 화살표 함수에서는 this값이 없다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

 

위의 예제에서 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해진다. 따라서 this.title은 group.title과 같다. 만약 위 예시에서 화살표 함수 대신 일반 함수를 사용했다면 어떨까?

 

 

 

 

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

 

아마 에러가 발생 할 것 이다. 

에러는 foreach에 전달되는 함수의 this가 undefined이어서 발생했다. alert 함수에서 undefined.title에 접근하려 했기 때문에 에러가 출력된다. 그런데 화살표 함수는 this 자체가 없기 때문에 이런 에러가 발생하지 않는다.

 

 

*화살표 함수는 new 생성자 함수와 함께 실행할 수 없다. this가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약이 있다.