[ES6] Arrow function (화살표 함수)

💡 기존함수 vs 화살표 함수

기존 자바스크립트 함수

// 함수표현식
let test = function(){console.log("안녕")};	// 안녕

// 화살표 함수
let test = () => console.log("안녕");	// 안녕

화살표 함수 

화살표 함수는 항상 익명 함수이다.

// 매개변수 X
let test = () => console.log('안녕');
console.log(test);
test();

//	() => console.log('안녕')
//	안녕

// 매개변수 1개
let test = x => x;
test(1);
// 1

// 매개변수 2개
let test =(a,b) => {return a+b};
test(1,2)
// 3

// return이 없는 경우
let test = (a,b) => {a+b};
test(1,2);
// undefined

// 여러줄을 작성해야하는 경우
let test = (a,b) => {
	let c = 3;
	return a+b+c;
    }
test(1,2);
// 6

{}를 사용하는 경우 return을 꼭 사용해야한다.

{}는 코드를 여러줄 작성해야할 때 사용한다.

---

💡 기본값 매개변수 (default function paramerter)

기존 자바스크립트

function multi(a,b)
{
    b = (typeof b != 'undefined') ? b : 1;
    return a * b
}

console.log(multi(5,2));	// 10
console.log(multi(5));		// 5

 

ES6

// ES2015(ES6)
function multi(a,b=1)
{
	return a * b;
}

console.log(multi(5,2));	// 10
console.log(multi(5));		// 5

- 기존에는 디폴트를 지정할수 없어 코드안에서 설정을 해야 했지만 ES6에서는 바로 설정할수 있게 되었다.

 

 

++ this 부분 추가하기

 

참고

velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function

JavaScript - 화살표 함수(Arrow function)

ko.javascript.info/arrow-functions-basics

화살표 함수 기본

jeong-pro.tistory.com/110

ES6 화살표 함수(arrow function) 변경점 요약 (사용법, this등)