[Javascript] 함수 작성 방법 3가지

함수 function

• JavaScript에서 함수는 일급 객체(first-class)이다.
• 함수를 변수, 객체, 배열 등에 저장할 수 있고, 다른 함수에 전달하는 콜백함수 또는 리턴 값으로 사용 가능

일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.

자바스크립트에서 함수를 생성하는 방법은 다음과 같다.

함수 선언식

function Add(a, b) { //  a, b 👉 파라미터
    return a + b;
}
console.log(Add(10,20)); // 10, 20 👉 인자값

함수 선언식은 function 키워드로 시작하고 함수 이름을 지정한 후, 괄호 안에 매개변수(parameter)를 정의한다. 그리고 중괄호 내에 함수의 동작을 구현하고, 필요한 경우 결과를 return 키워드로 반환한다.

 

JavaScript에서는 매개변수에 대한 타입은 명시하지 않는다.  또한 함수를 호출할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출이 가능하다. 

 

전 게시물 💡 에서 호이스팅(Hoisting)에 대해 작성했는데 호이스팅은 함수 실행 전, 함수 안에 존재하는 모든 선언들을 해당 scope의 최상단에 선언한 것처럼 동작하는 특성을 말한다. 즉, 함수 선언식은 다음과 같이 생성되기 전에 호출이 가능하다.

console.log(Add(10,20)); // 30

function Add(a, b) { 
    return a + b;
}

 

---

함수 표현식 (익명함수)

var add = function(a, b) {
    return a + b;
}
console.log(add(10,20)); // 30

함수 표현식은 함수를 변수에 할당하는 방식이다. function 키워드를 사용하여 함수를 생성하고, 이를 변수에 할당한다.function 키워드 뒤에 함수명을 생략할 수 있으며, 익명 함수 표현식이라고 말한다

 

함수 표현식은 함수 선언식과 다르게 함수 호이스팅이 발생하지 않는다.

console.log(add(10,20)); // error

var add = function(a, b) {
    return a + b;
}
console.log(add(10,20)); // 30

따라서, 함수 선언식과 함수 표현식의 가장 큰 차이점은 함수 호이스팅 발생 여부이다.

---

arrow 함수 (화살표 함수)

var add = (a, b) => a + b; 

console.log(add(10,20)); // 30

arrow 함수는 ES6부터 도입된 새로운 함수 표현 방식이다.

 

=> 화살표 표기법을 사용해 함수를 간결하게 표현할 수 있다. 다음은 arrow 함수에 대한 설명이다.

// 💡 매개변수는 소괄호에 작성한다. 
var add = (a, b) => a + b;

// 💡 매개변수가 하나인 경우 소괄호를 생략할 수 있다.
var print = value => console.log(value);

// 💡 함수 본문에 표현식이 긴 경우 중괄호를 작성한다.
var max = (a, b) => {
    if(a > b) {
        return a;
    }
    else {
          return b;
    }
}

console.log(add(10,20)); // 30
print("hello world"); // hello world
console.log(max(3,4)); // 4