Function
동일한 작업을 반복적으로 수행해야 한다면 함수를 선언하고 재사용하는 것이 효율적이다. 자바스크립트의 함수는 객체(일급 객체, First-class object)이다.
함수 정의하기
함수 정의하는 방법으론 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 세가지가 있다.
-
함수 선언문
function키워드를 사용한 일반적인 함수 정의 방식function square(number) { return number * number; } -
함수 표현식
자바스크립트 함수는 일급 객체이므로 아래와 같은 특징이 있다.
일급 객체의 특징을 이용하여 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있다.
무명의 리터럴로 표현이 가능하다.
변수나 자료 구조(객체, 배열…)에 저장할 수 있다.
함수의 파라미터로 전달할 수 있다.
반환값(return value)으로 사용할 수 있다.let squre = fucntion(number) { return number * number; } -
Function 생성자 함수
위의 1,2 번 방법은 3번 방법의 축약버젼이다. 3번 방법은 일반적으로 사용하지 않는다.
함수 호이스팅
//1. 함수 선언문 방식으로 선언된 함수를 정의되기 전에 호출하였을때
let area = square(4);
area; //16
function square(number) {
return number * number;
}square 함수는 함수가 선언되기전에 호출하였음에도 값을 리턴한다. 함수 선언문 방식으로 선언된 함수는 선언된 위치와 관계없이 어디에서든 호출 가능한 함수 호이스팅(Function Hoisting)이 일어난다. 자바스크립트 엔진은 함수 선언문으로 선언된 함수의 경우 함수선언, 초기화, 할당이 한번에 이루어 진다.
//2. 함수 리터럴 방식으로 선언된 함수를 정의되기 전에 호출하였을때
square(4); //ReferenceError: square is not defined
let square = function(number) {
return number * number;
}위와 달리 함수 리터럴방식으로 선언된 함수를 선언되기 전에 호출 하였을땐 에러가 발생한다. 함수 리터럴 방식은 함수 호이스팅이 아니라 변수 호이스팅이 발생한다. 함수 리터럴 방식은 실제 값의 할당은 할당문에서만 이루어진다.
함수 호이스팅은 함수 호출 전 함수가 선언되어야 한다는 규칙을 무시하므로 함수 선언문 방식보다 함수 리터럴(표현식) 방식을 사용하여 함수를 선언해야 한다고 권고된다.
매개변수(Parameter) / 인수(Argument)
매개변수는 함수의 실행을 위해 추가적인 정보가 필요한 경우 외부에서 데이터를 전달받아 함수 내부에서 변수와 같이 사용하는 것을 말한다.
인수는 매개변수로써 실제 대입된 값을 말한다.
반환값
함수는 수행한 결과를 반환할 수 있다. 이때 반환된 값을 반환값(return value)라고 한다.
자바스크립트 해석기는 return 키워드를 만나면 함수 실행을 중단 후 함수를 호출한 코드로 돌아간다. return 키워드 이후에 있는 코드는 실행되지 않는다. 함수는 반환을 생략할 수 있으며 undefined 를 반환한다.
콜백 함수
콜백함수는 특정 이벤트가 발생했을때 시스템이 의해 호출되는 함수이다.
자바스크립트 함수가 가진 일급 객체라는 특성으로 함수는 변수와 같이 사용 될 수 있다.
콜백 함수는 매개변수를 통해 전달되고 전달받은 함수는 내부에서 어느 특정시점에 실행된다.
//setTimeout의 매개변수로 전달된 'hi'를 출력하는 함수는
//지정한 시간인 1초가 흐른후 실행된다.
setTimeout(() => {
console.log('hi');
}, 1000);Arrow Function
화살표 함수를 이용하여 function 키워드 대신 간략한 방법으로 함수 선언이 가능하다. 화살표 함수는 익명으로만 사용가능하므로 함수 표현식을 이용하여 작성해준다.
