[React] 화살표 함수 (즉시실행)

함수를 즉시 실행할 수 있는 화살표 함수.

함수가 바로 실행될 줄 알았는데 바로 안됐다. 이유는 js를 불러오는데 useMemo 실행되는 속도가 더 빨라서인지 대충 예상해보며 화살표 방식을 이용하여 함수 즉시실행으로 도움을 받았다.

 

---

 

화살표 함수는 ES6 문법.

function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있다.

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

 

//일반 함수
var foo = function() { console.log("foo"); }

var bar = () => console.log("bar");

 

나는 () => 를 ()의 화살표에 이어준 함수에 파라미터값으로 넘긴다. 즉 넘겨준다. 라고 이해했다.

(개인적 견해)

 

// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3

var foo = (a, b) => { return a + b }; 
foo(1, 2); // 3

var foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
foo(1, 2); // undefined

var foo = (a, b) => { // 여러줄 썼을 때
	var c = 3;
	return a + b + c;
}
foo(1, 2, 3) // 6
/*
"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
*/

// 객체를 반환할 때
var foo = () => ( { a: 1, b: 2, c: 3 } );
foo(); // { a: 1, b: 2, c: 3 };

 

콜백함수에서도 사용할 수 있다.

// ES5
var numbers = [1, 4, 9];
var oddArr = numbers.filter(function (x) { return x % 2 !== 0;});
console.log(oddArr); // [1, 9]

// ES6
var numbers = [1, 4, 9];
var oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]

 

코드는 아래의 출처에서 가져왔다.

 

---

출처

 

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

JavaScript - 화살표 함수(Arrow function)