함수(function, 기능)란?

눌렀을 때 어떠한 기능이 작동하는 버튼이 있다면 함수는 이 버튼이라고 할 수 있다. 그리고 이 버튼은 언제든지 사용할 수 있다. 함수 호출이 바로 버튼을 누르는 것이고, 버튼을 눌렀을 때의 기능이 함수의 기능인 것이다. 또한 함수는 입력값과 출력값을 가질 수 있으며 호출 후에는 호출 된 자리로 반드시 돌아오게(return)되고 return값을 가진다.

함수 선언과 호출

콘솔창에 'hello world'를 찍고 10을 return하는 기능을 가지는 함수 'hello'를 선언하고 호출해보자.

// 함수 'hello' 선언
function hello(){
  console.log('hello world')
  return 10
}

// 함수 'hello' 호출
hello(); //

매개 변수(parameter)와 인자(argument)

함수가 어떠한 값을 입력받을 수 있도록 하는 것이 매개변수이고 이때 입력되는 값이 인자이다.

아래의 코드에서 para1과 para2가 매개변수이고 10과 20이 인자 이다. 이 둘의 차이를 잘 기억해두자.

function hello(para1, para2){
  return para1+para2
}

hello(10, 20)
// 매개변수 para1, para2가 각각 인자 10, 20을 받아 더하여 30을 return한다.

또한 매개변수에 초기값을 줄 수 있다.

function hello(para1=1){
  return para1
}
console.log(para1) // 1

함수 표현 방법

아래의 함수는 표현 방법만 다를 뿐, 모두 같은 기능을 하는 함수이다.

함수 선언식

function foo(para1, para2){
  return para1 + para2
}

함수 표현식

let foo = function(para1, para2){
  return para1 + para2
}

화살표 함수

let foo = (para1, para2) => {
  return para1 + para2
}

화살표 함수는 함수의 본문에 return문만 있는 경우 return과 {}중괄호를 생략할 수 있다.

let foo = (para1, para2) => para1 + para2 // 정상 작동
let foo = (para1, para2) => { para1 + para2 } // 에러

return을 생략할 경우 return과 중괄호 모두 생략해야 하고, 중괄호만 써줄 경우 에러가 발생한다.

let foo = (para1, para2) => (para1 + para2) // 정상 작동

혹은 return은 생략하고 ()소괄호만 써주는 것은 가능하다.

let foo = para1 => console.log('파라미터 1개는 소괄호 생략')

또한 파라미터가 1개일 경우에는 파라미터의 ()소괄호도 생략할 수 있다.