Function2

둘째 자식 박함수는 첫째 자식보단 짧을 것 같아서 바로 포스팅하러 왔습니다.

여담이지만, 새로운 공부를 하는 동시에 어플리케이션 개발을 해보려고 드릉드릉 중이라서 밀린 글들을 얼른 올려야겠어요.

시작!

1. First-class Function

일급 함수라고도 불림

• 다른 변수와 마찬가지로 변수에 할당됨.
• 함수의 parameter로 전달 가능
• 다른 함수의 return 값이 될 수 있음

이것을 가능하게 하는 것은?👇

1-1) Function Expression

1. anonymous function
함수의 이름이 없이 function keyword를 이용한 함수
2. named function
이름이 있는 함수

// 변수에 함수 할당 example
const print = function(){  //anonymous function 	
 console.log('print');
};
print();
const printAgain = print;
printAgain();

1-2) (Function) declaration VS Expression

• function declaration
  함수를 선언하기 전에 호출 가능(hoisted)

sum(1,2); 	// 선언 전 호출
function sum(a,b){return a+b;}	// 함수 선언

Why??
JS엔진이 선언된 함수를 위로 올려줘서 미리 선언된 것처럼 취급해요(hoisting)

• function expression
  함수 선언 전에 호출하면 에러 발생.

print(); //에러!
const print = function(){  //선언  	
 console.log('print');
};

2. Call back function

함수 안에서 매개변수로 쓰일 때 나타납니다.
백문이 불여일견이니 예제를 보여드릴게요.

//call back function example
function quiz(answer, printYes, printNo){
  if(answer === 'hello world!'){
  	printYse();
  }
  else{ printNo(); }
}
//anonymous function
const printYes = function(){console.log('yes!');}

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

quiz라는 이름을 가진 함수의 매개변수는 answer, printYes, printNo입니다.
코드를 보면 printYes, printNo는 조건에 따라
호출이 될 수도 있고 안 될 수도 있죠?
이렇게 조건이 맞다면 호출해달라고 하는 게 Call back 함수입니다.

3. Arrow Function

함수를 매우 간결하게 만들어주는 좋은 친구!
항상 이름이 없는 anonymous function

How to make Arrow fucntion?

다 잘라버리면 일반 함수를 화살함수로 바꿀 수 있어요!

before

const test = function(){	//ex1
	console.log('arrow test!');
}
 const sum = function(a,b){return a+b;} //ex2

after

const test = () => console.log('arrow test!');
const sum = (a,b) => a+b;

만일 함수의 body가 한 줄로 표현할 수 없다면,
중괄호{} 로 감싸주고 return keyword를 사용하면 됩니다.

const sum =(a,b) => {
   // 여러줄의 코드
  return a+b;
}

4. IIFE

IIFE: Immediately Invoked Function Expression
함수 선언과 동시에 호출하는 방법!
지금은 잘 쓰이지 않지만 이런 기능도 있어요!

(function test(){
console.log('hello!');
})();

이렇게 함수를 선언 앞뒤를 괄호로 묶고, 선언 후 호출하는 것처럼 (); 를 붙여주면 선언함과 동시에 호출이 됩니다.

해당 포스트는 유튜브 드림코딩 by 엘리 님의 영상을 보고 공부하여 작성했습니다. 제가 잘못이해하여 설명이 이상한 부분이 있을 수 있으니 보다 정확하고 자세히 알고 싶으신 분은 하단의 링크를 참조해 주세요.

또 만나요!🧙‍♂️

드림코딩 by 엘리 | Function