함수

함수는 자바스크립트에서 가장 중요한 핵심 개념이며, 또 다른 중요한 핵심 개념들( 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등)과 깊은 관련이 있다.

• 함수는 다른 변수와 마찬가지로 변수에 할당이 되고 함수의 매개 변수로 전달이 되며 리턴값으로도 리턴이 된다. (Function Expression)
• 함수는 프로그램을 구성하는 기본적이 building block 이며 sub-program 이라고도 불리며 여러번 재사용 가능하다는 장점이 있다.
• 한가지 task 나 어떠한 값을 계산하기 위해 사용한다.
• ⭐️ 함수는 input 과 output이 중요하고 함수의 이름을 정하는것이 중요! 

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

 

하나의 함수는 한가지의 일만 하도록 만들어야 한다 

• 함수의 이름을 지정할땐 무언가를 동작하는것이기 때문에 doSomething, command, verb 로 지정해야 한다.
• 함수의 이름을 정하기 어렵다면 너무 많은것을 담고있는것이 아닌지, 세분화 할수 있지 않은지 고민해보면 더 깨끗한 함수를 만들수 있다.

매개변수

원시 타입은 값 value 을 복사하고, ( 깊은 복사 )
참조 타입은 주소 refernce 를 복사한다. ( 얕은 복사 ) 

기본 매개변수 (Default Paremeters)

function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // Hi! by undefined 
// from 이 정의 되어있지 않기 때문에 undefined로 출력

function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // Hi! by unknown
// 매개변수 옆에 원하는 default 값을 지정해 놓으면 사용자가 매개변수를 지정하지 않을때 
// 값이 대체 되어서 출력된다

나머지 매개변수 (Rest Parameters)

" ... " 을 사용하고 배열 형태로 전달된다.

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]); // 방법 ①
  }
  // for (const arg of args) {
  //   console.log(arg);    방법 ②
  // }
  // args.foreach((arg) => console.log(arg)); 방법 ③
}
printAll('Eunji', 'Amy', 'Coding'); // Eunji, Amy, Coding

함수 반환 값 (Return a value)

함수가 완료되었을 때 함수가 반환하는 값.

• 반환문은 함수 몸체 내부에서만 사용할수 있다.
• return 키워드와 반환값 사이에 줄바꿈이 있으면 무시된다. ( 세미콜론 ; 삽입 금지 )

Early return, early exit

function upgradeUser(user) {
  if (user.point > 10) {
    // logic...
  }
} // Bad😱 - 블록 안에서 로직을 많이 작성 ( if/ else) 하면 가독성이 떨어진다.

function upgradeUser(user) {
  if (user.point > 10) {
    return; // 조건이 맞지 않는다면 return으로 빨리 함수를 종료하고
  } // 조건이 맞을때만 필요한 logic을 실행하는게 좋다.
    // logic...
} // Good😁

함수 선언 & 표현 ( Function Declaration & Expression )

const print = function () { // 익명 함수(anonymous function)
  console.log('print');
};
print(); // 함수 호출 -> print 출력
const printAgain = print; // printAgain은 위에 선언된 함수를 가리키고 있으므로
printAgain(); // 함수 호출을 하면 -> print 가 출력된다.

선언문 과 표현식의 가장 큰 차이점은

• 선언문은 호이스팅이 가능함. ( 함수가 선언되기 이전에 호출 가능 )
• 선언문은 함수 이름을 생략할수 없다.
• 선언문은 표현식이 아닌 문( Statement ) 이다.
  
  
• 표현식은 할당된 다음부터 호출이 가능하다.
• 표현식은 표현식이 문( statement ) 이다.

콜백 함수 ( Callback Function )

function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love u') {
    printYes();
  } else {
    printNo();
  }
}
const printYes = function () { // 익명 함수
  console.log('Yes!');
};
// 표현식에서 이름을 쓰는 이유는 디버깅을 할때 스택 추적에 함수 이름이 나오게 하려고 사용
// 또는 함수 안에서 자신 스스로 또다른 함수를 호출할때 (재귀 함수) 이다.
const printNo = function print() { // 기명 함수
  console.log('No!');
}
randomQuiz('wrong', printYes, printNo); // No!
randomQuiz('love u', printYes, printNo); // Yes!

화살표 함수 ( Arrow Function )

화살표 함수는 익명 함수 이다.

• 블록형 보다 훨씬 간결하게 사용 할수 있다.

const simplePrint = function () {
  console.log('simplePrint!');
};
     🔻 🔻 🔻
⭐️ const simplePrint = () => console.log('simplePrint!');

즉시 실행 함수 ( Immediately Invoked Function Expression )

함수를 선언함과 동시에 즉시 호출되는 함수 이다.

• 즉시 실행 함수는 반드시 괄호 ()로 선언을 감싸야 한다.

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

재귀 함수 ( Recursive function )

자기 자신을 호출하는 행위, 즉 재귀 호출을 하는 함수 이다.

• 함수 몸체 내부에서는 함수 이름을 이용해 자기 자신을 호출할 수 있지만, 함수 외부에서는 반드시 함수를 가리키는 식별자로 호출해야 한다.