JavaScript[5] - 함수와 Arrow Function

JavaScript [5] - 함수와 Arrow Function

함수의 정의

• 함수 선언식 (function declaration)

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

add(2, 7) // 9

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

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

sub(7, 2) // 5

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

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

• 기본 인자(Default arguments)
  • 인자 작성 시 '=' 문자 뒤 기본 인자 선언 가능

const greeting = function (name = 'Anonymous') {
  return `Hi ${name}`  // Backtick 주의
}

greeting() // Hi Anonymous

• 매개변수와 인자의 개수 불일치 허용[1/2]
  • 매개변수보다 인자의 개수가 많을 경우

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

noArgs(1, 2, 3) // 0

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

twoArgs(1, 2, 3) // [1, 2]

• 매개변수와 인자의 개수 불일치 허용[2/2]
  • 매개변수보다 인자의 개수가 적을 경우

const threeArgs = function (arg1, arg2, arg3) {
  return [arg1, arg2, arg3]
}
threeArgs() // [undefined, undefined, undefined]
threeArgs(1) // [1, undefined, undefined]
threeArgs(2, 3) // [2, 3, undefined]

• Spread syntax(...)

// 배열과의 사용 (배열 복사)
let parts = ['어깨', '무릎']
let lyrics = ['머리', ...parts, '발']
console.log(lyrics)
//['머리', '어깨', '무릎', '발']


// 함수와의 사용 (Rest parameters)
const restOpr = function (arg1, arg2, ...restArgs) {
  return [arg1, arg2, restArgs]
}

restArgs(1, 2, 3, 4, 5) // [1, 2, [3, 4, 5]]
restArgs(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(화살표 함수)

• 구문을 짧게 사용하기 위해 탄생
  1.  function 키워드 생략가능
  2. 함수의 매개변수가 하나 뿐이라면 매개변수의 '()' 생략 가능
  3. 함수의 내용이 한 줄이라면 '{}'와 'return'도 생략 가능
• 화살표 함수는 항상 익명 함수

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}`


// 응용

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

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

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