25장: 클래스

25.2 클래스 정의

클래스는 class 키워드를 사용하여 정의

// 익명 클래스 표현식
const Person = class {};

// 기명 클래스 표현식
const Person = class MyClass {};

25.3 클래스 호이스팅

• 클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생
• 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅 됨

25.4 인스턴스 생성

클래스는 생성자 함수이며 new연산자와 함꼐 호출되어 인스턴스를 생성

25.5 메서드

• 클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다
• 클래스 몸체에서 정의할 수 있는 메서드는 constructor, 프로토타입 메서드, 정적 메서드이다

25.5.1 constructor

• 인스턴스를 생성하고 초기화하기 위한 특수한 메서드
• 이름 변경 불가능
• 클래스 내에 최대 한 개만 존재
• 생략 시 암묵적으로 정의됨
• 별도의 반환문을 갖지 않아야 함

25.5.3 정적 메서드

• 인스턴스를 생성하지 않아도 호출할 수 있는 메서드
• 클래스에서는 메서드에 static키워드를 붙이면 정적메서드가 된다
• 인스턴스로 호출하지 않고 클래스로 호출

25.5.4 정적 메서드와 프로토타입 메서드의 차이

• 자신이 속해 있는 프로토타입 체인이 다름
• 정적메서드는 클래스로 호출하고 인스턴스 프로퍼티 참조 불가능
• 프로토타입 메서드는 인스턴스로 호출하고 인스턴스 프로퍼티 참조 가능

25.6 클래스의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩
2. 인스턴스 초기화
3. 인스턴스 반환

class Person {
  // 생성자
  constructor(name) {
    // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
    console.log(this); // Person {}
    console.log(Object.getPrototypeOf(this) === Person.prototype); // true

    // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
    this.name = name;

    // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
  }
}

25.7 프로퍼티

25.7.2 접근자 프로퍼티

접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티

25.7.3 클래스 필드 정의 제안

클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티
클래스 몸체에서 클래스 필드를 정의하는 경우 this에 클래스 필드를 바인딩해서는 안된다. this는 클래스의 constructor와 메서드 내에서만 유효

class Person {
  // this에 클래스 필드를 바인딩해서는 안된다.
  this.name = ''; // SyntaxError: Unexpected token '.'
}

25.7.4 private 필드 정의 제안

private 필드의 선두에는 #을 붙여준다
참조할 때도 #을 붙인다

class Person {
  // private 필드 정의
  #name = '';

  constructor(name) {
    // private 필드 참조
    this.#name = name;
  }
}

const me = new Person('Lee');

// private 필드 #name은 클래스 외부에서 참조할 수 없다.
console.log(me.#name);
// SyntaxError: Private field '#name' must be declared in an enclosing class

접근자 유효범위

25.8 상속에 의한 클래스 확장

25.8.2 extends 키워드

상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의

// 수퍼(베이스/부모)클래스
class Base {}

// 서브(파생/자식)클래스
class Derived extends Base {}

25.8.5 super 키워드

super를 호출하면 수퍼클래스의 constructor와 메서드를 호출할 수 있다

super를 호출할 때 주의할 사항

1. 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다
2. 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다
3. super는 반드시 서브클래스의 constructor에서만 호출한다. 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생

26장: ES6 함수의 추가 기능

26.2 메서드

메서드 축약 표현으로 정의된 함수만을 의미

const obj = {
  x: 1,
  // foo는 메서드이다.
  foo() { return this.x; },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다.
  bar: function() { return this.x; }
};

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

26.3 화살표 함수

26.3.2 화살표 함수와 일반 함수의 차이

1.화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다
2.중복된 매개변수 이름을 선언할 수 없다
3.함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다

26.3.3 this

화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조

26.3.4 super

화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다

26.3.5 arguments

화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다

26.4 Rest 파라미터

26.4.1 기본 문법

• rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받는다
• 반드시 마지막 파리미터이어야 한다
• 단 하나만 선언 가능

26.4.2 Rest 파라미터와 arguments 객체

arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용할 수 있다

26.5 매개변수 기본값

• Rest 파라미터에는 기본값 지정 불가능
• 매개변수 기본값은 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않음

27장: 배열

27.1 배열이란?

27.2 자바스크립트 배열은 배열이 아니다

자바스크립트 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체

27.4 배열 생성

27.4.1 배열 리터럴

배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재

27.4.2 Array 생성자 함수

전달된 인수의 개수에 따라 다르게 동작

const arr = new Array(10);

console.log(arr); // [empty × 10]
console.log(arr.length); // 10

27.4.3 Array.of

전달된 인수를 요소로 갖는 배열을 생성

27.4.4 Array.from

유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환

27.7 배열 요소의 삭제

Array.prototype.splice메서드를 사용하여 삭제

const arr = [1, 2, 3];

// Array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소 수)
// arr[1]부터 1개의 요소를 제거
arr.splice(1, 1);
console.log(arr); // [1, 3]

// length 프로퍼티가 자동 갱신된다.
console.log(arr.length); // 2

27.8 배열 메서드

27.8.1 Array.isArray

전달된 인수가 배열이면 true, 배열이 아니면 false를 반환

27.8.2 Array.prototype.indexOf

• 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환
• 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환
• 배열에 특정 요소가 존재하는지 확인할 때 유용

27.8.3 Array.prototype.push

• 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환
• 원본 배열은 직접 변경

27.8.4 Array.prototype.pop

• 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환
• 원본 배열이 빈 배열이면 undefined를 반환
• 원본 배열을 직접 변경

27.8.5 Array.prototype.unshift

• 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티값을 반환
• 원본 배열을 직접 변경

27.8.6 Array.prototype.shift

• 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환
• 원본 배열을 직접 변경

27.8.7 Array.prototype.concat

• 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
• 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가
• 원본 배열은 변경되지 않음

27.8.8 Array.prototype.splice

• 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우에 사용
• 원본 배열을 직접 변경

27.8.9 Array.prototype.slice

• 인수로 전달된 범위의 요소들을 복사하여 배열로 반환
• 원본 배열은 변경되지 않음

27.8.10 Array.prototype.join

• 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환
• 구분자는 생략 가능하며 기본 구분자는 콤마

27.8.11 Array.prototype.reverse

• 원본 배열의 순서를 반대로 뒤집음
• 원본 배열이 변경, 반환값은 변경된 배열

27.8.12 Array.prototype.fill

• 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다
• 원본 배열은 변경됨

27.8.13 Array.prototype.includes

• 배열 내에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다
• 첫 번째 인수로 검색할 대상을 지정

27.8.14 Array.prototype.flat

인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화

27.9 배열 고차 함수

27.9.1 Array.prototype.sort

• 배열의 요소를 정렬
• 원본 배열을 직접 변경하며 정렬된 배열을 반환
• 기본적으로 오름차순으로 요소를 정렬

27.9.2 Array.prototype.forEach

• 반복문을 추상화한 고차함수
• 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출

27.9.3 Array.prototype.map

• 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출
• 콜백 함수의 반환값들로 구성된 새로운 배열을 반환
• 원본 배열은 변경되지 않음

map과 forEach의 공통점

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출

map과 forEach의 차이점

• forEach는 언제나 undefined를 반환, 단순히 반복문을 대체하기 위한 고차 함수
• map은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환, 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차 함수

27.9.4 Array.prototype.filter

• 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출
• 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환
• 원본 배열은 변경되지 않음

27.9.5 Array.prototype.reduce

• 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출
• 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환
• 원본 배열은 변경되지 않음
• 초기값을 명시해주는것이 안전함

27.9.6 Array.prototype.some

• 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출
• 콜백함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환
• 빈 배열인 경우 언제나 false를 반환

27.9.7 Array.prototype.every

• 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출
• 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환
• 빈 배열인 경우 언제나 true를 반환

27.9.8 Array.prototype.find

• 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환
• 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 undefined를 반환

27.9.9 Array.prototype.findIndex

• 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소의 인덱스를 반환
• 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 -1을 반환

27.9.10 Array.prototype.flatMap

• map메서드를 통해 생성된 새로운 배열을 평탄화
• map과 flat을 순차적으로 실행하는 효과
• 1단계만 평탄화한다

28장: Number

28.1 Number 생성자 함수

인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환

28.2 Number 프로퍼티

28.2.1 Number.EPSILON

부동소수점으로 인해 발생하는 오차를 해결하기 위해 사용

28.2.2 Number.MAX_VALUE

자바스크립트에서 표현할 수 있는 가장 큰 양수 값

28.2.3 Number.MIN_VALUE

자바스크립트에서 표현할 수 있는 가장 작은 양수 값

28.2.4 Number.MAX_SAFE_INTEGER

자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값

28.2.5 Number.MIN_SAFE_INTEGER

자바스크립트에서 안전하게 표현할 수 있는 가장 작은 정수값

28.2.6 Number.POSITIVE_INFINITY

양의 무한대를 나타내는 숫자값

28.2.7 Number.NEGATIVE_INFINITY

음의 무한대를 나타내는 숫자값

28.2.8 Number.NaN

숫자가 아님을 나타내는 숫자값

28.3 Number 메서드

28.3.1 Number.isFinite

• 인수로 전달된 숫자값이 정상적인 유한수
• INFINITY 또는 -INFINITY가 아닌지 검사하여 그 결과를 불리언 값으로 반환
• 숫자가 아닌 인수가 주어졌을 때 반환값은 언제나 false

28.3.2 Number.isInteger

• 인수로 전달된 숫자값이 정수인지 검사하여 그 결과를 불리언 값으로 반환
• 검사 전 인수를 숫자로 암묵적 타입 변환하지 않는다

28.3.3 Number.isNaN

• 인수로 전달된 숫자값이 NaN인지 검사하여 그 결과를 불리언 값으로 반환
• 숫자가 아닌 인수가 주어졌을 때 반환값은 언제나 false

28.3.4 Number.isSafeInteger

• 인수로 전달된 숫자값이 안전한 정수인지 검사하여 그 결과를 불리언 값으로 반환
• 검사 전 인수를 숫자로 암묵적 타입 변환하지 않는다

28.3.5 Number.prototype.toExponential

• 숫자를 지수 표기법으로 변환하여 문자열로 반환

28.3.6 Number.prototype.toFixed

• 숫자를 반올림하여 문자열로 반환

28.3.7 Number.prototype.toPrecision

• 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환

28.3.8 Number.prototype.toString

• 숫자를 문자열로 변환하여 반환

29장: Math

29.1 Math 프로퍼티

29.1.1 Math.PI

• 원주율 값을 반환

29.2 Math 메서드

29.2.1 Math.abs

• 인수로 전달된 숫자의 절대값을 반환
• 절대값은 반드시 0 또는 양수

29.2.2 Math.round

• 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환

29.2.3 Math.ceil

• 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환

29.2.4 Math.floor

• 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환

29.2.5 Math.sqrt

• 인수로 전달된 숫자의 제곱근을 반환

29.2.6 Math.random

• 임의의 난수를 반환

29.2.7 Math.pow

• 첫번째 인수를 밑으로 두번째 인수를 지수로 거듭제곱한 결과를 반환

29.2.8 Math.max

• 가장 큰 수 반환
• 인수 전달되지 않으면 -Infinity를 반환

29.2.9 Math.min

• 가장 작은 수 반환
• 인수가 전달되지 않으면 Infinity를 반환

30장: Date

30.1 Date 생성자 함수

30.1.1 new Date()

• 현재 날짜와 시간을 가지는 Date객체를 반환

30.1.2 new Date(milliseconds)

• Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date객체를 반환

30.1.3 new Date(dateString)

• 날짜와 시간을 나타낸는 문자열을 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date객체를 반환