함수 ( Function )

Amy_Lee·2022년 6월 30일

함수 ⭐️⭐️⭐️

함수는 자바스크립트에서 가장 중요한 핵심 개념이며, 또 다른 중요한 핵심 개념들( 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, 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!'); ⭐️