자바스크립트 코드는 위에서부터 아래로 한줄씩 실행되는데 함수 선언문을 먼저 살펴보고 이에 이어서 함수 표현식과 화살표 함수에 대해서 정리해보고자한다.
함수 선언문
함수 선언문은 아래와 같은 형식으로 작성하는데 함수와 함수명, 매개변수(필요하다면 작성)를 작성한다. 예제 1에서 사용하는 변수 msg는 지역변수이기 때문에 함수 내에서만 사용이 가능하다.
// 1
function hello(name) {
let msg = `안녕하세요 ${name}님!`
console.log(msg)
}
hello('Lia') // 안녕하세요 Lia님!
hello('Mike') // 안녕하세요 Mike님!
hello('Emaily') // 안녕하세요 Emaily님!
// 2
function error() {
alert('에러가 발생했습니다. 다시 시도해주세요!')
}
error() // 에러가 발생했습니다. 다시 시도해주세요!여기서 간단하게 지역변수와 전역변수에 대해 간단한 예제를 통해 짚고 넘어가려고 한다. msg라는 변수를 하나는 전역변수로 하나는 지역변수로 사용했는데 console을 찍어보면 가장 첫번째 콘솔에서는 '메세지를 남겨주세요.' 라는 문구가 찍히고 hello 함수를 3번 실행시키면서 지역변수에 담긴 내용이 출력된다. 그 후 마지막 console에서 또 다시 전역변수의 문구가 출력된다.
이렇게 함수 내부에서만 사용할 수 있는 변수를 지역변수라고 하고. 그 외의 밖에서 사용할 수 있는 변수를 전역변수라고 한다. 전역변수가 많아지만 헷갈리기 때문에 되도록이면 지역변수를 활용하는 것이 좋은 것 같다.
// 전역변수
let msg = '메세지를 남겨주세요.'
console.log(msg) // 메세지를 남겨주세요.
function hello(name) {
// 지역변수
let msg = `안녕하세요 ${name}님!`
console.log(msg)
}
hello('Lia') // 안녕하세요 Lia님!
hello('Mike') // 안녕하세요 Mike님!
hello('Emaily') // 안녕하세요 Emaily님!
console.log(msg) // 메세지를 남겨주세요.이어서 매개변수가 있을 때와 없을 때의 차이를 조금 더 살펴보려고 하는데 매개변수에 default 값을 넣어줄 수 있다는 것을 처음 알았다. 매개변수가 없으면 없었지 default 값을 넣어서 코드를 실행해본 적이 없었는데 이번에 처음 시도해봤다.
default 값은 매개변수가 없을 때만 적용이 되기 때문에 매개변수가 있다면 그 매개변수를 가지고 함수가 실행된다.
function hello(name = 'hello') {
let msg = `안녕하세요 ${name}님!`
console.log(msg)
}
hello() // 안녕하세요 hello님!
hello('Lia') // 안녕하세요 Lia님!
함수 선언문과 함수 표현식의 차이
함수 표현식의 경우에는 아래와 같이 작성하는데 함수 선언문과 실행하는 방식, 동작하는 방식이 동일하다. 하지만 두가지에는 차이가 존재하는데 호출할 수 있는 타이밍이 다르다고 할 수 있다.
함수 선언문의 경우에는 어디서든 호출이 가능한데 아래와 같이 작성하면 둘다 정상적으로 실행한다.
hello() 함수를 선언된 함수 아래에 놓아도, 위에 놓아도 정상적으로 실행되는데 초기화 단계에서 함수를 상단으로 끌어올려주는데 이를 호이스팅이라고 한다. 함수 선언문에서는 호이스팅이 발생하기 때문에 함수를 어디에서 호출해도 정상적으로 실행되는 것이다.
hello() // 안녕하세요 hello님!
function hello(name = 'hello') {
// 지역변수
let msg = `안녕하세요 ${name}님!`
console.log(msg)
}
hello('Lia') // 안녕하세요 Lia님!함수 표현식은 아래와 같이 작성하는데 호이스팅이 일어나지 않아 순서대로 실행된다. 그렇기 때문에 선언한 함수 아래에서 호출해야만 함수가 정상적으로 실행된다.
let hello = function(){
console.log('안녕하세요.')
}
hello() // 안녕하세요.화살표 함수
화살표 함수는 자바스크립트 ES6 문법부터 새롭게 등장한 함수인데 호이스팅이 불가능하다. 그렇기 때문에 함수를 선언한 뒤 함수를 호출해야 에러가 발생하지 않는다. 아래의 예제는 함수 선언문을 화살표 함수로 바꾼 코드인데 화살표함수는 아래와 같이 사용한다.
ES6 문법이 도입된 이후 활발하게 사용되고 있어, 프로젝트에서 가장 많이 사용했던 함수 표현 방식이다.
function hello(name){
console.log(`${name}님 안녕하세요!`)
}
hello('Lia') // Lia님 안녕하세요!
let hello = (name) => {
console.log(`${name}님 안녕하세요!`)
}
hello('Lia') // Lia님 안녕하세요!회고
프로젝트를 진행하며 가장 많이 사용했던건 화살표함수이지만 함수를 조금 더 자유롭게 사용하고 싶다면 함수 선언문을 활용해도 좋을 것 같았다. 이번에 함수 표현 방식에 대해서 다시한번 짚어보면서 매개변수에 default 값을 넣을 수 있다는 것도 새롭게 알게 되었는데 함수의 매개변수가 뭔지도 몰랐던 내가 지금은 함수를 자유롭게 사용하며, 프론트엔드 개발자로 일하고 있다는 사실이 신기하기도 했다. 기초를 하나씩 짚어보며 새롭게 알게되는 사실도 많고, 애매하게 알고 있었던 부분을 확실하게 짚고 넘어가니 다음 프로젝트에 추가적인 부분을 적용해볼 수 있을 것 같다는 생각도 들었다.
