ES6 - Arrow Function

박재현·2021년 6월 7일
0

ES6

목록 보기
4/13

함수(function)

한 개의 함수는 한 가지 기능만 담당해야 한다.

함수의 이름은 동사로 지을 것

createCardAndPoint → createCard, createPoint

javascript에서 함수는 Object

변수에 할당, 파라미터에 전달, 함수로 리턴이 가능하다.

Default parameters

나중에 입력받지 않을 경우를 대비해 파라미터의 default 값을 지정해줄 수 있다.

function showMessage(message, from = 'unknown') {
	console.log(`${message} by ${from}`);
}
showMessage('Hi');

Rest parameters

parameter를 배열 형태로 받을 수 있다.

function printAll(...args) {
	// 배열 반복 1
	for (let i = 0; i < args.length; i++) {
		console.log(args[i]);
	}

	// 배열 반복 2
	for(const arg of args) {
		console.log(arg);
	}

	// 배열 반복 3
	args.forEach((arg) => console.log(arg));
}

printAll('dream', 'coding', 'ellie');

Local scope

밖에서는 안이 보이지 않고 안에서는 밖을 볼 수 있다.

let globalMessage = 'global'; // global scope
function printMessage() {
	let message = 'hello';
	console.log(message); // local scope
	console.log(globalMessage);
	
	function printAnother() {
		console.log(message);
		let childMessage = 'hello';
	}
	console.log(childMessage);
}
printMessage();

Early return, early exit

필요하지 않은 조건에 해당된다면 빨리 return해서 다음 로직으로 넘어가라

function upgradeUser(user) {
	if(user.point <= 10) {
		return;
	}
// user.point > 10 일 때 수행할 로직
}

Function expression

javascript function

함수도 데이터 타입 중 하나로 사용(first-class function)

변수에 할당 가능, 인자로 전달 가능, 함수를 리턴 가능하다.

function hoisting

함수를 선언하기 전에 사용 가능하다. → javascript에서 선언에 관련된 내용은 전부 상위로 끌어올려준다.

Callback hell

anonymous function vs named function

const printNo = function print() {
	console.log('No');
	print(); // recursions
}

named function을 쓰는 경우

디버깅할 때

함수 안에서 자신의 함수를 스스로 호출할 때(recursions) → 왠만하면 쓰지 않는 것이 좋다.

Arrow Function

  • 함수를 간결하게 만들어준다.
  • 항상 anonymouns function
// const Print = function () {
// 	console.log('Print');
// };

const Print = () => console.log('simplePrint');

IIFE(Immediately Invoked Function Expression)

함수를 바로 실행하고 싶을 때 즉각적으로 실행할 수 있게 해준다.

(function hello () {
	console.log('IIFE');
})();
profile
공동의 성장을 추구하는 개발자

0개의 댓글