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

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

250722(화) 22일차

문법 - 함수

 

함수

unction myFn(x) {
  return x + 100;
}
const result = myFn(10); // 110

함수란 계산을 수행하고 결과를 반환하는 코드의 묶음

 

함수 선언 > 호출 > 실행 > 결과 반환

값이 외부에서 주어지는 인자와 내부에서 결과를 반환하는 retun의 구조가 핵심

 

익명 함수와 함수 표현식

const myFnV2 = function(x) {
  return x + 100;
};
myFnV2(10); // 110

함수는 이름 없이도 정의가 가능, 이때는 변수에 담아서 사용한다

 

즉시 실행 함수 (IIFE)

(function() {
  console.log("Hello from IIFE");
})();

단 한 번만 실행하고 다시는 호출할 수 없는 함수를 만들고 싶을 때 사용

주로 초기화 코드 등에 사용

괄호로 감싸서 값으로 만들고 즉시( )로 실행

 

함수 호출 방식의 다양성

myFn();         	// 기본 호출
myFn.call(null, 10);       // call
myFn.apply(null, [10]);    // apply

call : 인자 나열

apply : 인자를 배열로 묶어서 전달

실제 호출 결과는 같지만 유연성은 apply가 더 높음

 

가변 인자 처리 방법

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(10, 20, 30); // 60

arguments(구형 방식)

배열처럼 생겼지만 배열은 아니고 함수 외부에서는 사용할 수 없음

 

function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}
sum(10, 20, 30); // 60

...rest(ES6 방식)

함수 시그니처에 명시되어 가독성과 표현력이 올라감

rest 앞에 고정 인자를 함께 쓸 수도 있음

 

화살표 함수

const add = (x, y) => x + y;

코드를 간결하게 쓰기 위한 문법

 

이번 강의는 함수

자바스크립트의 함수는 단순한 코드 묶음 그 이상 - 가장 중심에 있는 개념