패스트캠퍼스 환급챌린지 24일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250724(목) 24일차

문법 - 일급 함수

 

일급 함수

함수를 변수에 넣거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 개념

즉, 함수를 데이터처럼 다룰 수 있다

 

함수가 인자로 전달되는 경우

function ul(child) {
  return `<ul>${child}</ul>`;
}

function makeLi(container, contents) {
  const liList = [];
  for (const content of contents) {
    liList.push(`<li>${content}</li>`);
  }
  return container(liList.join(""));
}

console.log(makeLi(ul, ["Mon", "Tue", "Wed"]));

ul 함수는 단순히 ul 태그로 감싸는 역할

makeLi는 리스트 데이터를 받아 li 요소로 만들고, 그 결과를 인자로 받은 함수(ul)에게 위임

 

함수가 반환되는 경우

function discountPrice(rate) {
  return function (price) {
    return price - (price * rate * 0.01);
  };
}

const summerPrice = discountPrice(30);
const winterPrice = discountPrice(10);

console.log(summerPrice(567000)); // 396,900
console.log(winterPrice(567000)); // 510,300

discountPrice(30)은 30% 할인 계산기를 반환

반환된 함수는 특정 원가에 적용 가능

summerPrice, winterPrice처럼 의미있는 이름을 붙일 수 있어 가독성과 표현력이 뛰어남

 

함수를 단순히 코드를 묶는 단위로만 생각한다면

인자로 넘기거나 반환값으로 활용하는 방식은 다소 낯설게 느껴질 수 있지만

이번 강의를 통해 함수도 값처럼 다룰 수 있고, 그래서 더 유연하고 표현력 있는 코드를 만들 수 있으며

역할을 나누고 조합하는 방식으로 코드 구조를 더 잘 설계할 수 있다.