안녕하세요.
Hynn 입니다.
이번 포스팅에서는 함수표현식, 그리고 현재 가장 자주쓰이는 Arrow Function 사용법에 대해서도 알아보도록 하겠습니다.
1. 기본 함수 표현식
현재 기초적인 함수표현식을 작성한 예시입니다.
아래의 코드에서는 hello 라는 변수 내에 함수를 담고 있는 변수임을 볼 수 있습니다.
let hello = function () {
return "1"
}
console.log(hello)
이를 실행하면 값이 1이 나와야하지만, console.log는 1이 출력되지 않을 것입니다.
즉, 위와 같이 단순히 hello 를 호출하면, 함수를 호출하므로, 함수가 실행되지는 않습니다.
따라서 이를 실행하려면 아래와 같이 함수를 실행해야 합니다.
let hello = function () {
return "1"
}
console.log(hello())
let helloText = hello()
console.log(helloText)위와 같은 형태를 함수표현식이라고 합니다.
기존의 함수 작성은, 함수 선언식이라고 합니다.
이를 각각 작성해보면 아래와 같습니다.
// 함수 표현식
let a = function () {
return 1
}
// 함수 선언식
function b() {
return 2
}
이 두개의 차이를 간단하게 살펴보도록 하겠습니다.
이 코드의 차이를 알 수 있는 가장 쉬운방법은, 함수보다 위줄에 각각 함수를 호출해보면 바로 이해가 가능합니다.
테스트를 해보며나 함수 선언식으로 작성된 b는 올바르게 값이 출력되지만, a는 출력되지 않을 것입니다.
이 개념을 바로 "호이스팅"이라고 합니다.
이 호이스팅 개념에 대한것은 별도의 포스팅으로 작성하여 다룰 예정입니다.
2. 화살표 함수
함수 표현식을 더 간결하고 빠르게 작성하는 방법이 바로 화살표 함수입니다.
이를 Arrow Function 이라고 합니다.
이를 간단하게 작성해보겠습니다.
// 함수 표현식
let a = function () {
return 1
}
// 화살표 함수
let a = () => {
return 1
}
함수표현식에서 function 도 생략하고 간략하게 작성하 수 있습니다.
이후에 호이스팅 개념을 이해한다면 더 깊은 이해가 될 것입니다.
화살표 함수 역시, 함수 표현식과 마찬가지로 호이스팅이 발생하지는 않습니다.
따라서 코드의 순서가 중요하다고 할 수 있습니다.
3. 콜백함수
콜백함수부터는 다소 이해가 필요합니다.
예시를 들기 위해 아래의 코드를 한번 작성해보았습니다.
const checkMood = (mood) => {
if (mood === 'good') {
sing()
} else {
cry()
}
};
const cry = () => {
console.log('I am crying');
};
const sing = () => {
console.log('I am singing');
};
const dance = () => {
console.log('I am dancing');
};
checkMood('cry');
위의 코드는 인자로 받는 mood 의 값에 따라, 정해진 함수를 실행하는 전형적인 조건문을 사용한 기본 작성문입니다.
여기서 이를 가변적으로 처리하도록 하고싶을때, 우리는 콜백함수를 처리할 수 있습니다.
이를 위해 코드를 수정하면 아래와 같이 적용이 가능합니다.
const checkMood = (mood, goodCallback, badCallback) => {
if (mood === 'good') {
goodCallback();
} else {
badCallback();
}
};
위와 같이 작성하면, 매개변수가 3개로 늘어나고, 2번째,3번째는 good 에 대한 callback 함수, 그리고 bad에 대한 callback 함수를 처리하게 됩니다.
이를 실제로 실행하면 아래와 같이 호출할 수 있게 됩니다.
checkMood('cry', sing, cry);이렇게 작성하게되면, 좋을때는 sing, 슬플때는 cry 를 호출하게 됩니다.
당연히 매개변수를 다르게 삽입하면 그에 맞게 매개변수에 담게 되면 자연스럽게 처리하게 됩니다.
즉 여기서는 매개변수에 함수를 넘김으로써, 함수를 실행하도록 처리하는 것입니다.
이를 이용하면 유연한 동작을 사용할 수 있게 됩니다.
이후에도 Callback 함수는 array 에서 다양하게 사용할 예정입니다.
다음 포스팅에서 뵙도록 하겠습니다.
댓글