- | 함수 선언식(Functino Declation) | 함수 표현식(Function Expression) |
---|---|---|
정의 방식 | function 키워드 | 변수에 대입 |
호이스팅 | O | X |
호출 | 호이스팅의 영향으로 어디서나 호출 가능 | 변수를 호출하여 실행 |
함수명 | 필요 | 불필요 |
함수 선언식
function sum(a, b) {
return a + b;
}
함수 표현식
const sum = function(a, b) {
return a + b;
}
함수 이름을 지정하여 해당 함수 내부에서 자기 자신을 참조할 수 있다.
const sum = function add(a, b) {
return a + b;
};
console.log(sum(2, 3)); // Output: 5
console.log(add(2, 3)); // ReferenceError: add is not defined
함수 이름을 생략한 함수 표현식으로, 해당 함수는 변수에 할당되어 사용된다.
const sum = function(a, b) {
return a + b;
};
console.log(sum(2, 3)); // Output: 5
함수 정의 후 즉시 실행되는 함수로 한 번의 실행만 필요한 초기화 코드를 작성할 때 유용하다.
(function() {
console.log('Hello, World!');
})();
ES6에서 추가된 함수 작성법으로,
function
키워드 대신 화살표=>
를 사용하여 선언하는 방식이다.
this
바인딩 방식에 있어서 함수 선언식과 차이가 있다.this
가 가리키는 값이 함수를 선언할 때의 값으로 고정된다. 이 덕분에 함수 선언식에서 발생하는this
바인딩 오류를 방지할 수 있다. 그러나this
를 사용해야 하는 경우라면 함수 선언식을 사용해야 한다.함수 내부에서
return
을 사용하여 값을 반환할 수 있다. 단,return
문이 중괄호{}
로 둘러싸여 있다면 암시적 변환이 불가능하다. 따라서return
문을 통해 값을 반환하기 위해선 중괄호를 생략해야 한다.
const subtract = (a, b) => {
return a - b;
}
인수가 하나인 경우엔 괄호를 생략할 수 있다.
const square = x => x * x;
단, 인수가 없거나 2개 이상이라면 괄호를 사용한다.
객체를 생성하기 위한 함수. 생성자 함수를 사용시 유사한 객체를 다량 생성할 수 있으며, 객체의 속성과 메서드를 동일하게 정의한다.
new
연산자와 함께 호출한다.
생성자 함수 정의
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
객체 생성
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);
객체 메서드 호출
person1.sayHello(); // 출력: Hello, my name is Alice and I'm 25 years old.
person2.sayHello(); // 출력: Hello, my name is Bob and I'm 30 years old.