본문 바로가기

자바스크립트

JavaScript 함수 - 화살표함수 와 콜백함수, 즉시실행함수

화살표 함수 (Arrow Function)

function hello() {
    return 'Hello'
}

// 반환값만 존재하는경우 중괄호를 생략할 수 있습니다. 
const hello_arrow = () => 'Hello'

// 매개변수가 한개만 있는 경우 소괄호를 생략할 수 있습니다.
const say_my_name = name => 'my name is '+name

console.log(hello())
console.log(hello_arrow)

// 매개변수가 2개 이상이면 소괄호를 생략할 수 없습니다.
const add = (a,b) => a+b
// 함수 내 다른 구문이 존재한다면 중괄호를 생략할 수 없습니다.
const console_arrow = c =>{
    console.log(c)
}​

   - 일반 함수와 다르게 화살표(=>)의 형식으로 함수를 축약시킨 함수입니다.

   - 함수 표현식으로 사용하며, 일반 함수와는 달리 function이라는 함수 표식도, 함수 명도 사용하지 않습니다.

   - return 을 생략할 수도 있으며, 일반함수보다 짧고 간단하게 함수를 작성할 수 있습니다.

   - 객체 데이터를 반환하는경우엔 함수의 테두리를 의미하는 중괄호를 생략할 수 없습니다.

 

 

 

 

콜백 함수 (Call Back)

const a = callback =>{
    console.log('A')
    callback()
}

const b = ()=>{
    console.log('B')
}

a(b)

// 실행 결과
// 'A'
// 'B'

// 예시 2
function add(a,b,cb) {
    settimeout(()=>{
        cb(a+b)
    }, 1000)
}

add(3,7,result =>{
    console.log(result) // 10
})

   - 호출(call) + 뒤(back)으로 뒤쪽에서 호출된다는 뜻을 가진 함수입니다.

   - 지정된 함수를 함수 데이터로 사용하여 매개변수 내 callback 함수로 실행됩니다.

 

 

 

 

 

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

;(()=>{
 // 코드
}}()

;{()=>{})()
;{function () {}}()
;{function () {}()}
;!function(){}()
;+function(){}()​

   - 만들자마자 사용하는 일회성 함수를 만들 때 입력을 간단하게 하여 작성하는 함수입니다.

   - {함수}() 의 형태로 구성되며, 다른 코드와 섞이는것을 막기 위해 맨 앞에 ; (세미콜론)을 붙입니다.