화살표 함수 문법

일반 함수와 화살표 함수의 차이점

 

일반 함수: 함수 선언식과 함수 표현식

function main(){
	return "hi";
}

 

 

함수 선언식: 함수를 선언하는 가장 기본적인 방식, 함수의 호이스팅이 됨. 

 -함수 선언식은 함수의 이름을 기재해줘야 됨. 따라서 익명의 함수를 사용할 수 없음 

 

*호이스팅: 함수의 선언을 최상단으로 끌어올리는 것

function main(){
	return "hi";
}

 

 

함수 표현식:  익명의 함수 사용 가능 

const main = function(){
	console.log("hello")
}

 

화살표 함수 (ES6 때 생김)

const main = () => {

  console.log("hi");

}

 

//기본 표현식

function add(a, b) {

  return a + b;

}

//화살표 함수

const add = (a, b) => a + b;

function print(text) {

  console.log(text);

}

const print = (text1) => console.log(text); //매개변수가 하나일 경우 소괄호 생략가능

const print2 = (text1, text2) => console.log(text); // 화살표 뒤에 오는 리턴값도 하나일 경우 소괄호 생략가능

const print3 = (text1, text2) => {

  console.log(text1, text2); //리턴 값이 2개 이상일 경우에는 중괄호 기입

};

// 매개변수가 없을 경우

const getObject = () => {

    return {name: "별코딩"}

}

// 매개변수가 없을 경우, return을 생략하고자 할 경우

const getObject2 = () => ({name:"별코딩"} ) //return되는 값인 중괄호를 소괄호로 감싸준다

//화살표함수에서 매개변수에 가변인자(arguments) 사용할 때는 소괄호안에 ...+아무이름을 사용하면 됨

const main = (...params) => console.log(params[2]);

main(1,2,3)

arguments : 인자를 전달받은 배열형태의 객체

 

일반 함수의 this는 함수의 선언 위치에 상관 없이, 함수를 호출하는 방법에 따라 달라짐

일반 함수의 this는 함수를 호출한 객체를 가리킴

 

화살표 함수의 this는 호출 방법과 상관없이 선언된 위치에 따라 결정, 선언된 방법에 따라 바뀌지 않음

일반함수의 this는 호출한 객체이지만, 화살표 함수에서의 this는 화살표 함수를 감싸는 외부(상위) 스코프의 this를 그대로

가져와서 사용