async / await
Promise가 어렵다면 그보다 쉽게 쓸 수 있는 ES8 문법
async function 더하기(){ // 그냥 간단하게 함수앞에 async만 붙이면 된다.
var 어려운연산 = new Promise((성공, 실패)=>{
실패();
});
try { var 결과 = await 어려운연산 } //await은 무조건 async 함수 내부에서 사용해야 한다.
catch { 어려운연산 Promise가 실패할 경우 실행할 코드 } //실패할 경우를 대비해, catch문 이용
}
더하기() //함수 호출예시1. async, await로 <button>을 누르면 성공하는 Promise 만들기
<body>
<button id="test">버튼</button>
</body>
<script>
var 프로미스 = new Promise(function(성공, 실패){ //버튼을 클릭하면 성공으로
document.getElementById('test').addEventListener('click', function(){
성공('성공했어요');
});
})
async function 버튼누르기(){ //함수에 async 사용
try{
var 결과 = await 프로미스; //프로미스로 넘어가서 await으로 기다려준다.
console.log(결과); //성공했어요 출력
} catch { console.log('실패했어요'); } //실패했을 경우
}
버튼누르기(); //함수 호출
</script>for in / for of
반복문의 용도(for, forEach 포함)
1. 코드 단순 반복
2. 자료형에 담긴 자료들을 뽑을 때
for in
Object에 사용한다.
var 오브젝트 = { name : 'Kim', age : 30 };
for (var key in 오브젝트) { //내부 데이터 갯수만큼, 반복할 때마다 key라는 변수는 name, age이다.
console.log(오브젝트[key]); //key를 []에 넣어서 사용, key를 이렇게 .점 찍고는 사용을 못한다.
}for in 특징
1. enumerable(셀수있는이라는 뜻)이 ture인것만 출력해주고, false면 거른다.
var 오브젝트 = { name : 'Kim' }; //{ name : 'Kim' } 이걸 저장하면 Kim 이라는 자료만 달랑 저장되는게 아니라, Kim과 함께 비밀스러운 속성들 3개가 true로 저장된다.
console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); //{value: "Kim", writable: true, enumerable: true, configurable: true} 출력2. 부모의 prototype에 저장된 것도 출력해준다. 이게 단점으로 작용한다.
class 부모 {
}
부모.prototype.name = 'Park';
var 오브젝트 = new 부모();
for (var key in 오브젝트) {
if (오브젝트.hasOwnProperty(key)) // Park이 싫다면, 오브젝트가 이 key값을 직접 가지고 있냐라고 조건문을 단다. 그래서 오브젝트가 가진 것만 반복시키고 싶으면 이걸 꼭 써야한다.
console.log(오브젝트[key]); //Park을 출력하지 않는다. 부모만 가지고 있고 오브젝트는 없기때문이다.
}for of
array, 문자, arguments, NodeList, Map, Set에 사용한다.
var 어레이 = [2,3,4,5];
for (var 자료 of 어레이) {
console.log(자료);
}for of 특징
1. 정확히 말하면 iterable인 자료형들에만 적용가능하다.
iterable - Symbol.iterator 이라는 일종의 메소드를 가지고 있는 자료형들을 뜻한다.
var 어레이 = [2,3,4,5];
console.log( 어레이[Symbol.iterator]() ); // 깊게 이해는 하지말고, 이걸 가지고 있으면 for of 반복문을 쓸 수 있구나~라고 알고 있자.2. for of 사용되는 NodeList
document.getElementsByClassName()이나 document.querySelectorAll() 이런 셀렉터로 찾은 요소들이 [] 대괄호안에 담겨오는데 array는 아니고 NodeList라는 자료형이라고 부른다.
HTML요소들을 하나씩 꺼내서 처리할 때, 매우 자주 쓸 수 있는 반복문이라고 보면된다.(하지만 for of의 호환성 주의)
예시1. 구구단
let 데이터 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (let 자료1 of 데이터) {
for (let 자료2 of 데이터) {
console.log(`${자료1}*${자료2} = ${자료1*자료2}`) //1*1 = 1 부터 9*9 = 81까지 출력
}
}
예시2. key들의 마지막 숫자 떼버리기
tip
처음부터 반복문 돌리는게 익숙치않다면, 하나만 하드코딩해보자. 그리고 그걸 반복문돌리는게 훨씬 쉽다.
var products = [{
name1: 'chair',
price1: 7000
},
{
name2: 'sofa',
price: 5000
},
{
name1: 'desk',
price3: 9000
},
];
for (let array of products) // array라서 for of
for (let key in array) { // object라서 for in
let value = array[key]; //일단 데이터 값을 따로 저장하고
newKey = key.slice(0, -1); //기존 key의 마지막 숫자를 떼버린다.
array[newKey] = value; //새로운 key에 데이터 다시 저장
delete array[key] //기존 key들은 없앤다.
}
console.log(products)
기억보다는 기록을 하자.