벨로퍼트 모던 js 참고
변수
let
var // 사용 x
const //상수데이터 타입
Number
String
Boolean (true / false)
null
undefined연산자
기본연산자
+
-
*
/
++
--대입연산자
+=
-=
*=
/=논리연산자
! //계산 순서 1
&& //2
|| //3비교연산자
==
=== //타입까지 비교
!= //타입비교 안됨
>
>=
<
<=조건문
if
if (조건) {
code;
} else if (조건) {
code;
} else {
code;
};switch/case
switch () {
case '' :
code;
break;
case '' :
code;
break;
case '' :
code;
break;
default :
code;
};함수
function 이름 (파라미터 = x //기본값 설정) {
코드 (``); // Template Literal 사용가능
};화살표함수
const 이름 = (파라미터) => {
코드;
};일반 함수에서 this 는 자신이 속한 객체
화살표 함수는 다름
객체
const x = {
키1 : 원하는 값,
키2 : 원하는 값,
키3 : 원하는 값,
};
${x.키1};
${x.키2};
${x.키3};
//함수도 선언 가능, **화살표함수는 안됨객체 비구조화 할당
//위의 x값을
const {1, 2, 3} = x; // x안에 키에 이름 명명
${1};
${2};
${3};getter, setter
get x() {
code;
};
set y(value){
code;
};배열
const array = [1,2,3,4];
const objects = [{x:1},{y:2}];
a/o[n]; // 조회 - 0부터 시작
objects[key]; //키값 출력내장함수
a/o.push(); // 추가
a/o.length(); // 크기
a/o.forEach(x => code(x));
a/o.map(x => code(x));
a/o.indexOf(); //몇번째 항목인지
a/o.findIndex(a/o => a/o(x) === 1); //배열 안 배열이나 객체가 몇번째 항목인지
a/o.find(a/o => a/o(x) === 1); //값 자체를 반환
a/o.filter(a/o => a/o.x === 1); // 조건만족하는 값으로 새로운 배열
a/o.splice(index, n); //기존 배열 해당 index부터 n개 삭제
a/o.slice(n1, n2); // n1부터 n2까지 삭제 후 새로운 배열 생성
a/o.shift(); //배열 첫번째 원소 제거
a/o.unshift(x); //배열 앞에 원소 추가
a/o.pop(); //배열 마지막 원소 제거
a/o.concat(a/o); //배열 합치기
a/o.join(조건); //배열 조건으로 합쳐 문자열로 생성
a/o.reduce((accumulator,current) => code,0);//초기값) //acc와 cur을 파라미터로 가져와 결과 반환
a/o.include('x'); //x가 존재하면 true, 없으면 false반복문
for
for (초기값(let i = 0); 조건(i < x.lengh); 변화(i++)){
code;
};
for (let x of objects){
code;
};
for (let key in objects){
`${key}:${objects[key]}`;
};while
while (조건){
code;
};break; // 반복문 종료
continue; // 현재루프 건너뛰고 다음루프 실행prototype
objects.prototype.key = ?; //객체의 지정 key값 설정 가능
objects.call(this,'',x,y); //기본 생성자 상속class
class x extends y { //extends로 상속
constructor(1,2,3){
super(); // super는 생성자
code;
}
code;
};삼항연산자
조건 ? true일때 : false일때 //중첩사용도 가능하지만 가독성 때문에 x truthy && falsy
falsy = {null, undefined, '', NaN}; //falsy !을 붙여주면 true로 바뀜
//이외엔 다 truthy
단축 평가 논리 계산법
a && b // a가 truthy 하면 b값 출력, a가 falsy하면 a값 출력
a || b // a가 truthy 하면 a값 출력, a가 falsy하면 b값 출력비구조화 할당 (구조분해) 문법
array/objects 안에 값을 다른 이름으로 명명해 가져옴
spread, rest
[...a/o,another] //...를 이용해 기본 a/o에 another 추가해 새로운 a/o 생성
{one,...rest} // one 을 뺀 나머지 key값을 rest로 새로운 객체 생성, 필요 파라미터 줄이기도 가능, 기존 a/o와 다른 이름으로scope
- global scope : 코드 모든 범위에서 사용 가능
- function scope : 함수 안에서만 사용 가능
- block scope : if, for, switch 등 특정 블록에서만 사용가능
but, var는 hoisting 때문에 어디서 써도 global로 적용됨 (정의되기전에 호출되면 undefined)
비동기 처리
비동기 처리가 필요한 작업
- Ajax Web API 요청
- 파일 읽기
- 암호화/복호화
- 작업예약 : setTimeout
Promise
const myPromise = new Promise((resolve, reject) =>{
//구현 성공시 resolve 호출, 실패시 reject 호출
}
myPromise.then(x=>{
code;
}).then(x=>{
code;
}).then(x=>{
code;
}).catch(e=>{
code;
})
// reject(new Error()) 로 에러 강제 발생장점 : 비동기 작업 수가 많아도 코드가 깊어지지 않는다.
단점 : 에러가 몇번째에서 발생했는지 알기 어려움, 특정값 공유하며 작업 처리하기 까다로움\
Async/Await (ES8)
promise를 더욱 쉽게 사용하는 방법
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function makeError() { //함수앞에 async
await sleep(1000); // 해당 프로미스 끝날때까지 기다렸다가 다음작업 수행
const error = new Error();
throw error; //에러 발생시킬때 throw 발생
}
async function process() { //에러 잡을때 try/catch 사용
try {
await makeError();
} catch (e) {
console.error(e);
}
}
process();여러개의 promise를 시작하려면 Promise.all 사용
Promise.race는 가장 빨리 끝난 것 하나의 결과/에러값만 가져옴
To Infinity, and Beyond!