[JS] Arrow Function

저번 시간에 다뤘던

function 함수명 () {

}

 

이런 형태를 함수 선언문이라고합니다.

그리고 함수 표현식 이라는 것이 있는데요.

구조는 아래와 같습니다.

 

let sayHello = function(){

console.log("Hello");

}

sayHello();

 

두 문법에는 어떤 차이가 있을까요?

답은 호출하는 타이밍입니다.

함수 선언문은 어디서든지 호출해서 사용할 수가 있는데

 

sayHello();

function sayHello(){

console.log("Hello");

}

 

함수 선언문은 이런 식으로 함수가 실행문 아래에 와도

실행이 가능합니다.

프로그램 언어적 특성상 순서대로 코드가 실행 되어야 하는데

위 동작이 어떻게 가능할까요?

JS는 프로그램이 실행되기 전에 모든 '함수 선언문'을 찾아 모아서

메모리에 저장하고 있다가 필요할 때

내부적으로 끌어올려서 사용하기 때문에 가능합니다.

저장이 되어있기 때문에 함수가 먼저 호출이 되어도 오류없이

잘 작동합니다.

실제적으로 코드가 끌어올려지는 것은 아니고,

실제 메모리상에도 변화는 없습니다.

이런 현상을 '호이스팅(Hoisting)' 이라고 합니다.

함수 선언문에만 적용이 되고,

'함수 표현식'은 코드에 도달하면 해당 함수가

생성되게 됩니다.

 

그런데 함수 표현식은 다른 식으로도 표현할 수 있는데,

이것이 화살표 함수입니다.

여지껏 봤던 함수들보다 더 간결하게 작성할 수 있는 함수입니다.

 

let add = function(num1, num2){

return num1+num2;

}

 

이런 더해주는 함수가 있다고 가정하면

 

let add= (num1,num2) => {

return num1 + num2;

}

 

function이라는 글자를 화살표 모양으로 대체해서

사용할 수 있습니다.

 

let add = (num1,num2) =>{

num1 + num2;

}

 

그리고 return도 생략할 수 있습니다.

 

let add = (num1,num2) => num1 + num2;

 

만약 리턴할 글자가 한줄이라면

중괄호를 생략하는 것도 가능합니다.

 

let sayHello2 = name => `Hello, %{name}`;

 

파라미터가 한개라면

파라미터를 둘러싸고 있는 소괄호도 생략이 가능합니다.

하지만 파라미터가 없는 함수라면

소괄호를 생략할 수 없습니다.

 

함수와 메소드의 차이는 무엇일까요?

 

let human = {

name : "김비버",

walk : function(){

console.log("뚜벅뚜벅");

}

 

객체를 하나 만들어봤는데요.

객체 안에 있는 function이 보이시나요?

이렇게 객체 속성으로 할당 된 함수를 

메소드라고 부릅니다.

반면에 객체 외부에서 선언된 것은

함수라고 불립니다.