자바스크립트에서 함수 선언 방식은 크게 세 가지로 나눌 수 있습니다.
함수 선언문(Function Declaration), 함수 표현식(Function Expression), 그리고 화살표 함수(Arrow Function)입니다.
1. 함수 선언문 (Function Declaration)
function 함수이름(매개변수){
// 함수 내용
}-
특징 :
function키워드를 사용하여 선언합니다. -
호이스팅 : 함수 선언문으로 정의된 함수는 호이스팅(hoisting)되어 함수 선언 전에 호출이 가능합니다.
-
사용예시
function sayHello(name){
console.log("Hello, " + name);
}2. 함수 표현식 (Function Expression)
const 함수이름 = function(매개변수){
// 함수 내용
};-
특징 : 함수를 변수에 할당하는 방식으로, 익명 함수(Anonymous Function)를 사용하여 정의하는 경우가 많습니다.
-
호이스팅 : 함수 표현식은 호이스팅되지 않기 때문에 함수 정의 이후에만 호출이 가능합니다.
-
사용예시
const sayGoodbye = function(name){
console.log("Goodbye, " + name);
};
sayGoodbye("Joon");3. 화살표 함수(Arrow Function)
const 함수이름 = (매개변수) => {
// 함수내용
};-
특징 :
=>(화살표)를 사용하여 간결하게 함수를 정의합니다. -
this 바인딩 : 기존 함수와 달리 화살표 함수는
this가 해당 함수 스코프가 아닌 상위 스코프(lexical scope)에 바인딩 됩니다. -
사용예시
const add = (a, b) => a+b;
console.log(add(5,3)); // 8 일반적으로 위 세가지 방법이 가장 많이 사용됩니다.
이 외에도 생성자 함수(Constructor Function)나 Function 객체를 사용하여 함수를 정의할 수 있습니다.
4. 생성자 함수(Constructor Function)
생성자 함수는 객체를 생성할 때 주로 사용되지만, 자바스크립트에서는 함수 정의에도 활용될 수 있습니다 new키워드를 사용해 함수 객체를 생성합니다.
function Person(name, age){
this.name = name;
this.age = age;
}
const person1 = new Person('Joon', '26');
console.log(person1.name); // Joon
console.log(person2.age); // 26- 특징 :
this키워드를 사용하여 인스턴스 속성을 정의합니다. - 용도 : 주로 클래스를 정의하는 용도로 사용됩니다.
- 주의점 : 생성자 함수는
new키워드 없이 호출하면 일반 함수처럼 동작할 수 있어this바인딩이 혼란스러울 수 있습니다.
5. Function 객체
Function 객체를 사용하면 함수 자체를 생성할 수 있습니다. 다만, 이 방법은 일반적인 함수 정의 방식 보다는 덜 사용됩니다.
const add = new Function('a', 'b', 'return a+b');
console.log(add(5, 3)); // 8- 특징 : 함수의 매개변수와 본문을 문자열로 정의합니다.
- 호이스팅 :
Function객체로 정의한 함수는 다른 함수 정의 방식과 달리 런타임에 함수가 생성 됩니다. - 주의점 : 문자열로 함수 내용을 정의하므로, 보안 및 성능 면에서 권장되지 않습니다.
이 두 가지 방식을 자바스크립트의 다양한 유연성을 보여주는 예시지만, 일반적인 함수 정의와는 용도가 다르면, 실무에서는 잘 사용되지 않습니다.
