함수

함수

• 참조타입, function 타입
• 일급 객체
  • 변수에 할당 가능
  • 함수의 매개변수로 전달 가능
  • 함수의 반환 값으로 사용 가능

함수 선언식

function add(n1, n2){
    n1 + n2
}
add(1,2)

• 함수의 이름과 함께 정의하는 방식

• 구성

  • 함수의 이름
  • 매개변수 (소괄호)
  • 몸통 {중괄호}

• 호이스팅

함수 표현식

const add = function (n1, n2) {
    return n1 + n2
}
add(1,2)

• 함수를 표현식 내에서 정의하는 방식

• 함수 이름을 생략하고 익명 함수로 정의 가능(function 뒤에 이름이 없음)

• 구성

  • 함수 이름(생략 가능)
  • 매개변수 (소괄호)
  • 몸통 {중괄호}

• 호이스팅X

• Airbnb Style Guide 권장

JS 함수 특징

기본인자

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

const greeting = function (name = 'ljm'){
    return `hello ${name}`
}
greeting()        // hello ljm

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

• 인자를 더 많이 줄 경우

const twoArgs = function (arg1,arg2) {
    return [arg1,arg2]
}
noArgs(1,2,3)        // [1,2]

• 인자를 더 적게 줄 경우

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

Rest parameter(...) & spread operator

Rest parameter

• python 에서 의 언팩(*)과 비슷
• 사용시 함수가 정해지지 않은 수의 매개변수를 배열 형태로 받음

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

spread operator

const spreadOpr = function (arg1,arg2,arg3){
    return arg1 + arg2 + arg3
}
const numbers = [8,5,0]
spreadOpr(...numbers)        // 13

Arrow Function (화살표 함수)

• function 키워드 생략 가능
• 매개변수가 한개 뿐이면 () 생략 가능
• 몸통이 표현식 한개일 경우 {},return생략 가능

const bfArrow = function (name) {
    return `hi, ${name}`
}
//function 생략
const arrow1 = (name) => {return `hi, ${name}`}
// ()생략
const arrow2 = name => {return `hi, ${name}`}
// {} return 생략
const arrow3 = name => `hello, ${name}`

this (객체 문서 참조) 사용시 차이 발생

const obj = {
    PI: 3.14,
    radiuses: [1,2,3],
    area: function(){
        this.radisues.forEach(function(r){
            console.log(this.PI * r * r)
        }.bind(this))
    },
}

• forEach이후의 함수에서 this에서 문제 발생

  • forEach는 메서드가 아님 => this.PI 가 window의 PI를 찾게됨

    • 함수객체 .bind(this) 사용

    • Arrow Function 사용

const obj = {
    PI: 3.14,
    radiuses: [1,2,3],
    area: function(){
        this.radiuses.forEach((r)=>{
            console.log(this.PI * r * r)
        })
    },
}