1. 생성자 함수
- 첫 글자는 대문자로
- 비슷한 객체를 여러 개 만들 때, 붕어빵 틀처럼 찍어낼 수 있음
- new 연산자를 사용해서 호출
2. 계산된computed 프로퍼티
let a = 'age'; // 변수 a에 할당된 값이 들어감
const user = {
name : 'Mike',
[a] : 30
}3. 객체 메서드
- Object.assign( ) : 객체 복제
- Object.keys( ) : 키 배열 반환
- Object.values( ) : 값 배열 반환
- Object.entries( ) : 키/값 배열 반환
- Object.fromEntries( ) : 키/값 배열을 객체로 반환
4. 심볼과 객체
Symbol
- 유일한 식별자를 만들 때 사용 (new를 붙이지 않는다!)
- 전체 코드 중 딱 하나!
- 설명이 같은 걸 또 만들 경우 → 생긴 건 똑같지만, 둘은 같지 않다고 나온다
const a = Symbol( );
const b = Symbol( );
a ≠ bproperty key (심볼형)
- 심볼을 객체의 키로 사용해보자!
const id = Symbol('id'); // 'id'로 심볼을 만들고
const user = {
name : Mike,
age : 30,
[id] : 'myid' // computed property로 삽입
}- console.log 시, 심볼로 만든 객체를 가진 프로퍼티가 존재함
Symbol.for( ) 전역심볼
- 하나의 심볼만 보장받을 수 있음
- 없으면 만들고, 있으면 가져오기 때문
- Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
Symbol.for 메서드는 하나를 생성한 뒤, 키를 통해 같은 Symbol을 공유
const id1 = Symbol.for('id');
const id2 = Symbol.for('id');
id1 === id2 // .for( ) 없이 심볼을 생성했을 때와는 다른 결과5. Math 메서드
toString( ) : 숫자를 문자로 변환 ex) 10진수 → 2진수/16진수
Math.ceil( ) : 올림
Math.floor( ) : 내림
Math.round( ) : 반올림
toFixed( )
: 소수점 자릿수 ex) 소숫점 둘째자리까지 표현(=셋째자리에서 반올림)
: 단, 이 값은 문자열이므로 숫자로 전환해야 함
isNAN( ) : 숫자인지 아닌지 판단
parseInt( ) : 문자열을 숫자로 바꿔줌 (문자가 혼용돼 있어도 동작함)
parseFloat( ) : parseInt와 동일하지만, 부동 소숫점을 반환
Math.random( ) : 0~1 사이 무작위 숫자 생성
1~100 사이 임의의 숫자 뽑기
Math.floor( Math.random( )*100 ) +1
Math.floor 했을 때, 0일 수도 있으므로 +1 해서 최소 1 되도록Math.max( ) : 최대값
Math.min( ) : 최소값
Math.abs( ) : 절대값
Math.pow( n, m ) : n의 m제곱
Math.sqrt( ) : 제곱근(루트)
6. 문자열 메서드
작은 따옴표 ''
큰 따옴표 ""
백틱 ``
.length : 문자열 길이
.toUpperCase( ) : 모든 영문자를 대문자로
.toLowerCase( ) : 모든 영문자를 소문자로
str.indexOf( text )
: 문자를 인수로 받아 몇 번째에 위치하는지 알려줌
: 0부터 시작해, 찾는 문자가 없으면 -1 반환
.slice( n, m ) : 특정 범위의 문자열만 뽑아보기 (n부터~m까지)
.substring( n, m ) : n과 m 사이 문자열 반환 (m, n)바꿔도 동작함!
.trim( ) : 앞뒤 공백 제거
.repeat( n ) : n번 반복해서 출력
7. 배열 메서드
.push( ) : 뒤에 삽입
.pop( ) : 뒤에 삭제
.unshift( ) : 앞에 삽입
.shift( ) : 앞에 삽입
arr.splice( n, m ) : 배열에서 특정 요소 지움(n부터 시작해 m개 삭제)
arr.splice( n, m, x ) : 배열에서 특정 요소 지우고, x 추가
arr.splice( ) : 삭제된 요소 반환
arr.slice( n, m ) : 배열에서 n부터 m까지 반환
arr.concat( arr2, arr3.. ) : 합쳐서 새 배열 반환
arr.indexOf / arr.lastindexOf : 앞에서부터 탐색 / 뒤에서부터 탐색
arr.include( ) : 포함하는지 확인
arr.reverse( ) : 역순으로 재정렬
ex) 최근 가입한 유저부터 보여줌
ex) 게시판에서 가장 최근에 작성된 글을 보여줌
arr.forEach( fn ) : (함수를 인수로 받아) 배열 반복
arr.find( fn ) / arr.findIndex( fn )
: 함수를 연결할 수 있다 (ex.짝수로 찾아내기)
arr.filter( fn ) : 만족하는 모든 요소를 배열로 반환 (ex.모든 짝수 반환)
arr.map( fn ) : 함수를 받아 특정 기능을 시행하고, 새로운 배열을 반환
arr.sort : 배열 재정렬 (배열 자체가 변경되니 주의)
arr.reduce
9. 구조할당
- 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서, 그 값을 변수에 담을 수 있게 하는 표현 식 (순서대로 선언된 변수에 할당)
- 배열 구조 분해
- 객체 구조 분해
10. 나머지 매개변수
10-1. 함수에서 인수를 얻는 방법, argument
function User(name, age, ...skills){
console.log(names);
}- name, age : 일반적인 변수
- ...skills : 그 외 인수들은 몇 개가 들어올지 모르기에 나머지 매개변수 사용
10-2. 전개 구문
배열
let arr1 = [1,2,3];
let arr2 = [4,5,6];
// 1,2,3 풀어서 쓴 것
let result = [...arr1, ...arr2];객체
11. 클로저
내부 함수에서 외부 함수에 접근하는 것
함수가 생성될 당시의 외부 변수를 기억, 생성 이후에도 계속 접근 가능
12. setTimeout & setInterval
setTimeout : 일정 시간이 지난 후 함수를 실행
setInterval : 일정 시간 간격으로 함수를 반복
13. this 값을 바꿀 수 있는 함수
함수 호출 방식과 관계없이 this를 지정할 수 있음
Call 함수
모든 함수에서 사용 가능하며, this를 특정값으로 지정할 수 있다.
apply
call과 같으나, 함수 매개변수를 배열로 받음
bind
함수의 this 값을 영구히 바꿀 수 있음
14. 프로토타입 상속
공통된 부분은 상위개념 객체 프로토타입으로 만들기
const car = {
wheels: 4,
drive() {
console.log("drive..");
}
}프로토타입 체인
ex) x5에서 navigation 찾고
→ 없으니까 프로토타입인 bmw에서 탐색
→ bmw에 navigation 있으니 멈춤
15. 클래스 (ES6에 추가된 스펙)
- class 내부에 콘스트럭터(객체를 만들어주는 생성자 메서드) 有
- new를 통해 호출했을 때, 내부에서 정의된 내용으로 객체를 생성
- 클래스 내부에서 선언한 메서드는 프로토타입 밑으로 들어감
+) 메소드 오버라이딩 : 부모 클래스에 정의된 메서드를 그대로 사용하고 싶다면
16. 프로미스
콜백 함수 - 어떤 일이 완료된 이후 실행되는 함수
const pr = new Promise((resolve, reject) => {
// 인자1, 인자2
});-
Promise.all( )
모든 작업이 완료될 때까지 기다림
하나의 정보라도 누락될 시, 페이지를 보여주면 안되는 경우에 사용 -
Promise.race( )
하나라도 1등으로 완료되면 끝남
17. async 그리고 await
async
항상 프로미스를 반환하라
await
async 함수 안에서만 사용할 수 있음 (일반 함수식에서 사용 시, error)
18. 제너레이터
- 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능
- 제너레이터 함수 실행 시, 제너레이터 객체가 반환됨
- 이터레이터( iterator/ 메서드를 호출한 결과)면서 이터러블( ierable/ 반복가능)
