함수

function square(n) { return n * n; }을 한 번 써 두면 square(4)는 16, square(9)는 81처럼 어떤 수를 넣어도 답을 줍니다.

일 한 덩어리에 이름 붙이기

여러분은 이미 다른 사람이 만든 함수를 써 왔습니다. console.log, Math.round, toUpperCase가 모두 함수입니다. 함수는 한 가지 일을 하는, 이름 붙은 코드 묶음입니다. 한 번 정의해 두면 이름으로 몇 번이든 부를(호출할) 수 있습니다. 같은 줄을 여기저기 복사하지 않아도 되고, 프로그램을 더 큰 덩어리로 생각할 수 있게 됩니다. 긴 계산 목록 대신 「팁을 계산하고, 금액을 나눈다」처럼 생각하게 됩니다.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // Hello, Ana!
console.log(greet("Ji"));    // Hello, Ji!

정의는 키워드 function, 함수 이름, 괄호 안의 매개변수 목록 순서로 씁니다. 매개변수는 함수를 부를 때 값을 받는 변수이고, 여기서는 name입니다. 중괄호 안의 본문이 일을 합니다. greet("Ana")를 부르면 인수라고 하는 값 "Ana"가 매개변수 name에 들어가고 본문이 실행됩니다.

return은 값을 돌려줍니다

키워드 return은 함수를 끝내고, 함수를 부른 자리로 값을 돌려보냅니다. greet("Ana")라는 호출은 식이고, 그 값은 돌려받은 값입니다. 그래서 console.log 안에 넣을 수도, 계산 속에 넣을 수도, const msg = greet("Ana");처럼 변수에 저장할 수도 있습니다.

값을 돌려주는 것과 출력하는 것은 다르며, 처음 배울 때 자주 헷갈립니다. console.log만 부르는 함수는 화면에 무언가를 보여 주지만 아무것도 돌려주지 않습니다. 그 호출의 값은 undefined라서 계산에 쓸 수 없습니다. 원칙으로, 함수는 결과를 돌려주게 하고 출력할지는 함수를 부르는 쪽에서 정하게 하세요.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // 50
addPrint(2, 3);      // prints 5, but returns nothing usable

return은 함수를 그 자리에서 멈추기도 합니다. 같은 흐름에서 그 뒤의 줄은 실행되지 않습니다. 이를 이용하면 특별한 경우를 먼저 처리할 수 있습니다. 함수 맨 위에 if (n < 0) return "negative";를 두고, 보통의 경우는 그 아래에 씁니다.

매개변수 여러 개와 기본값

함수는 쉼표로 나눈 매개변수를 여러 개 받을 수 있고, 인수는 순서대로 짝지어집니다. add(2, 3)에서 a는 2, b는 3입니다. 호출할 때 인수를 빠뜨리면 그 매개변수는 undefined가 됩니다. 아무것도 넘기지 않았을 때 쓸 기본값을 줄 수도 있습니다. function tip(bill, rate = 0.15)는 부르는 쪽이 다른 비율을 주지 않으면 0.15를 씁니다.

화살표 함수

요즘 자바스크립트에는 작은 함수를 더 짧게 쓰는 화살표 함수도 있습니다. const square = (n) => n * n;은 리드에 나온 square 함수와 같은 뜻입니다. 본문이 식 하나면 중괄호도 return도 없이 그 값이 저절로 돌려집니다. 요즘 코드에서는 화살표 함수를 어디서나 보게 됩니다.

안에서 만든 변수는 안에 머뭅니다

함수 안에서 선언한 매개변수와 변수는 그 함수 안에서만 있습니다. 이를 스코프(유효 범위)라고 합니다. 서로 다른 두 함수가 각자 total이라는 변수를 가져도 부딪치지 않고, 함수 밖의 코드는 함수 안의 변수를 볼 수 없습니다. 함수는 밖에서 선언한 변수를 읽을 수 있지만, 가장 깔끔한 함수는 필요한 것을 모두 매개변수로 받고 결과를 모두 return으로 돌려줍니다. 그래야 그 함수만 따로 읽어도 이해할 수 있습니다.

function 이름(매개변수) { return 결과; } const 이름 = (매개변수) => 결과;

함수	한 가지 일을 하는 이름 붙은 코드 묶음
호출	함수를 실행하는 것. 이름(인수)
매개변수	정의에 있는, 값을 받는 변수
인수	호출할 때 넘기는 값
return	함수를 끝내고 값을 돌려줌
기본 매개변수	rate = 0.15. 인수가 없을 때 쓰는 값
화살표 함수	(n) => n * n
스코프(유효 범위)	변수가 보이는 범위. 함수 안의 것은 안에 머묾

무엇이 출력될까요?

function double(n) {
  return n * 2;
}
console.log(double(7));

무엇이 출력될까요?

function add(a, b) {
  return a + b;
}
console.log(add(2, 3) * add(1, 1));

무엇이 출력될까요?

function minus(a, b) {
  return a - b;
}
console.log(minus(3, 10));

무엇이 출력될까요?

function f(x) {
  return x + 1;
  console.log("hi");
}
console.log(f(1));

2
hi, then 2
2, then hi

무엇이 출력될까요?

function show(n) {
  console.log(n);
}
const r = show(5);
console.log(typeof r);

5, then number
5, then undefined
Only undefined

무엇이 출력될까요?

const triple = (n) => n * 3;
console.log(triple(4));

무엇이 출력될까요?

function tip(bill, rate = 0.1) {
  return bill * rate;
}
console.log(tip(50));

무엇이 출력될까요?

function tip(bill, rate = 0.1) {
  return bill * rate;
}
console.log(tip(50, 0.2));

무엇이 출력될까요?

function sign(n) {
  if (n < 0) return "neg";
  if (n === 0) return "zero";
  return "pos";
}
console.log(sign(0));

function area(w, h)를 area(3, 5)로 부를 때 w, h와 3, 5를 각각 무엇이라 할까요?
- w, h는 매개변수, 3, 5는 인수
- w, h는 인수, 3, 5는 매개변수
- 넷 다 반환값

핵심 정리

function 이름(매개변수) { ... }로 정의하고 이름(인수)로 부릅니다.
인수는 순서대로 매개변수와 짝지어집니다.
return은 함수를 끝내고 값을 돌려줍니다. 출력은 돌려주는 것이 아닙니다.
기본 매개변수는 빠진 인수를 채웁니다.
화살표 함수: (n) => n * n.
함수 안의 변수는 안에 머뭅니다(스코프).