목차
함수 반환문(Function Return Statement)
함수는 return 키워드를 사용해 반환문(return statement)을 설정할 수 있다. JavaScript 엔진은 함수가 사용될 때 return 키워드를 확인하면 실행을 중단하고 값을 반환한다. 함수에 return이 없으면 출력도 없다.
function sum(num1, num2) {
// 함수를 사용하면 반환되는 값
return num1 + num2
// 이 코드는 무시됨
console.log('숫자1 + 숫자2 =', num1 + num2)
}
sum(9, 11) // 20
함수는 return 키워드가 없어도 암묵적으로 항상 값을 반환한다. 명시적으로 return 키워드를 사용해 값을 반환하지 않으면 암묵적으로 undefined라는 값을 반환한다.
function sum(num1, num2) {
num1 + num2
// 암묵적 결과 반환
// return undefined
}
함수 표현식(Function Expression)
함수처럼 값을 반환하는 것 중 하나는 표현식(expression)이다. JavaScript에서 표현식은 전달되기 전에 평가(계산)되어야 하는 값으로 정의된다. 예를 들어, 숫자를 함수에 전달하면 즉시 사용할 수 있지만, 표현식(예: 21 + 3)을 전달하면 해당 표현식을 함수에 전달하기 전에 먼저 평가한다. 마찬가지로 함수를 호출해서 반환 값을 다른 함수에 전달할 때도 값을 사용하기 전에 함수를 먼저 평가한다.
// 숫자를 함수에 전달
const result = sum(5, 10)
console.log(result) // 15
// 표현식을 함수에 전달
const result = sum(21 + 11, 10)
console.log(result)
// JavaScript 엔진 내부 처리 과정
// [단계 1] 표현식 평가 21 + 11 - 결과 값: 32
// [단계 2] sum(32, 10) 함수 호출 - 결과 값: 42
호이스팅(Hoisting)
호이스트(Hoist)는 끌어올리거나 감아올리는 장치를 말한다. function 키워드를 사용해 함수를 선언하면 현제 코드 영역(scope)의 맨 위로 끌어올려지는 듯한 현상을 호이스트 현상, 또는 호이스팅이라고 한다. 모든 함수 선언을 코드 작성 영역 맨 위로 끌어올린다고 이해할 수 있겠다.
// 사용자가 작성한 코드
함수()
function 함수() {
console.log('함수가 실행되었어요!')
}
// JavaScript 엔진에서 처리된 코드
function 함수() {
console.log('함수가 실행되었어요!')
}
함수()
var 변수를 선언할 때도 호이스팅 현상이 일어난다. 변수 선언부는 호이스팅되고, 변수에 값을 할당하는 부분은 순서에 따라 처리한다. let 변수나 const는 호이스트 현상이 일어나지 않는다.
// var 변수 선언 호이스트 현상 일어남
console.log(myName) // undefined
var myName = '꼬리'
// let 변수 선언 호이스트 현상 일어나지 않음
console.log(myName) // Error
let myName = '꼬리'
화살표 함수 표현식(Arrow Function Expression)
함수를 선언하거나 함수 표현식을 사용하여 함수를 만드는 방법 외에도 화살표 함수 표현식을 사용하여 함수를 만들 수 있다. 화살표 함수는 뚱뚱한 화살표(Fat Arrow =>) 모양을 사용한다. (날씬한 화살표는 -> 기호를 사용한다.)
함수 표현식과는 다르게 function 키워드 없이 ()와 {} 사이에 =>를 사용한다. 화살표 함수 표현식은 혹시나 함수가 아닌 다른 값을 넣을 수도 있기 때문에 const 상수로 선언하는 것을 권장한다.
const 화살표_함수_표현식 = (매개변수1, 매개변수2) => {
// ...
}
매개변수 개수에 따른 화살표 함수 구문의 변화
화살표 함수 표현식은 매개변수 개수에 따라 구문이 변할 수 있다.
- 0개: 소괄호를 밑줄(_)로 변경할 수 있다. (밑줄은 유효한 매개변수 이름일 뿐, 암묵적으로 아무 값도 받지 않음을 나타낸다. 사실상 매개변수가 1개여서 소괄호를 생략했다고 보면 된다.)
- 1개: 소괄호를 생략할 수 있다.
- 2개 이상: 소괄호 생략을 허용하지 않는다.
// 0개
let readABook = _ => {
console.log('"책"을 읽다.')
}
// 1개
let readABook = bookName => {
console.log('"' + bookName + '"을 읽다.')
}
readABook('오만과 편견')
// 2개 이상
let readABook = (bookName, day) => {
console.log(day + '일에 걸쳐 "' + bookName + '"을 읽다.')
}
암묵적 반환에 따른 화살표 함수 구문의 변화
화살표 함수 표현식은 다음과 같은 조건이 충족되면 자동으로 반환문을 생성한다.
- 함수에 한 줄의 코드만 작성한다.
- 해당 코드를 중괄호({})로 묶지 않는다.
암묵적 반환 기능을 사용하면 아래처럼 세 줄의 코드를 한 줄로 줄일 수 있다.
// 함수 표현식
const px2rem = function px2rem(pxValue) {
return pxValue / 16 + 'rem'
}
// 화살표 함수 표현식(암묵적 반환)
const px2rem = pxValue => pxValue / 16 + 'rem'
화살표 함수 표현식과 일반 함수 표현식을 사용하는 방법에 대한 간단한 기준은 다음과 같다.
- 화살표 함수 표현식은 익명 함수가 필요한 경우 사용. 익명 함수가 유용하게 사용되는 경우는 “콜백(Callback)”이다.
- 함수를 선언할 때는 함수 선언을 사용
오늘 하루를 돌아보며
10년 전 C언어를 배우던 때가 생각난다. 그때는 처음으로 코딩이라는 걸 배우면서 무슨 소린지 하나도 이해도 안 되고 너무 어려웠는데, JavaScript를 처음 배우는 지금은 이상하게 그렇게 어렵지 않다. 코딩과 멀리한 지 최소 6년은 됐는데 대학생 때 배웠던 게 남아있는 건지 프로그래밍 언어가 낯설지 않다. 함수나 반환문, 자료형, 변수나 상수에 대한 설명이 익숙하다. 표현하는 방식만 조금씩 다를 뿐 개념 자체는 이미 알고 있다. 다 까먹은 줄 알았는데 강의를 들으면서 기억이 나는 게 신기하다.
예전에 C언어나 C++을 배울 떄 변수 이름을 항상 x, y, z, a, b, c 등을 사용했는데, 이제는 변수의 역할은 무엇인지, 함수의 기능은 무엇인지 고려하게 되었다. 의미 있는 이름을 붙여주기 위해 고민한다. 단어의 영어 표현을 검색하고 알맞는 역할과 기능을 부여한다. 생각보다 복잡하고 번거롭지만, 의미 있는 일을 하는 것 같아 기분이 좋다. 사소한 변수 이름 하나 가지고 검색까지 해가면서 영어 이름을 붙이는 내가 낯설지만 뿌듯하다.
