DAY 87. JavaScript - 함수

 

 

함수

객체 타입의 값이다.

소스코드의 집합으로써 메소드, 모듈, 기능, 프로시저 등을 말한다.

자바스크립트에서는 function 자료형이다.

함수는 인자(입력되는 값)/매개변수(입력되는 값을 받는 변수), 리턴 값을 가질 수 있다.

코드 블록으로 만들어서 함수 자료형으로 만들어서 재사용, 코드 중복을 줄여 유지보수를 용이하도록 사용한다.

 

▪️ 함수 선언

반환 값 선언 없이 function 키워드만 사용한다.

• 선언적 함수 : function 키워드에 함수명을 작성하여 사용하는 방법
• 익명 함수 : function 함수명 작성하지 않고 변수에 대입하는 방법, 변수명을 통해서 함수 호출한다. ⇒ callback 형태
• 스스로 동작하는 함수 : 호출 없이 바로 사용

 

(function(){
	처리 로직
})();

// 정의함과 동시에 바로 실행하고 1번만 실행되고 다시 호출될 일은 없다.

 

▪️ 함수 호출

함수는 반드시 선언(정의)이 되어야 실행이 가능하다.

원하는 기능에 대한 함수를 호출하는 것을 함수 실행이라고 한다.

return 값이 있다면 return 값을 받을 변수가 있어야 한다.

 

▪️ 매개 변수와 return

✔️ 매개변수(전달인자)

호출하는 코드와 호출되는 함수를 연결해주는 변수를 매개변수라고 한다.

지정된 매개변수보다 많게 선언하고 호출 가능 but 초과되는 매개변수는 무시한다.

지정된 매개변수보다 적게 선언하고 호출 가능 but 선언되지 않은 매개변수는 undefined로 자동 설정된다.

• premitive parameters : passed by value; → 메모리에 벨류가 그대로 저장되어 전달
• object parameters : passed by reference; → 메모리에 레퍼런스가 저장되어 전달
• default parameters
• rest parameters : (...args) 배열로 전달

 

✔️ return [되돌려 줄 값]

return : 함수를 호출한 위치로 돌아가라는 의미

return 값(되돌려 줄 값) 미지정할 경우 ⇒ undefined 자료형으로 반환된다.

 

 

function sayHello(name){
	let msg = `Hello`;
	if(name){
		msg = `Hello, ${name}!`;
	}
console.log(msg);
}

// 리팩토링
function sayHello(name){
	let msg = `Hello`;
	if(name){
		msg += ', '+ name;
	//msg += `, ${name}`;
	}
console.log(msg);
}

sayHello();    // 매개변수가 없으면 Hello만 출력
sayHello('Mike');  // 매개변수가 있으면 Hello, name이 출력

// let msg 라는 변수를 함수 바깥에서 호출하고 싶다면? 함수 바깥으로 이동시키면 된다.
// 리팩토링 

let msg = 'Hello';
console.log('함수 호출 전')
console.log(msg)

function sayHello(name){
	if(name){
		msg += `, ${name}`;
	}
console.log('함수 내부');
console.log(msg);
}

sayHello('Mike');
console.log('함수 호출 후')
console.log(msg);

//결과값
//함수 호출 전
//Hello
//함수 내부
//Hello, Mike
//함수 호출 후
//Hello, Mike


// 리팩토링 if 없이 or 을 이용해서 코드를 간결하게 만들자.
// 매개변수에 기본값(default value)을 설정해주자 
function sayHello(name){
	let newName = name || 'friend';
	let msg = `Hello, ${newName}`
	console.log(msg)	
}

// 한번 더 수정!
// 디폴트값은 매개변수가 없을 때만 설정된다.
function sayHello(name = 'friend'){
	let msg = `Hello, ${name}`
	console.log(msg)	
}

sayHello();
sayHello('Jane');

 

 

▪️ 가변인자 함수

매개변수의 개수가 변하는 함수를 말한다.

모든 함수 내부에 arguments 라는 배열에 자동으로 생성이 되어 매개변수를 저장한다. → 여러 개의 매개값을 전달받고 싶을 때 사용한다. (argument[0], argument[2], ... )

 

▪️ 매개변수 함수(콜백 함수)

함수도 하나의 자료형으로 매개변수로 전달이 가능하다.

함수에 매개값으로써 내부에서 실행되도록 전달되는 함수

// 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
// better debugging in debugger's stack traces
const printNo = function print(){
	console.log('no!');

};

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

 

▪️ 화살표 함수(arrow function)

항상 이름이 없는 익명함수의 형태이다.

 

 

▪️ 스스로 실행하는 함수, IIFE: Immediately Invoked Function Expression

함수를 작성하고 호출하는 것이 아니라 작성과 동시에 호출하는 방식

 

// before

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

hello();

// ----------------------------

// after

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