화살표 함수(arrow function)

함수 선언문 : 어디서든 호출가능

자바스크립트 내부 알고리즘, 실행전 초기화 단계에서

호이스팅으로 올라가진다. 함수 위치가 올라가는게 아님!

여튼 쓸 수 있다.

sayHello()

function sayHello(){
console.log('hello')
}

 

함수 표현식:코드에 도달하면 생성 그 위치 이후에만 사용가능

let sayHello = function(){
console.log('hello')
}
sayHello()

뭐가 더 좋고 나쁨은 없다. 하지만 신경쓰고 싶지 않으면

함수 선언문을 사용하면 더 자유롭고 편하게 코딩이 가능

 

화살표 함수 (arrow function) - 보다 간결하게 작성한다

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

let add = (num1,num2)=>{
return num1 + num2
}

let add = (num1,num2)=>(
num1 + num2
)
//한줄이면 이와같이도 가능

let add = (num1,num2)=>num1+num2;
// 이와같이도가능

//인수가 하나면? 괄호 생략도 가능
let sayHello = (name) =>`Hello,${name}`
let sayHello = name =>`Hello,${name}`

//인수가없으면 괄호 생략 못한다
let showError = ()=>{
    alert('error!')
}

//여러줄이면 이렇게 사용해야한다.
let add = (num1,num2)=>{
    const result = num1 + num2
    return result
}

- 화살표함수 추가

화살표 함수는 항상 익명이며, 자신의 this, arguments, super 그리고 new.target을 바인딩하지 않는다. 그래서 생성자로는 사용할 수 없다.

화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩 된다. 그래서 화살표 함수를 사용한다.

 

추후 화살표 함수에 대해 좀더 자세히 알아보도록하고 지금 용량에 이해할 수 있는것은 이정도 수준인것 같다.

 

-참고한링크

https://www.youtube.com/watch?v=Zwaxqf1gsTg&t=1s 

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

[JavaScript] 화살표 함수와 this 바인딩