181126 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.11.26

강의자: 김민태님

---

## promise

비동기 작업의 결과거 성공되었는지 실패되었는지 표시하기 위해 사

모든 비동기 작업의 처리결과는 두가지. 성공과 실패

코드의 흐름이 두세배 복잡해진다.

new 인스턴스를 사용해서 Promise(함수); 프로미스 생성자가 함수를 즉시 호출하면서 성공실패를

resolve, reject, 성공/ 실패. 둘다 함수이고 promise가 전달해주는 함수.

단순히 비동기 처리 하나를 위해서 나온것이 아니다. 단순 비동기 작업을 처리하면 더 복잡해질 수 있다.

비동기 작업의 복잡도가 높아질 때 promise를 사용하면 작업이 단순해진다.

function asyncT1(resolve, reject) { //promise가 넘겨주는 두개의 함수. resolve, reject 성공과 실패.

setTimeout(() => {

if (Date.now() % 2 === 0) { //date.now 호출시점의 시 %는 나머지 연산자

resolve('OK’); //성공시에 호출

} else {

reject('Error’); //실패시에 reject호출

}

}, 1000);

}

const promiseT1 = new Promise(asyncT1);

promiseT1

.then(result => console.log(result))

.catch(err => console.log(err));

성공과 실패시에 then, catch가 호출된다. 

then에게 넘겨주는 함수가 호출

catch에게 넘겨주는 함수가 호출

function asyncT1() {

return new Promise(function(resolve, reject) {

setTimeout(() => {

if (Date.now() % 2 === 0) {

resolve('OK');

} else {

reject('Error');

}

}, 1000);

})

}

const t1 = asyncT1();

t1

.then(result => console.log(result))

.catch(err => console.log(err));

위와같은 형태를 더 많이 사용한다. 거의 기본문법과 같음.

then, catch는 함수호출을 따로 안해도 됨. 함수명만 불러도 된다.

만약 여러개 작업시에 하나라도 reject이 되면 catch로 넘어간다.

Promise.resolve() //순차처리.

.then(asyncT1)

.then(asyncT2)

.then(asyncT3)

.then(result => console.log(result))

.catch(err => console.log(err));

Promise.all([asyncT1(), asyncT2(), asyncT3()]) //all은 인자로 배열을 받는다. 프로미스 객체를 넘겨줘야한다. 

.then(result => console.log(result)) //동시실행, 세가지가 모두 resolve가 되면 then이 실행, result는 세가지의 결과를 배열로.

.catch(err => console.log(err));

## async , await

promise의 후속스펙.

then, catch 의 사용단을 개선. 

function asyncT1() {

return new Promise(function(resolve, reject) {

setTimeout(() => {

if (Date.now() % 2 === 0) {

resolve('OK');

} else {

reject('Error');

}

}, 1000);

})

}

/////위는 같다, 아래가 달라짐

async function doIt() {

const t1 = await asyncT1(); //resolve가 반환하는 값을 await가 해준다. await를 쓰려면 반드시 async 함수로 감싸야한다.

console.log(t1);

}

doIt();

Await는 연산자. 오퍼레이터. 

Catch가 없는데 자바스크립트의 try catch로 reject된 것을 잡을 수 있다

Ie10까지만 사용가능. 변환을 해도 10까지만. 사용하는 측면에선 콜백함수가 없다

## 클래스

객체안에 함수는 메소드.

키밸류는 속성. 값.

함수도 객체.

객체에 소속된 함수가 두종류가 있다. 

하나는 메소드.

두번째는 정적 메소드. 

메소드는 광의적으로 함수안에 포함된 함수. 메서드들은 코드안에 this에 접근하는 것을 말한다ㅡ

정적메소드는 this를 사용하지 않는다. New 로 만든 인스턴스에 접근하지 않기 때문에.

Promise, Date, Array 등 대문자로 시작하는 한숨인데 new 를 사용하지 않고

Date.now()

Promise.all()

Array.isArray()

이러한 것들은 인스턴스에 관여하지 않고 특정기능을 사용하기 위한것들. 정적메소드

하지만 함수에 붙어있으면 어색하다. 이러한 것들을 해소하기 위해 class라는 문법이 생겼다

class키워드 클래스이름 {

   생성자 constructor(){

    } 객체와 달리 컴마없음. 

    클래스의 프로토타입에 쓸 메소드.

}

상속은 

class Son extends Parent {

    constructor(){

       super()// 상속받은 부모를 지시함. 부모의 컨스트락터를 호출

    }

}

사용하는 쪽에서는 함수처럼 부른다

다중상속은 지원하지 않는다.

반드시 new연산자로 호출해야만 한다

let son = new Son();

클래스는 내장객체도 클래스화 시켜서 상속을 받아서 다른 클래스를 만들어 낼 수도 있다(잘 사용하지는 않음. 내장객체 변형은 지양)

## 제이쿼리만들어보기

$(“.a”).css().addClass().~~~~~ ; //제이쿼리 내에서 .a의 객체를 계속 리턴. .으로 계속 이어서 처리한다. 메소드 체이닝

노트 요약

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다