[JavaScript] 함수 선언식과 함수 표현식

함수 선언식

함수 선언식은 흔히 아래와 같은 형태로 작성한다.

function 함수이름() {...}

 

summarizeUser라는 함수를 선언하는 예제이다.

let name = "Kim";
let age = 29;
let hasHobbies = true;

function summarizeUser(userName, userAge, userHasHobby) {
  return (
    "Name is " +
    userName +
    ", age is " +
    userAge +
    " and the user has hobbies: " +
    userHasHobby
  );
}

함수 이름을 호출하여 사용한다.

console.log(summarizeUser(name, age, hasHobbies));
// Name is Kim, age is 29 and the user has hobbies: true

 

함수 표현식

• 함수에 이름이 없기 때문에 소위 익명함수(Anonymous Function)이라고도한다.
• 함수 표현식은 변수에 함수를 저장하고 변수는 함수처럼 사용가능해진다.
• 변수 이름을 호출하여 사용할 수 있다.

let name = "Max";
let age = 29;
let hasHobbies = true;

const summarizeUser = function (userName, userAge, userHasHobby) {
  return (
    "Name is " +
    userName +
    ", age is " +
    userAge +
    " and the user has hobbies: " +
    userHasHobby
  );
};

// 함수 호출
console.log(summarizeUser(name, age, hasHobbies));
// Name is Kim, age is 29 and the user has hobbies: true

 

화살표 함수

• 화살표 함수는 항상 익명함수이다.
• this를 바인딩하지 않는다.
• 함수 표현식과 마찬가지로 변수에 함수를 저장하고 변수 이름을 호출하여 사용한다.

let name = "Max";
let age = 29;
let hasHobbies = true;

const summarizeUser = (userName, userAge, userHasHobby) => {
  return (
    "Name is " +
    userName +
    ", age is " +
    userAge +
    " and the user has hobbies: " +
    userHasHobby
  );
};

console.log(summarizeUser(name, age, hasHobbies));

 

person이라는 객체에 greet라는 함수를 화살표 함수로 만들었다.

const person = {
  name: "Kim",
  age: 29,
  greet: () => {
    console.log("Hi, I am " + this.name);
  },
};

person.greet();

결과는??

Hi, I am undefined

this.name으로 person객체의 name에 접근한 것 같지만 undefined가 뜨는 이유는?

화살표 함수의 this는 전역범위를 참조한다. person객체를 참조하는 것이 아니기 때문에 전역 범위에 있는 this를 찾는다.

전역범위에 name이 없기 때문에 undefined를 출력하는것!

그래서 이런 경우에는 화살표 함수를 사용하지 말고 아래와 같이 해야한다.

const person = {
  name: "Kim",
  age: 29,
  greet: function () {
    console.log("Hi, I am " + this.name);
  },
};

person.greet();
// Hi, I am Kim

또는

const person = {
  name: "Kim",
  age: 29,
  greet() {
    console.log("Hi, I am " + this.name);
  },
};

person.greet();
// Hi, I am Kim

 

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

함수 선언식은 호이스팅의 영향을 받지만 함수 표현식은 호이스팅의 영향을 받지 않는다.

따라서 함수 선언식은 호이스팅에 따라 맨 위로 끌어올려지기 때문에 구현한 위치가 상관이 없다.