[JavaScript] 화살표 함수

화살표 함수

: 화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.

 

기본 형태

const Func = () => {
    console.log("화살표 함수 호출!")
}

Func();

 

특징

- function 표현식에 비해 구문이 짧다.

- this나 super등의 객체를 바인딩하지 않는다.

- 기본적으로 익명 함수이다. 따라서 메소드가 아닌 개별 함수로 더 적합하다.

- return 키워드의 생략이 가능하다.(제한적)

 

 

-> 호이스팅(함수 선언보다 먼저 호출)이 불가

Func(); // 여기선 호출 불가

const Func = () => {
    console.log("화살표 함수 호출!")
}

Func(); // 여기서 호출 가능

 

-> 반환값만 존재한느 경우, 중괄호와 return 키워드를 생략할 수 있다.

const Func = () => {
    return 10
}

const Func = () => 10

=> 같은 결과, but 반환값 외에 구문이 존재하는 경우에는 다시 중괄호와 return 필요!

 

-> 매개변수가 하나인 경우에는 소괄호 생략 가능,  단 없거나 다수면 생략 불가!

const Func = name => {
    console.log(name)
}
const Func = (name1, name2) => {
   console.log(`${name1}와${name2}`)
}

 

예제)

const phone = {
    apple: "아이폰", samsung: "갤럭시"
}
const myPhone = ({apple}) => {
    console.log(`나의 휴대폰은 ${apple}이다!`)
}
myPhone(phone)
const myPhone2 = ({lg = "베가레이서"}) => {
    console.log(`나의 휴대폰은 ${lg}이다!`)
}
myPhone2(phone)

const birds = {
    birds: ["닭", "타조", "꿩", "비둘기"]
}
const animals = {
    ...birds,
}
const cats = ["고양이", "치타", "호랑이", "삵"]
console.log(animals)

const animals2 = {
    ...birds, cats
}
console.log(animals2)
const sayAnimal = ({cats}) => {
    console.log(cats)
}
sayAnimal(animals2)