혼공 자바스크립트 25-29강

윤인성 님의 혼공 자바스크립트 강의를 듣고 내용을 정리합니다.

---

🍇 API

Application Programming Interface.

애플리케이션 프로그램을 만들 때의 약속

단순한 파일 형식, 함수의 이름 등 '약속'의 범위는 매우 넓다. Web API, WinAPI, JavaScript API, Node API 등 종류가 방대하다.

ex) alert()의 구현을 몰라도 쓸 수 있는 이유는 "약속을 그렇게 해줬으니까"이다. 내부 구조를 몰라도 된다.

ex) console.log()도 마찬가지이다.

🍇 나머지 매개변수(rest parameter)

함수를 만들 때 매개변수에 ...매개변수와 같이 작성해주면 남은 매개변수들이 모두 이 나머지 매개변수에 배열의 형태로 들어오게 된다.

예시를 보자.

const 함수 = function(...매개변수) {
  console.log(매개변수)
}

함수() // []
함수(1) // [1] -> 매개변수가 1개일 때도 배열로 들어온다
함수(1,2) // [1,2]
함수(1,2,3) // [1,2,3]
함수(1,2,3,4) // [1,2,3,4]

나머지 매개변수는 일반 매개변수와 함께 쓰일 수 있다. 일반 매개변수에 할당되고 남은 것이 모두 나머지 매개변수에 들어오게 된다.

const 함수 = function(a, b, ...매개변수) {
  console.log(a, b, 매개변수);
}

함수() // undefined undefined []
함수(1) // 1 undefined []
함수(1,2) // 1 2 []
함수(1,2,3) // 1 2 [3]
함수(1,2,3,4) // 1 2 [3, 4] 

나머지 매개변수는 항상 맨 뒤에 와야한다(일반 매개변수가 나머지 매개변수보다 뒤에 올 수 없다.) 아래의 예시는 오류가 발생한다.

const 잘못된예 = function(...매개변수, a, b) {}

🍇 전개 연산자: 함수 호출

const 함수 = function(a, b, c) {
  console.log(a, b, c)
}

const a = [1, 2, 3]
함수(...a) // 1 2 3 -> a 배열의 값이 매개변수에 각각 분리되어 들어간다. 
// 함수(a[0], a[1], a[2] -> 이 코드와 완전히 동일하다.

🍇 기본 매개변수

매개변수가 있는 함수를 매개변수 없이 호출했을 경우 오류가 발생한다.

const isLeapYear = function(연도) {
  return (연도 % 4 === 0) 
  	&& (연도 % 100 !== 0) 
  	|| (연도 % 400 === 0)
}

isLeapYear();

이럴 경우 매개변수가 없이 호출해도 매개변수가 기본값을 지닐 수 있도록 해주는 것이 기본 매개변수이다.

const isLeapYear = function(연도 = new Date().getFullYear()) {
  return (연도 % 4 === 0) 
  	&& (연도 % 100 !== 0) 
  	|| (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

이것은 모던 JS에서 가능해졌고, 과거에는 직접 코드로 기본 매개변수를 설정해주었다.

1. typeof 사용

const isLeapYear = function(연도) {
  if (typeof(연도) === 'undefined') {
    연도 = new Date().getFullYear()
  }
  
  return (연도 % 4 === 0) 
  	&& (연도 % 100 !== 0) 
  	|| (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

2. typeof + 삼항 연산자 사용

const isLeapYear = function(연도) {
  연도 = typeof(연도) === 'undefined' ? new Date().getFullYear() : 연도;
  
  return (연도 % 4 === 0) 
  	&& (연도 % 100 !== 0) 
  	|| (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다

3. || 사용

const isLeapYear = function(연도) {
  연도 = 연도 || new Date().getFullYear();
  
  return (연도 % 4 === 0) 
  	&& (연도 % 100 !== 0) 
  	|| (연도 % 400 === 0)
}

isLeapYear(); // 기본값으로 올해 연도가 들어가게 된다