자바스크립트에서 함수를 사용하는 것은 반복될 수 있는 작업을 따로 정의해두고 꺼내 쓰기 위함입니다.
함수를 정의하는 방법들에 대해 알아보겠습니다.
함수 선언문
함수 선언문은 function 정의문만 존재하고 별도의 할당 명령이 없습니다. 함수명은 필수로 정의해야합니다. 그리고 함수의 실행문보다 나중에 정의하는 것이 가능합니다.
a(); // 호출 가능
function a() {
...
}함수 표현식
함수 표현식은 정의한 function을 별도의 변수에 할당하는 방법입니다. 이때 함수명을 정의한 기명 함수 표현식 과 함수명을 정의하지 않은 익명 함수 표현식으로 나뉩니다.
기명 함수 표현식
var b = function a() {
...
}
b();
a(); //에러변수명은 b 이고 함수명은 a 입니다. 하지만 외부에서 함수명으로 함수를 호출할 수는 없습니다.
익명 함수 표현식
var c = function () {
...
}
c();변수명 c 가 곧 함수명이 됩니다.
함수 호이스팅
호이스팅이란, 자바스크립트 코드가 실행되기 전 선언된 함수명, 변수명, 매개변수명을 모두 수집하여 해당 스코프 최상단으로 끌어올리는 것입니다. 함수 선언문, 함수 표현식으로 정의된 함수 모두 호이스팅의 대상이 됩니다.
다만 주의할 점은, 함수 선언문은 전체를 호이스팅하는 반면 함수 표현식은 변수 선언부만 호이스팅 합니다. 변수의 할당 부분은 그자리에 남겨둡니다.
a();
b();
function a(){ //수집 대상 1(함수)
console.log("함수 선언문");
}
var b = function (){ //수집 대상 2(변수)
console.log("함수 표현식");
}다음은 호이스팅을 마친 코드입니다.
var a = function a(){ //수집 대상 1의 함수 전체
console.log("함수 선언문");
}
var b; //수집 대상 2의 선언 부분
a(); //함수 선언문
b(); //에러 : 초기화 하기전에 접근할 수 없다.
b = function (){ //수집 대상 2의 할당 부분
console.log("함수 표현식");
}함수 선언문은 함수 전체를 호이스팅하기 때문에 선언 전에 호출해도 아무 문제 없이 실행할 수 있고, 이는 문제를 발생시킬 수 있습니다. 프로그래머는 사람이기 때문에 위에서 아래로 코드를 작성하는 것에 익숙하여 자칫하면 호이스팅을 간과하여 실수 할 수 있기 때문입니다. 함수는 함수 표현식을 사용하는게 더 안전합니다.
함수의 호이스팅은 함수 선언문만 유효하다 라고 기억하면 됩니다.
화살표 함수
ES6부터 화살표를 사용해 함수를 선언하는 방법인 화살표 함수가 처음 도입되었습니다. 일반적으로 function 키워드를 사용하는 것보다 좀 더 간결하게 쓸 수 있어 자주 사용됩니다.
var a = () => {
...
}매개변수가 있다면 다음과 같이 표현하면 됩니다.
var sum = (a,b) => {
return a + b
}함수의 구현부가 reutn 키워드로 시작한다면 return과 중괄호를 생략할 수 있습니다.
var sum = (a,b) => a + b단 return 하는 값이 중괄호로 표현된 객체라면 함수의 중괄호를 바로 생략할 수 없습니다. 함수의 범위를 나타내는 중괄호와 객체의 중괄호가 겹치기 때문입니다. 이때는 데이터임을 나타내주기위해 소괄호로 감싸주어야 return과 함수의 중괄호를 생략할 수 있습니다.
var sum = () => {
return {name:"홍길동"}
}var sum = () => ({name:'홍길동'})함수의 매개변수가 하나라면 소괄호를 생략할 수 있습니다.
var a = b => {
...
}즉시 실행 함수
즉시 실행 함수(IIFE, Immediately-Invoked Function Expression)은 함수를 선언하고 바로 실행할 수 있게 해줍니다. 즉시 실행 함수의 대표적인 사용 사례는 코드의 난독화가 있습니다.
기존의 함수는 선언하고 함수를 실행하는 코드를 작성해야 했습니다.
const a = 7;
const double = () => {
console.log(a * 2);
}
//함수 실행 코드
double();위의 코드를 즉시 실행 함수로 변화하면 다음과 같습니다. 소괄호 두개 중 앞쪽 소괄호에 실행할 익명 함수를 넣으면 됩니다.
const a = 7;
(() => {
console.log(a * 2);
})()즉시 실행 함수는 다음과 같은 패턴으로 사용할 수 있습니다. 화살표 함수를 사용한 패턴은 하나이며, function 키워드를 사용한 패턴은 4개가 있습니다.
;(() => {})() //(F)()
;(function () {})() //(F)()
;(function () {}()) //(F())
;!function () {}() //!F()
;+function () {}() //+F()즉시 실행 함수의 매개변수를 사용할 수도 있습니다.
;((a, b) => {
console.log(a);
console.log(b);
})(window, document)일급 객체
자바스크립트의 함수도 기본적으로는 객체의 한 종류로, 일급 객체라고도 말합니다.
함수는 변수, 상수에 할당될 수 있고, 다른 함수의 인자로 전달될 수 있습니다. 또 다른 함수의 결과값으로서 반환될 수도 있습니다.
변수에 할당
function isOddNum (number) {
console.log(
(number % 2 ? '홀' : '짝')
+ '수입니다.'
);
return number % 2 ? true : false;
};
const checkOddNum = isOddNum; // 뒤에 괄호를 붙이지 않습니다.
console.log(checkOddNum(7));객체와 배열의 값으로 할당
let person = {
name: '홍길동',
age: 30,
married: function (formal) {
return formal
? '기혼입니다.'
: '미혼입니다.';
}
};
console.log(person.married(true));
console.log(person.married(false));let arithmetics = [
(a, b) => a + b,
(a, b) => a - b,
(a, b) => a * b,
(a, b) => a / b
];
for (arm of arithmetics) {
console.log(arm(7, 5));
}다른 함수의 인자로 전달
전달받는 함수를 고차 함수, 전달되는 함수를 콜백 함수라고 합니다.
let list = [1, 2, 3, 4, 5];
// 고차 함수
function writeArray (array, func) {
for (item of array) {
func(item);
}
}
doInArray(list, console.log); // console.log는 콜백 함수입니다.다른 함수의 결과값으로 반환
function returnFunc (name, formal) {
return formal
? function () {
console.log(`${name}`);
} : function () {
console.log(`${name}`);
}
}
const fn1 = returnFunc('함수1', true);
const fn2 = returnFunc('함수2', false);
fn1();
fn2();매개변수
함수의 매개변수에 대해 알아보겠습니다.
default 파라미터
function add(a = 2, b = 4) {
console.log(`${a} + ${b}`);
return a + b;
}
console.log(
add(), // 2 + 4
add(1), // 1 + 4
add(1, 3) // 1 + 3
);arguments
함수 내에서 사용가능한 지역 변수입니다.
실제 배열은 아니지만 배열의 형태를 한 객체입니다. 함수 호출 시 전달된 모든 인수들을 배열 형태로 가집니다.
단, 화살표 함수에서는 arguments를 사용할 수 없습니다.
function add(a, b) {
console.log('1.', arguments);
console.log('2.', arguments[0]);
console.log('3.', typeof arguments);
return a + b;
}
console.log(
'4.', add(1, 3, 5, 7)
);rest 파라미터
특정 매개변수들 뒤에 정해지지 않은 수의 매개변수들을 받을 때 ...기호를 사용하여 받습니다.
마지막 인자로만 사용이 가능하고 arguments와 달리 실제 배열입니다.
function classroom (teacher, ...children) {
console.log(children);
}
classroom('선생님', '민지', '하니', '해린');