Skip to Content
BlogJavaScript 정리기초 정리함수 기초 선언식/표현식

함수 기초 선언식/표현식

함수 선언식 / 표현식

함수 선언식 (Function Declaration)

function 키워드로 시작해서 함수 이름을 바로 명시하는 방식이다.

function greet(name) {
  return `안녕하세요, ${name}님`;
}
console.log(greet("고리")); // 안녕하세요, 고리님
  • 호이스팅된다. 즉 함수 선언 코드보다 위에서 호출해도 정상 동작한다.
console.log(sayHi()); // 정상 동작
 
function sayHi() {
  return "hi";
}

함수 표현식 (Function Expression)

함수를 변수에 할당하는 방식이다.

const greet = function (name) {
  return `안녕하세요, ${name}님`;
};
console.log(greet("고리")); // 안녕하세요, 고리님
  • 변수에 담기는 값이기 때문에, 변수 선언 자체는 호이스팅되지만 함수 할당은 실행 시점에 이뤄진다. 그래서 선언보다 위에서 호출하면 에러가 난다.
console.log(sayHi()); // TypeError: sayHi is not a function
 
const sayHi = function () {
  return "hi";
};

화살표 함수 (Arrow Function)

함수 표현식을 더 간결하게 쓸 수 있는 ES6 문법이다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
 
// 매개변수가 1개면 괄호 생략 가능
const square = x => x * x;
 
// 중괄호를 쓰면 return을 명시해야 함
const multiply = (a, b) => {
  return a * b;
};

화살표 함수는 문법만 간결한 게 아니라 this를 바인딩하는 방식도 일반 함수와 다른데, 이 부분은 함수 심화(스코프/this) 글에서 자세히 다룬다.

선언식 vs 표현식, 언제 뭘 쓸까

구분호이스팅특징
함수 선언식함수 전체가 호이스팅됨어디서든 호출 가능
함수 표현식변수만 호이스팅됨(초기화는 실행 시점)선언 이후에만 호출 가능

호이스팅에 의존하는 코드가 가독성을 해친다는 이유로, 화살표 함수를 활용한 표현식 방식을 선호하는 경우가 많다.



매개변수 / 기본값

기본 매개변수 (Default Parameters)

인자가 전달되지 않았을 때 사용할 기본값을 매개변수 자리에서 바로 지정할 수 있다. ES6에서 도입됐다.

function greet(name = "익명") {
  console.log(`안녕하세요, ${name}님`);
}
 
greet();      // 안녕하세요, 익명님
greet("고리"); // 안녕하세요, 고리님
  • undefined가 전달된 경우에만 기본값이 적용된다. null이나 0, ""처럼 falsy한 값을 명시적으로 넘기면 기본값이 아니라 그 값 그대로 사용된다.
function test(value = "기본값") {
  console.log(value);
}
 
test(undefined); // 기본값
test(null);      // null
test(0);         // 0

기본값에 표현식 사용

function createUser(name, id = Date.now()) {
  return { name, id };
}

앞의 매개변수를 기본값 계산에 활용

function order(price, tax = price * 0.1) {
  return price + tax;
}
console.log(order(1000)); // 1100

나머지 매개변수와 함께 쓰기

고정된 매개변수 뒤에 나머지 값을 모두 받고 싶을 때는 rest 매개변수를 함께 쓴다. (spread/rest 상세 내용은 “변수와 자료형” 글 참고)

function introduce(name, ...hobbies) {
  console.log(`${name}님의 취미: ${hobbies.join(", ")}`);
}
introduce("고리", "독서", "영화감상", "등산");
// 고리님의 취미: 독서, 영화감상, 등산


템플릿 리터럴

함수 안에서 문자열을 조합할 때도 템플릿 리터럴이 자주 쓰인다. 자세한 문법은 “변수와 자료형” 글에서 다뤘으니, 여기서는 함수와 함께 쓰이는 대표적인 패턴만 짚는다.

function createGreeting(name, age) {
  return `${name}님은 ${age}살입니다.`;
}
console.log(createGreeting("고리", 30));
// 고리님은 30살입니다.

함수의 반환값을 문자열로 가공할 때, 특히 여러 변수를 조합해야 하는 상황에서 문자열 덧셈(+)보다 가독성이 좋아 실무에서 기본으로 사용된다.

function formatPrice(price) {
  return `${price.toLocaleString()}원`;
}
console.log(formatPrice(15000)); // 15,000원


마지막 수정