함수(function)
자바스크립트의 함수는 '기능의 단위' 역할을 하며 매우 중요하다. '함수'라는 단어도 변수와 마찬가지로 수학에서 온 개념이다.
수학에서의 함수: y=f(x)
프로그래밍에서의 함수: 일정한 동작을 수행하는 코드 블록
함수 역시 프로그래밍에서는 의미가 조금 다르며, 일정 동작을 수행하는 코드 묶음(블록)이라고 이해하면 편하다.
함수생성 방법
함수 선언문(function declaration) 방식
function getSum(a, b) {
let sum = a + b;
return sum;
}함수 선언문은 function과 함수명, 파라미터, 몸체로 구성되어 있다. 이러한 선언문 방식은 함수명을 반드시 정의해야 하며 함수명 없이 작성하려면 표현식을 이용하면 된다.
return은 함수 실행을 중지시키고 함수를 호출한 곳에서 값을 반환하는 역할을 한다. 만약 return문 뒤에 아무것도 없거나 return문이 아예 존재하지 않으면 반환할 값이 없기 때문에 undefined를 반환한다.
함수 표현식(function expression) 방식
let getSum = function (a, b) {
let sum = a + b;
return sum;
};함수 표현식은 변수선언, 익명함수, 파라미터, 몸체로 구성된다. 함수 표현식의 함수는 구문 안에서 값으로 취급되므로 끝에 세미콜론(;)을 붙이는 것이 권장된다.
화살표 함수(arrow function) 방식
let sum = (a, b) => a + b; // 축약화살표 함수는 함수 표현식에서 function을 제외하고 파라미터 뒤에 =>를 추가하는 파격적인 방식으로 구성된다. { } 및 return은 생략 가능하며 React의 문법에선 화살표 함수만이 권장되는 경우도 있으므로 익숙해지는 것이 좋다.
심화: 함수 선언문 vs 함수 표현식
그렇다면 이러한 함수 선언문과 표현식은 어떤 차이가 있을까?
바로 함수의 사용 가능 시점이다.
함수 선언문: 선언문이 정의되기 이전에 함수 호출 가능
함수 표현식: 실제 실행흐름이 함수에 도달했을 때 함수 사용 가능
함수 표현식은 일반적인 상식대로 실행흐름이 해당 표현식에 도달하면 함수를 사용할 수 있다. 그러나 함수 선언문은 함수가 정의되기도 전에 호출이 가능하며, 이러한 현상을 바로 호이스팅이라고 한다. 이러한 호이스팅의 대표적인 예는 바로 var변수이다. 호이스팅에 대해서는 추후 별도 챕터로 정리할 예정이다.
매개변수와 전달인자
함수에 전달하는 매개변수와 전달인자의 개념은 구분해서 알아두는 것이 좋다.
매개변수(parameter) = x, y, width, height
전달인자(argument) = 1, 4 (실제 값)
매개변수는 함수가 인자로 무엇을 받을 것인지를 간접적으로 표현하는 변수로 실제 전달받을 값과는 다르다. 이와 반대로 전달인자는 실제 함수가 받을 값으로 숫자나 문자열의 기본 타입을 받는 경우가 많지만 또다른 함수를 전달인자로 받을 수 있다. 참고로 이러한 경우 인자로 전달되는 함수를 '콜백 함수'라고 부른다. 추가로 함수를 리턴하는 함수는 '커리 함수'라고 부르며, 이는 콜백 함수와 함께 대표적인 '고차 함수'의 예이다. 이는 JS기본_8. 고차함수에서 다시 정리하였다.
