[Javascript] 자바스크립트 Function 기초 지식 (함수 선언, 표현, Callback, Arrow)

[Function Declaration]

Default parameters (ES6에서 추가됨)

// 예시: parameter를 제대로 입력하지 않았을 경우
function showMessage(message, from = 'unknown') {
	console.log(`${message} by ${from}`);
}
showMessage('Hi!');

parameter 값을 제대로 모두 입력하지 않아도 함수의 parameter에 값을 할당해준다면, 에러가 나지 않고 해당 parameter 값에 default value가 들어가게 된다.

 

Rest Parameters 

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');

parameter 값에 '...'를 추가하여 작성해준다면, parameter 값을 배열 형태로 받겠다는 뜻이다.

 

[Funtion Expression]

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

함수를 print라는 변수에 할당했을때, 변수를 호출하려고 한다면 함수를 부르는 형식과 똑같은 형식으로 호출하면 된다.

 

Function Declaration vs Function Expression

Function Expression은 무조건 할당하고 호출이 가능하다. 하지만 Declaration 같은 경우는, hoisting이 가능하기 때문에 해당 함수를 정의하기도 전에 호출하는 것이 가능하다. 

 

 

Callback Function

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

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

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

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

parameter부터 살펴보자면, answer은 parameter이고 printYes는 정답이 맞을때의 호출하는 것, printNo는 정답이 틀렸을 때의 호출하는 것이다. 이 때의 printYes와 printNo는 함수이며 이는 callback function이라고 부른다. 

printYes는 함수 이름이 없는 anonymous function이고, printNo는 함수 이름이 있는 name function이라고 한다. named function의 경우 우리가 디버깅을 할 때 함수 이름이 나오게 하기 위해서 사용하는 것이다.

 

Arrow Function

// 일반 function 1.
const simplePrint = function () {
	console.log('simplePrint!');
};

// arrow function 1.
const simplePrint = () => console.log('simplePrint!');


// 일반 function 2.
const add = function (a, b) {
	return a + b;
};

// arrow function 2.
const add = (a, b) => a + b;

arrow function은 항상 이름이 없는 anonymous function이다. 

 

IIFE

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

IIFE란, Immediately Invoked Function Expression을 말한다. 즉, 함수 바깥에 괄호를 치게 되면 함수 선언과 동시에 함수가 실행된다.

 

출처: 유튜브 드림코딩 엘리