Function

1. Function

- 재사용이 가능하다.
- 한 가지의 task를 수행하거나 value를 계산하기 위해 사용된다.
- object의 일종이다.

1-1. Function declaration

function name(param1, param2) { body... return; }

 

2. Parameters

• premitive parameters: 메모리에 value가 그대로 저장, value가 전달
• object parameters: 메모리에 reference가 저장, reference가 전달

 

3. Default parameters (added in ES6)

function showMessage(message, from = 'unknown') {
// from이 undefined일 때, default 값 명시
	console.log(`${message} by ${from}`);
}
showMessage('Hi!');

 

4. Rest parameters (added in ES6)

function printAll(...args) {
// (...)를 작성하여 배열 형태로 전달
// args는 3개의 값이 담긴 배열
	for (let i = 0; i < args.length; i++) {
    	console.log(args[i]);
    }
    
    for (const arg of args) {
    	console.log(arg);
    }
    
    args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');
// 인자 3개 전달

 

5. Local Scope

let globalMessage = 'global'; // global variable
function printMessage() {
	let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
    function printAnother() {
    	console.log(message); // 접근 가능
        let childMessage = 'hello'; // 부모에서 여기로 접근 불가
    }
    console.log(childMessage); // 에러 발생
}
printMessage();
console.log(message); // 에러 발생

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

 

6. Return a value

function sum(a, b) {
	return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1,2)}`);

 

7. Early return, early exit

// bad
// ~일 때 ~한다
// block안에서 logic을 많이 작성하면 가독성 떨어진다.
function upgradeUser(user){
	if (user.point > 10) {
    	// long upgrade logic...
    }
}

// good
// 조건이 맞지 않을때는 빠른 return 후 함수 종료
// 조건 맞을 때만 필요한 logic들 실행
function upgradeUser(user){
	if (user.point <= 10) {
    	return
    }
    // long upgrade logic...
}

 

8. Function expression

const print = function () { // anonymous function
	console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

const print = function print () { // named function
	console.log('print');
};

• Function expression
  • 할당된 다음부터 호출 가능
  • 위의 print 함수를 선언하기 전에 호출하면 에러
• Function declaration
  • hoisting이 된다
  • 함수가 선언되기 이전에 호출해도 된다.

 

9. Callback function using function expression

function randomQuiz(answer, printYes, printNo) {
	if(answer === 'love you') {
    	printYes();
    } else {
    	printNo();
    }
}

// anonymous function
const printYes = function () {
	console.log('yes!');
};

// named function
const printNo = function print () {
	console.log('no!');
};

randomQuiz('wrong', printYes, printNo); // no!
randomQuiz('love you', printYes, printNo); // yes!

• Callback function: 함수를 전달해서, 맞는 상황에 따라 함수 호출하는 것

 

10. Arrow function

const simplePrint = function () {
	console.log('simplePrint!');
};
const simplePrint = () => console.log('simplePrint!');

const add = function (a, b) {
	return a+ b;
};
const add = (a, b) => a + b;

const simpleMultiply = (a, b) => {
	// do something more
    return a * b;
};

• 항상 anonymous function이다.

 

11. IIFE (Immediately Invoked Function Expression)

(function hello() {
	console.log('IIFE');
})();

• 함수를 선언함과 동시에 호출

 

 

참고

youtube 드림코딩 by 엘리
https://www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5