[JavaScript] 함수의 선언과 표현

 

Parameters

primitiveparameters(원시파라미터)

✅ passed by value(값에 의한 전달)

 

objectparameters(객체 파라미터)

✅ passed by reference(참조에 의한 전달)

✅ 주소를 통해 참조값에 접근 할 수 있다.

 

passed by reference 예제

function changeName(obj){
	obj.name = 'hello';
}

const me = {name:'gyeol'}'
changeName(me);
console.log(me)

// {name:'hello'} 출력

 

Default Parameters(ES6+)

✅ 매개변수에 값이 없거나 undefined가 전달될 경우 해당 매개변수를 기본값으로 초기화할 수있다.

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

showMessage('hello!!!')

// 'hello!!! by unknown' 출력

 

Rest Parameters(ES6+)

✅ 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

// args는 세 개의 인자를 가진 배열
function printAll(...args){
	for(let i = 0; i<args.length; i++){
		console.log(args[i]);
	}
}

printAll('하이','안녕','헬로');
// 출력결과 
// 하이 
// 안녕
// 헬로

 

📌TIP

Early return, early exit

✅ 조건이 맞지 않는 경우엔 빠르게 리턴 처리할 것!

 

함수의 표현

✅ 함수는 호이스팅된다. 함수가 선언되기 전에 호출해도 에러 X

 

익명함수와 기명함수

익명함수(Anonymous Function)

✅ 호이스팅에 영향을 받지 않는다.

✅ 브라우저가 런타임에 동적으로 선언되는 함수이다.

 

기명함수(Named Function)

✅ 호이스팅에 영향을 받는다. 

✅ 브라우저가 런타임 이전에 선언되는 함수이다.

✅ 이름을 사용하여 함수 표현식 내부에서 자기 자신을 참조할 수 있다. (자기 자신을 호출 가능. 재귀)

 

// 함수를 선언함과 동시에 print라는 변수에 할당
const anonymousPrint = function(){
	// 이렇게 함수에 이름이 없는 함수는 anonymous function(익명함수)
	console.log('print');
}

const namedPrint = function print(){
	// 이렇게 이름이 있는 함수는 named function
	console.log('print')
}

 

 

Callback Function

✅ 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수이다.

✅ 파라미터로 넘겨받은 함수는 일단 받고, 때가 되면 나중에 호출한다.

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

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

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

randomQuiz('love you', printYes, printNo);

// 'yes!' 출력

 

Arrow Function

✅ 화살표 함수는 익명 함수로만 사용할 수 있다.

✅ 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

const add = (a,b) => a+b;

// 위 함수를 풀어서 쓰면?
const add1 = function(a,b){
	retrun a+b;
}

// arrow function 이되 블럭을 사용하게된다면?
const add3 = (a,b)=>{
	// do something more!
	return a+b;
	// 이 땐 return 키워드 필요
}

 

IIFE(Immediately Invoked Function Expression)

✅ 즉시 실행 함수. 선언과 동시에 호출된다.

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

// 바로 'IIFE'가 출력된다.

 

 

 

---

학습을 위해 유투브 드림코딩 자바스크립트 강의를 보고  정리한 글입니다.

 

Reference

https://www.youtube.com/watch?v=e_lU39U-5bQ 

 

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

IIFE - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb