javascript ES6 문법

윤로그·2021년 9월 21일

JavaScript

목록 보기
6/9
post-thumbnail

for of

  • 별도의 변수를 선언하지않아도 배열의 원소를 하나씩 가져옴
const seoul = ['강동구', '강서구', '강남구', '강북구']

for (let index of seoul) {
  	console.log(index)
}
//강동구 강서구 강남구 강북구

for in

  • index를 가지고 원하는 방식으로 원소를 가져올 수 있음
const seoul = ['강동구', '강서구', '강남구', '강북구']

for (let index in seoul) {
	console.log(index, seoul[index])
}
// 0 강동구
// 1 강서구
// 2 강남구
// 3 강북구

forEach

  • 별도의 변수를 선언하지않아도 배열의 원소를 하나씩 가져옴
let newArray = ['윤승근', '고효민', '김지호', '나민지']

newArray.forEach((people) => {
    console.log(people)
})
// 윤승근
// 고효민
// 김지호
// 나민지

Arrow Functions

const newFunction = () => {
	console.log('윤로그')
}

newFunction();
// 윤로그

const newFunction = () => console.log('윤로그')
// 윤로그 (한 줄의 코드로 끝나는 경우 {} (중괄호) 생략 가능

Promise

  • 비동기 처리를 위해 사용하는 문법 콜백 지옥(Callback Hell) 해결

상태

1. Promise 처음 생성 시 Pending(대기) 상태

const promise = new Promise((resolve, reject) => {});
console.log(promise);

// 대기

2. 조건 분기를하여 resolve가 실행되면 Fulfilled(이행) 상태

const promise = new Promise((resolve, reject) => {
	resolve();
});
console.log(promise);
// 이행

3. reject가 실행되면 rejectred(실패) 상태

const promise = new Promise((resolve, reject) => {
	reject();
});

console.log(promise);
// 실패

Producer

  • Promise를 생성하면 Promise의 내부 코드 블럭이 실행 이를 Executor라고 함
    이 Executor의 실행 결과에따라 조건 분기를하여 resolve 혹은 reject 호출
const isReady = true;
// 1. Producer

const promise = new Promise((resolve, reject) => {
	// Executor
  console.log("프로미스 생성");
  if (isReady) {
    resolve("Ready");
  } else {
    reject("Not ready");
  }
});
// 프로미스 생성

Consumer

  • Promise의 결과에따라 후처리를 함 Promise가 정상적으로 실행되서 resolve가 되었으면 then을 통해 처리 reject가 될 경우 catch를 통해 처리
const isReady = true;
// 1. Producer
const promise = new Promise((resolve, reject) => {
  console.log("프로미스생 생성");
  if (isReady) {
    resolve("Ready");
  } else {
    reject("Not ready");
  }
});

// 2. Consumer
promise
	// promise에서 resolve가 될경우
  .then(messsage => {
    console.log(messsage);
  })
	// promise에서 reject가 될경우
  .catch(error => {
    console.error(error);
  })

// 프로미스 생성
// Ready

0개의 댓글