Written by JJoo
on March 29, 2021

function 함수

매일 매일 사용하는 프로그램에는 각각 제공하는 프로그램이 있다.

그 프로그램에는 여러 function들이 있다.

program과 function의 관계 이미지

Function이 굉장히 중요한 기능을 담당하고 있기 때문에 sub-program이라고도 함.

function의 기능

api나 언어 자체의 function들을 쓸때

함수의 이름을 보고 어떤 기능을 하는 지, 어떤 값이 return되길 기대할 수 있는지, 예상할 수 있다.

때문에 input과 output이 중요하고 function의 이름을 잘 정하는 것이 중요하다.

function이란?

프로그램을 구성하는 가장 기본적인 building block이다.
sub program이라고도 불리며, 여러 번 재 사용이 가능하다는 장점이 있다.
대체적으로 한가지의 task나 어떠한 값을 계산하기 위해서 사용

1. Function declaration 함수를 정의하는 방법

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

=> function이라는 keyword 사용, 함수의 이름을 지정, parameters를 쭉 나열한 다음, 함수안의 기본적인 비즈니스 로직을 작성 후 return 해주면 됌.

하나의 함수는 한가지의 일만 하도록 해야함.

naming: 무엇을 동작하는 기능이기때문에 커맨드, 동사 형태로 이름을 지정해야함.

이름을 정하기 너무 어렵다면 하나의 function에서 너무 많은 기능이 담겨있지는 않은지 생각해봐야함.

자바스크립트에서 function은 오브젝트임.

때문에 변수에 할당할 수도 , 파라미터로 전달도 가능, 함수를 리턴할 수도 있음.

2. parameters

primitive parameters : passed by value 메모리에 value가 그대로 저장되어 value로 전달됌

object parameters : passed by reference 메모리에 레퍼런스로 저장되어 레퍼런스로 전달됌

레퍼런스로 전달된 값은 추후에 value값을 바꿀 수가 있음

function changeName(obj){ 
	obj.name = 'coder'; 
} 
const ellie = { name: 'ellie'}; 
changeName(ellie); 
console.log(ellie);

3. Default parameters (added in ES6)

Before

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

After

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

4. Rest parameters (added in ES6)

…args 배열형태로 전달됌

반복되는 숫자나 문자열을 배열로 변경해주는 작업을 생략할 수 있음

function printAll(...args){ 
//...3개의 방을 가진 배열 
//방법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');

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); //error 
} 
printMessage();

printMessage()와 printAnother()에서 globalMessage에 접근이 가능하지만

printMessage()에서 printAnother()안에 있는 childMessage에는 접근할 수 없다.

6. Return a value

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

return이 없을 땐 return undefined와 같음

7. Early return, early exit

조건이 맞을때 돌아가는 것 보다 조건이 맞지 않을 때 빨리 return 시켜서 돌아가게 하는 것

// bad
function upgradeUser(user){ 
  if(user.point > 10){ 
    //long upgrade logic... 
  } 
}

//good
function upgradeUser(user){ 
  if(user.point <= 10){ 
    return; 
  } 
  //long upgrade logic... 
}

함수는 다른 변수와 마찬가지로 변수에 할당이 되고 함수에 파라미터로 전달이 되며 리턴값으로도 리턴이 된다

function 사용시 알아둬야할 tip

1. Function expression

호이스팅 가능(선언전에 사용가능) : 자바스크립트가 선언 된 것을 제일 위로 올려주기때문

Function을 선언함과 동시에 print에 할당

const print = function () { //anonymous function 이름 없는 함수 
	console.log('print'); 
}; 
print(); 
const printAgain = print; printAgain(); 
const sumAgain = sum; 
console.log(sumAgain(1, 3));

2. Callback function using function expression

함수를 전달해서 상황이 맞으면 상황에 맞는 함수를 불러! 라고 하는 것

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

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

// named function 
// better debugging in debugger's stack traces. 디버깅할때
// resursions 

const printNo = fucntion print(){ 
	console.log('no!'); 
}; 
randomQuiz{'wrong', printYes, printNo); 
randomQuiz{'love yot', printYes, printNo);

3. Arrow function

함수를 간결하게 만들어줌

// always anonymous

const simplePrint = function(){ 
	console.log('simplePrint!'); 
} 
const simplePrint = () => console.log('simplePrint!'); 
const add = (a, b) => a + b; 
const simpleMultiply = (a, b) => { 
	//do something more 
	return a*b; 
};

4. IIFE : Immediately Invoked Function Expressin 즉시실행함수

선언함과 동시에 호출하는. 실무에서 많이 쓰임

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

Discussion and feedback

← → Top