function

함수 훑어보기👻

🔎 함수 생성, 호출, 익명 함수

js는 언어 레벨에서 함수를 값으로 취급한다. = 함수를 변수에 넣을 수 있다.

익명함수는 반드시 변수에 넣어야 사용할 수 있다!

function myFnV1(x){
  return x + 100;
}

const result = myFnV1(10);	// 110

const myFnV2 = function(){
	return 100;
}

myFnV2();	// 상수 myFnV2안의 내용물이 함수라서 호출(myFnV2())할 수 있게 됨.

📍 myFnV1 : 값이 아니라 단순히 함수 -> 문
(함수 정의문에는 세미콜론으로 끝나지 않음)

📍 myFnV2 : 익명함수로서 함수를 값으로 취급해서 대입문으로 등장 -> 식
(식은 세미콜론으로 끝남)

---

🔎 즉시 실행 함수

: 함수가 만들어지자마자 즉시 한 번 실행하는 함수

(function(){
  console.log('즉시 실행 함수 실행');
})();

📍 실행하는 순간 값으로 취급해서 바로 호출하고 끝나버림.
📍 다시 호출 불가능. (이름이 없고, 변수에 넣지도 않았기 때문)
📍 애플리케이션 실행 동안 단 한번만 실행!

---

🔎 가변 인자, call, apply

function myFnV1(x){
  return x + 100;
}

const result = myFnV1(10,20,30); // 인자가 1개가 아니더라도 호출 성공. 인자 없어도 호출 성공

인자가 1개가 아니더라도 호출 성공. 인자 없어도 호출 성공
=> 이 때문에 함수 입장에서는 2가지 경우를 생각해야함.

1) 인자에 값이 안 들어오는 상황 대비
2) 인자를 더 많이 받았을 때 어떻게 처리할 것인가

=> 가변 인자
인자가 가변적일 때도 처리할 수 있는 방법을 js가 제공해 줌!

1) arguments

• 유사 배열(배열과 유사하지만 배열은 아님)
• 배열 안에는 호출 당시 넘겨받은 인자들이 차곡차곡 들어가 있음.

function sum(){
	let s=0;
  
  for(let i = 0; i < arguments.length; i++){
  	s +=arguments[i];
  }
  return s;
}

const abcSum1 = sum(10);
const abcSum2 = sum(10,20,30,40);	// 10,20,30,40이 arguments에 다 들어감. -> 굳이 함수 인자 넣을 필요 x

📍 문제점 : sum함수 내부코드는 바깥쪽에서 보이지 않음.
함수 접어 놓았을 때, sum함수 사용할 때 함수 시그니처를 보면 가변인자를 처리하는지, 가변 인자 처리하지 않고 인자를 아무것도 받지 않는지를 알 수 없음 (알려면 코드 열어봐야 함. -> 함수 사용자들 매우 불편)

📍 arguments은 암묵적으로 작동되는 메커니즘으로 되어 있기 때문에 함수 시그니처에 등장을 시킬 수 있는 방법이 없음. (= 표현력 제한적)

📍 이러한 맥락에서 추가된 새로운 스펙 있다!
==>>> 전개 파라미터(rest parameter)!

2) args

• 전개 파라미터(rest parameter)

function sum(...args){
	let s=0;
  
  for(let i = 0; i < args.length; i++){
  	s +=args[i];
  }
  return s;
}

const abcSum1 = sum(10);
const abcSum2 = sum(10,20,30,40);

📍 ... : 인자가 몇개 올지 모르겠다 ~ 라고 생각하기~!
📍 함수 접어보면, 함수 시그니처에 명확하게 가변 인자를 처리하는 함수라는 정보를 사용자에게 전달 해줌.
📍 명시적! 표현력 👍!

+ 추가적인 기능

function sum(a,b...args){
	let s=0;
  
  for(let i = 0; i < args.length; i++){
  	s +=args[i];
  }
  return s;
}

const abcSum1 = sum(10,20,30,40);

📍 기존의 arguments는 인자 기술과 상관없이 모든 인자의 값 다 담겨있음.

📍 but! 전개 파라미터는 실제로 a와b에 10,20이 들어가고 나머지 30,40만 들어있기 때문에 훨씬 더 처리하기가 좋음!

📍 function sum(a,b...args)를 접어서 보면 함수시그니처는 a,b는 필수값이고 그 뒤는 더 줘도되고 안줘도 된다는 정보를 주게 됨.

---

🔎 호출하기 !

: ( )호출, call, apply

function myFnV1(x){
  return x + 100;
}

const result = myFnV1(10); 

const myFnV2 = function(){
	return 100;
}

myFnV2();	// 첫 번째 방법
myFnV2.call();	// 두 번째 방법
myFnV2.apply();	// 세 번째 방법

📍 call, apply 메소드 이용한 함수 호출
: 기존에 괄호 통해서 호출하는 문법과 함수가 호출된다는건 완전히 동일.

function sum(a,b...args){
	let s=0;
  
  for(let i = 0; i < args.length; i++){
  	s +=args[i];
  }
  return s;
}

sum.call(context,10,20,30);	
sum.apply(context,[10,20,30]);	

📍 call, apply의
공통점 : 첫 번째 인자로 context 객체라는 것을 받음.
차이점 : call은 인자를 전달, apply는 인자를 배열에 담아서 전달.

📍 call은 인자를 전달할 것을 코드로 쓰고 있음.
40도 전달해야한다면,
sum.call(context,10,20,30); -> sum.call(context,10,20,30,40);
코드 자체를 바꿔야 함.

function sum(a,b...args){
	let s=0;
  
  for(let i = 0; i < args.length; i++){
  	s +=args[i];
  }
  return s;
}
  const arr = [10,20,30];
  sum.apply(context,arr);	

📍 apply는 배열 데이터를 다른 쪽으로 뺄 수 있음.
바깥쪽에서 인자를 더 주고 싶으면 배열에 데이터를 추가하면 됨!

📍 함수의 호출에 인자 값을 외부로부터 공급받아서 훨씬 더 유연한 무언가를 하게 될 때 그게 가능하게 호출되는 메커니즘.

---

🔎 화살표 함수 (arrow function)

• 이름이 기본적으로 없고, 이름 자체를 줄 수 없는 익명 함수가 기본 값.
• 반드시 변수에 넣어줘야함
• 코드가 한줄이고 코드의 결과를 리턴하는 경우, 브레이스 생략가능!
• 인자가 하나일 때는 괄호 생략 가능!

위의 sum 함수를 화살표 함수로 변형해보자!

const sum01 = (a,b...args)=>{
  let s=0;
  
  for(let i = 0; i < args.length; i++){
  	s +=args[i];
  }
  return s;
}

// 동일한 ten 함수로 예시! 
// 최소한의 코드로 된 arrow function
const ten=() => 100; // 호출되는 즉시 100 반환

// 이렇게 작성해도 되지만, 생략하면 훨씬 간단해지니까 생략하는게 좋음!
const ten =()=>{
	return 100;
}

const ten=(x) => 100 + x;
// 인자 1개면 괄호 생략가능.
const ten= x => 100 + x;

---

🔎 생성기 함수 (generator function)

• function과 함수 이름 사이에 * (asterisk)가 붙음.
• 통상적인 함수의 작동 방식과 완전히 다름!
• 최초에 호출하면 함수가 실행되지 않고 실행 준비 상태로만 만들고, 객체 하나를 반환.
  -> 객체 안에는 함수가 실행 준비 마쳤으니 그 함수를 실행할 도구를 담은 객체를 반환.
  -> 그 도구를 이용해서 함수를 실행했다가 멈췄다가 할 수 있음.

function* gen(){
  yield 10;  // yield : return과 유사. generator 만의 return.
  yield 20;
  return 30;
}

const g = gen();	// g에 generator를 제어할 객체가 반환됨. 객체에는 next라고 하는 메소드가 들어가 있음.

g.next();	// 호출 (g에서 제공하는 next함수 호출)
g.next();
g.next();

📍 일반함수와 달리 generator function은 호출을 한번 하고 여러 번 호출을 해서 그 함수가 종료되지 않았는데 그 함수에 다시 들어갔다가 다시 나오고 또 다시들어갔다가 다시 나오고 ... 이런식의 동작을 할 수 있음.

📍 generator함수는 실행을 일시 중지시키고 바깥쪽으로 나갔다가 다시 next함수의 호출로 안쪽으로 들어와서 실행을 재개시킬 수 있는 함수.

📍 일반 함수와 달리 함수의 바깥쪽 즉, 함수의 사용자와 핑퐁!하듯이 커뮤니케이션할 수 있는 스펙을 갖고있는 특수한 함수.

🔎 비동기 함수

• function앞에 async라고 하는 지시어 붙여 주기.

async function myTask(){
	
}

📍 비동기 작업을 코드로 구성할 때, Promise라는 스펙을 사용함.
📍 Promise의 어려운 비동기 코드 구성을 동기적으로 코드를 작성할 수 있게 만들어주는 스펙.

개별 상세 내용은 다른 게시물에서 !!🧚‍♂️🧚‍♀️😎