함수의 정의

함수(Function)

• 참조 타입 중 하나로써 function 타입에 속함
• function 키워드를 통해 생성하며 호출 시 실행될 코드를 정의

함수 선언식 (Function declaration)

• 일반적인 프로그래밍 언어의 함수 정의 방식
  

function 함수명(매개변수) {
// do something
}

• 예시
  

function add(num1, num2){
    return num1 + num2
}

console.log(add(2, 7)) // 9

함수 표현식 (Function expression)

• 표현식 내에서 함수를 정의하는 방식
• 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능
  

변수키워드 함수명 = function(매개변수) {
    // do something
}

• 예시
  

const sub = function (num1, num2) {
    return num1 - num2
}

console.log(sub(7, 2))  // 5

• 표현식에서 함수 이름을 명시하는 것도 가능
• 다만 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨
  

const mySub = function namedSub(num1, num2) {
    return num1 - num2
}

mySub(1, 2)  // -2
namedSub(1, 2)  // ReferenceError : namedSub is not defined

기본 인자 (Default arguments)

• 인자 작성 시 = 문자 뒤 기본 인자 선언 가능

const greeting = function (name = 'Anonymous') {
	return `Hi ${name}`
}

console.log(greeting())  // Hi Anonymous

매개변수와 인자의 개수 불일치 허용

• 매개변수보다 인자의 개수가 많을 경우

const noArgs = function () {  // 인자 0개
	return 0
}

noArgs(1, 2, 3)  // 0

const twoArgs = function (arg1, arg2) {
	return [arg1, arg2]
}

console.log(twoArgs(1, 2, 3))  // [1, 2]

• 매개변수보다 인자의 개수가 적을 경우

const threeArgs = function (arg1, arg2, arg3) {
	return [arg1, arg2, arg3]
}

console.log(threeArgs())  // [undefined, undefined, undefined]
console.log(threeArgs(1))  // [1, undefined, undefined]
console.log(threeArgs(2, 3))  // [2, 3, undefined]

Spread syntax (…)

• 전개 구문
• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우는 요소, 함수의 경우는 인자로 확장할 수 있음

배열과의 사용 (배열 복사)

let parts = ['어깨', '무릎']
let lyrics = ['머리', ...parts, '발']
console.log(lyrics)  // ['머리', '어깨', '무릎', '발']

함수와의 사용 (Rest parameters)

• 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

function func(a, b, ...theArgs) {
	//
}

const restOpr = function (arg1, arg2, ...restArgs) {
    return [arg1, arg2, restArgs]
}
console.log(restOpr(1, 2, 3, 4, 5))  // [1, 2, [3, 4, 5]]
console.log(restOpr(1, 2))  // [1, 2, []]

선언식과 표현식

함수의 타입

• 선언식 함수와 표현식 함수 모두 타입은 function으로 동일

// 함수 표현식
const sum = function (args) { }

// 함수 선언식
function sub(args) {  }

console.log(typeof sum)  // function
console.log(typeof sub)  // function

호이스팅 - 선언식

• 함수 선언식으로 정의한 함수는 var로 정의한 변수처럼 호이스팅 발생
• 즉 함수 호출 이후에 선언해도 동작함

sum(2, 7)  // 9
function sum (num1, num2){
	return num1 + num2
}

호이스팅 - 표현식

• 반면 함수 표현식으로 선언한 함수는 함수 정의 전에 호출 시 에러 발생
• 함수 표현식으로 정의된 함수는 변수로 평가되어 변수의 scope 규칙을 따름

sub(7, 2) // Uncaught ReferenceError: Cannot access 'sub' before initialization
const sub = function (num1, num2){
	return num1 - num2
}

선언식과 표현식 정리

Arrow Function

화살표 함수 (Arrow Function)

• 함수를 비교적 간결하게 정의할 수 있는 문법
• function 키워드와 중괄호를 이용한 구문을 짧게 사용하기 위해 탄생
  • function 키워드 생략가능
  • 함수의 매개변수가 하나 뿐이라면 매개변수의 () 생략 가능
  • 함수의 내용이 한 줄이라면 {}와 return도 생략 가능
• 화살표 함수는 항상 익명 함수
  • === 함수 표현식에서만 사용 가능

화살표 함수 (Arrow Function) 예시

// Arrow Function
const arrow1 = function (name) {
    return `hello, ${name}`
}

// 1. function 키워드 삭제
const arrow2 = (name) => {return `hello, ${name}`}

// 2. 인자가 1개인 경우에만 () 생략 가능
const arrow3 = name => {return `hello, ${name}`}

// 3. 함수 바디가 return을 포함한 표현식 1개인 경우에만 {} & return 삭제 가능
const arrow4 = name => `hello, ${name}`

화살표 함수 (Arrow Function) 응용

// 1. 인자가 없다면 ? () or _ 로 표시 가능 
let noArgs2 = () => 'No args'
noArgs = _ => 'No args'

// 2-1. object를 return 한다면
let returnObject = () => {return {key:'value'}}  // return을 명시적으로 적어준다.

// 2-2. return을 적지 않으려면 괄호를 붙여야 함
returnObject = () => ({key:'value'})