🆕 새롭게 알게 된 것

📍 함수

---

함수 표현식

1. 네이밍 함수

과거에는 디버깅 툴이 잘 되어있지 않아서 네이밍 함수를 사용해야 디버깅 하기가 쉬웠다.

function gugudan() {
  for (i = 1; i < 10; i++) {
    for (j = 1; j < 10; j++) {
      console.log(`${i} * ${j} = ${i * j}`);
    }
  }
}

2. 익명 함수

const gugudan = function () {
  for (i = 1; i < 10; i++) {
    for (j = 1; j < 10; j++) {
      console.log(`${i} * ${j} = ${i * j}`);
    }
  }
}

[🧀 / add] 함수 선언문과 함수 표현식 중 더 많이 사용되는 것은?

---

Next.js는 함수선언식을 많이 사용하고, 리액트는 컴포넌트 외부에서는 함수표현식, 컴포넌트 내부에서는 함수선언식을 많이 사용한다.

함수선언식

function func(){}

함수표현식

let func = function(){}; //unnamed function 
let func2 = function sum(){}; //named function

화살표함수(함수표현식)

const func = () => {};

어떤 값을 즉시 반환할 때, 중괄호와 return을 생략할 수 있음 (극단적으로 코드를 간략화 할 수 있다)

const sum = (i, j) => i + j;

new Function

const newFunc = new Function();

함수의 매개변수

함수는 매개변수를 전달할 수 있다.

function sum(a, b){
  console.log(a+b);
}
sum(10,20);

위 방법은 함수의 매개변수를 수동으로 추가해야 하고, 매개변수가 매우 많을 경우 가독성이 떨어지는 점, 일부 매개변수에 값을 누락하는 경우 오류를 발생시킬 수 있다는 등의 단점이 있다.

이렇게 매개변수가 다양할 경우, 가변 인자를 사용한다.

스프레드 연산자 사용

’나머지 매개변수’라고 표현한다.

function sum(a,b,...args){
  console.log(a + b + args[0] + args[1]);
}
sum(10,20,30,40);

arguments 사용

함수가 기본적으로 가지고 있는 arguments 라는 가변인자를 사용해서 값을 가변적으로 꾸릴 수도 있다.

(주의 : 화살표 함수에서는 arguments 를 사용할 수 없다)

function sum(){
  // console.log(arguments[0] + arguments[1]);
  let sum = 0;
  for (let val of arguments) {
    sum += val;
  }
  return sum;
}

console.log(sum(10,20,30,40,50));

스코프

1. 지역 스코프

함수 스코프와 블록 스코프

2. 전역 스코프

지역 스코프에서 전역 스코프 참조는 가능, 전역 스코프에서 지역 스코프 참조는 불가하다.

📍 재귀 함수

---

재귀 함수란 자기 자신을 호출하는 방식으로 동작하는 함수를 말한다.

까딱하면 영원히 호출을 반복하는 무한 반복 상태에 빠질 수 있으므로 사용에 주의를 요한다.

기저 사례(base case)

재귀 호출이 끝나는 조건이 명시되어 있는 코드

재귀 호출

자기 자신을 다시 호출하는 것

재귀 함수를 사용하지 않고 팩토리얼 구현하기

const factorial = (num) => {
  let fac = 1;
  for (i = 1; i <= num; i++) {
    fac *= i;
  }
  return fac;
};

재귀 함수를 사용해서 팩토리얼 구현하기 (기저사례 X)

이 때는 음수까지 한없이 -1을 반복하기 때문에 무한 반복 상태에 빠지게 됨

function factorial(n) {
  return n * factorial(n - 1);
}
console.log(factorial(5));

재귀 함수 O 기저 사례 O

function factorial(n) {
  // 기저사례
  if (n === 0 || n === 1) return 1;
  // 재귀호출
  return n * factorial(n - 1);
}
console.log(factorial(5));

객체

객체는 키와 값으로 이루어진 속성의 집합이다.

const score = {
  korean: 90, // 키 : 값
};

객체의 속성은 동적으로 추가할 수 있다.

// 객체의 값을 동적으로 추가할 수 있음
score.eng = 90;
score.korean = score.korean - 25;

console.log(score); //{ korean: 65, eng: 90 }