[JavaScript] 함수 (function)

학습 목표

• 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수(function)란?

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록. 혹은 작은 기능의 단위.

구구단 2단 출력을 예시로 들어보겠다. 코드는 다음과 같다.

let num = 2;
console.log(2*1);
console.log(2*2);
console.log(2*3);
console.log(2*4);
console.log(2*5);
console.log(2*6);
console.log(2*7);
console.log(2*8);
console.log(2*9);

여기서 2단이 아닌 3단, 4단을 출력하려면 이 코드들을 반복해야 할 것이다.
숫자를 지정하여 엔터만 누르면 그에 맞는 구구단을 출력할 순 없을까?
다른 예시의 코드를 보겠다.

function mulTablePrinter (num) {
  console.log(num*1);
  console.log(num*2);
  console.log(num*3);
  console.log(num*4);
  console.log(num*5);
  console.log(num*6);
  console.log(num*7);
  console.log(num*8);
  console.log(num*9);
}

위의 코드는 입력된 값에 따라 정해진 구구단이 실행된다. 이를 함수라 한다.

함수의 의미

• 코드의 묶음
• 기능의 단위
• 입력과 출력간의 매핑(mapping)
• 호출 후에 반드시 돌아온다 (return)

함수의 구성

함수는 keyword, name, parameter, body로 구성된다.

function printHelloUser(name) {
  console.log("Hello " + name + "!")
}

• keyword : funtion
• name : printHelloUser
• parameter : name
• body : console.log("Hello " + name + "!")

함수의 사용

1. 함수의 선언(declaration) : 함수를 메모리에 저장

function cal(param1, param2) {
  console.log(param1 + param2);
  return param1 * 10; 
}

2. 호출(call, invocation)

cal(10, 20)

입력과 출력

함수는 입력을 받아 항상 출력값을 반환한다.

• 함수 내부에서 return을 한 경우 -> 출력값이 return문의 값

function getTriangleArea(base, height) {
  let triangleArea = (base * height) /2;
  return triangleArea;
}
console.log(getTriangleArea(2,4)) // expected output : 4

• 함수 내부에서 return을 하지 않는 경우 -> 출력값이 undefiend

function getTriangleArea(base, height) {
  let triangleAtrea = (base*height)/2;
}
console.log(getTriangleAtre(2,4)) // expected output : undefined

함수의 종류

1. 함수 선언식

function getTriangleArea(base, height) {
  let triangleArea = (base * height) /2;
  return triangleArea;
}

2. 함수 표현식 : 변수에 익명 함수(Anonymous function) 할당

const getTriangleArea = function (base, height) {
  let triangleARea = (base * height) / 2;
  return triangleArea;
}

3. 화살표 함수 : ES6 문법으로 추가 function키워드를 =>로 축약해서 사용

const getTriangleArea = (base, height) => {
  let triangleArea = base * height;
  return triangleArea;
}

• 만약 함수의 본문(body)에 return문만 있는 경우, return과 {}를 생략 가능하다.

const getTriangleArea = (base, height) => base*height/2
// O, 정상 작동
const getTriangleArea = (base, height) => { base * height / 2 }
// X, undefined 리턴

• return 문에서 소괄호를 사용할 수 있다.

const getTriangleArea = (base, height) => (base * height /2)
// O, 정상 작동

• 함수 내의 표현식이 2줄 이상인 경우, return과 {}를 명시적으로 쓰는 것이 좋다.

매개변수(parameter), 전달인자(argument)

• 매개변수 : 함수의 선언시에 입력 값을 변수로 적어주는 값
• 전달인자 : 함수의 호출시에 전달해 주는 값.

function getTriangleArea (base, height) {} // base, height => parameter
getTriangleArea(2,4) // 2,4 => argument