JavaScript

Object

Object.assign({}-초기 객체,객체명) : 객체복제 - 주소공유 아니고 같은 값 새로 생성

Object.keys(객체명) : 키 배열 반환 / .values()

Object.entries() : 키/값 배열 반환

Object.fromEntries() : 키/값 개열을 객체로 변환

 

let key = '키'

user = {

[key] : '값'

} => 어떤 값이 키가 될 지 모를 때 유용

Symbol

객체 프로퍼티 키는 객체형이나 심볼로 가능

Const a = Symbol(); // 유일한 식별자를 만들 때 사용

Const id= symbol(‘Id’) //식별자 설명 

Const user ={

name: ‘mike’,

Age:’30’ 

[id]:’myid’}

 

object의 메소드에 키가 심볼 형인 프로퍼티는 실행X

 

Symbol.for() : 전역심볼 , 하나의 심볼만 보장. 키를 통해 같은 심볼 공유 

 

Value로 함수 삽입 가능

숫자

toString() : 숫자 to 문자열 

Math.ceil() : 올림

math.round() : 반올림

math.floor() : 내림

Math.toFixed(n) : n째자리 반올림 -> 문자열로 반환

Number(Math.toFixed(n)) 로 숫자로 형변환

Math.random() : 0~1까지 랜덤 

parseInt () : 문자열 to int 

 

문자열

str.slice(n,m) : n~m-1 까지 반환

subString (n,m) n~m가져옴 

substr(n,m) n부터m개 가져옴

 

 해당 문자열을 가지고 있는지 아닌지도 판단 

str.indexOf('값')  -> if (str.indexOf('콜라') > -1 )  

str.includes('콜라')

 

'a'.codePointAt(0) -> 문자의 코드 값 반환

 

배열

arr.push() / arr.pop()

 

arr.splice(n,m) : n부터 m개 제거 & arr.splice(n,m,x) : n부터 m개 제거하고 x로 채움

splice는 삭제된 요소를 반환함.  -> result = arr.splice(n,m) 가능

 

arr.concat(arr1,arr2)

: 합침

 

배열의 반복

   1. arr.forEach((item, index,arr)

포함여부 확인

arr. includes()

 

함수 형태로 포함여부 확인 (object 타입에서 유용) 

arr.find((item) => {

return item %2 === 0 //짝수 판별,  첫 요소만 알려주고 함수 끝 없으면 undefind 

})

 

만족하는 모든 요소를 배열로 반환 , find와 사용법 동일

arr.filter(fn)

 

.reverse() : 역순 재정렬

 

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환 : map

 

 배열 문자열로 병합, 분할 : join, split 

 arr.join(구분자) : 요소 간 구분자 더해서 문자열로 반환

arr.split(구분자) : 문자열 간 구분자로 분할해서 배열로 반환

 

배열 타입 확인 Array.isArray(배열명)

 

arr.sort(fn) : 배열 정렬 , fn함수를 정의해서 배열 정렬 -> 복잡하므로 Lodash 사용!! (다양한 함수 구비)

 

arr.reduce(fn) : 

arr.reduct((prev(누적 계산 값), cur(현재값)) => {},0(초기값) )  

// 성인들만 초기 값인 prev 배열, []에 삽입

구조 분해 할당

: 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

 

users 배열 말고 문자열을 split해서도 사용가능!

기본값을 세팅하여 에러 방지

같은 방식으로 객체 구조 분해도 가능 -> 더 많이 쓰임

나머지 매개변수

 

... 구문 , 함수에 전달하는 매개변수의 개수가 다를 때, 변수들을 배열로 다룰 수 있음 

ex, 유저마다 가진 스킬의 개수가 다름

 

 

전개구문

객체도 가능 - 객체 복제

클로저

: 함수가 생성될 당시의 외부 변수를 기억해서 생성 이후에도 내부함수가 외부함수에 접근 가능

 

 

setTimeout / setInterval 

setTimeout(fn, 시간ms, 함수의 인수) : 일정 시간 이후 함수 실행 

clearTimeout(변수) : 시간 전에 실행되면 스케줄링 취소

 

setInterval(fn, 시간ms , 함수의 인수) : 일정 시간 간격으로 함수 반복 ,0 으로 설정해도 브라우저는 기본적으로 4ms이상의 딜레이가 있음, 먼저 실행된 함수가 종료된 후 실행되므로 0은 올바르게 작동 X

clearInterval(뱐수) : 멈춤 

 

Call, apply, bind 

: this 지정 가능

 

상속, prototype 

객체.hasOwnProperty ("키 값") : 키 값이 존재하는지 여부 판단

bmw.__proto__ = car ; => car 객체 상속

Bmw.prototype.프로퍼티명 = 프로퍼티 값이나 함수 => 생성자함수에 바로 지정

 

클래스

:prototype과의 차이는 클래스는 new 없이 실행할 수 없다.

클래스의 for-in 문에서 for(const p in 객체) {} 시, 함수명은 출력되지 않는다. 

클래스의 상속 - extends 

메소드 오버라이딩 - 메소드 덮어쓰기

super 사용 시, 부모의 메소드와 자신의 새로운 메소드 추가 사용 가능 

 

Promise

: 함수 사용 가능 여부를 계속 판단하며, 함수 실행을 보장해주고 그 사이 다른 작업 가능하게 함, 작업 완료나 실패 여부 알려줌

 

 

실행 후 then, catch, finally 로 처리 

 

프로미스 체이닝

: 콜 백 함수 대신 프로미스를 then으로 실행시켜 순서를 유지하는 것

에러가 있어도 출력된다. 

Promise.all() ->하나의 정보라도 에러가 있을 시, 에러가 난다.  모든 정보를 보여주지 않아야 하는 곳에서 유용 

Promise.race() -> 하나라도 일등으로 완료되면 종료한다. -> 용량이 큰 이미지들을 로딩하는데, 그 중 하나라도  완료되면 그 이미지 먼저 보여줄 때 사용 , 프로미스 중에 가장 먼저 완료된 결과값으로 이행하거나 거부한다. 

Promise.any() : race와 비슷, 그러나 이행된 프로미스만 반환 (거절된 건 스킵)

 

Async / Await 

:promise 보다 가독성 좋고, 순서 유지 가능 

async : 프로미스 반환

await : 프로미스가 처리되는 것을 기다림. 

try/catch 처리 

 

Generator 

: 함수의 실행을 중간에 멈췄다가 재개 가능 

next() : 다음 함수 실행, value와 done을 가진 객체 반환 

return():

throw() :