Promise
const pr = new Promise( (resolve, reject) => {//code} )파라미터 함수로 들어가는 resolve는 '성공'했을 때를 뜻하고,
reject는 '실패'했을 때 실행하라는 뜻을 가짐.
resolve와 reject자리는 콜백함수로 들어가야함.
- new Promise
state : pending(대기 상태)
result : undefined⭐️ resolve(value) 되었을 때,
👇
state : fuluflled(이행된 상태)
result : value
⭐️ reject(error) 되었을 때,
👇
state : rejected(거부된 상태)
result : error
const pr = new Promise( (resolve, reject) => {
setTimeOut( () => {
resolve('OK')
}, 3000)
});
pr.then(
function(result){},
function(err){}
);
// 👇 이렇게 변환가능. 실패했을 시, catch가 기능한다.
pr.then( function(result) {} ).catch (
function(err){}
).finally(
function(){
console.log('Success')
}
)
-
catch()를 사용했을 경우, 가독성이 뛰어날 뿐만 아니라, 첫 번째 실행함수에서 에러가 날 경우 잡아줄 수 있음.
-
finally()는 이행이든 거부든, 처리가 완료되면 항상 실행된다.
⭐️ 로딩화면을 없애고자 할 때, 유용하다. -
Promise.all은 하나라도 resolve(성공)하지 않으면, 실행을 하지 않는다. 중요한 정보를 보여줘야 할 때, 사용.
모든 작업이 끝날 때 까지 기다렸다가, 수행한다. -
Promise.race는 하나라도 resolve(성공)하면, 실행을 하지 않는다. 하나라도 먼저 끝나면, 그 상태로 기능을 끝낸다.
- ex : 용량이 큰 이미지를 보여줄 때, 그 중 하나만 성공해도 보여주는 상황일 경우에 쓰인다.
### async await
함수 앞에 async를 적으면 무조건 promise를 반환한다.
때문에 함수를 반환하고, .than()을 사용할 수 있음.
async function getName() {
// return "Mike";
return Promise.resolve("Tom")
}
getName().than((name) => {
console.log(name);
})Array
- 배열 : array
- ⭐️ 배열도 객체의 한 종류이다.⭐️ key:value - array에는 length 속성이 있다. (길이)
- 배열의 length 속성은 배열의 최대 인덱스 + 1을 의미할 뿐이다.
- 배열을 많이 쓰는 이유는?
==> ⭐️ 반복문에 최적화되어있기 때문이다. 배열이 유일하게 가지고 있는 'length' 속성 때문임. ⭐️
-
다른 언어에서 배열은 요소가 모두 동일한 데이터타입을 가져야 한다. 하지만 자바스크립트에서는 배열에 모든 데이터타입이 들어간다.
-
배열의 접근, 제어
let arr1 = ['apple', 'banana']; // 배열 생성
console.log(arr1[0]); // 첫 번째 배열 인덱스에 접근
arr1[0] = 'test'; // 첫 번재 배열 제어 (값 수정) -
method는 호출의 주체가 명확하다. obj.open()
-
함수는 호출의 주체가 없다. open()
-
객체에는 '속성'과 '메서드'가 항상 존재한다.
- 배열의 요소들을 넣고 빼기
pop, push (== Stack구조) /
shift, unshift (== Queue구조)사용 예시 )
numArr = [];
numArr.push(5);
console.log(numArr);
로그엔 [5] 가 찍힘.
⭐️pop과 push를 주로 사용할 것.⭐️
=> shift와 unshift는 인덱스 맨 앞을 제거하고, 남은 인덱스들의 자리를 한 칸씩 당긴다.
이는 곧, 배열 전체 값을 움직이는 것과 같으므로 위험함.
때문에 제일 최근에 들어온 것을 빼는 Stack구조로 진행되는 .pop()∙push(arrPushElement)를 쓰도록 하자.
- 객체만의 for문은 2개가 존재.
-
for( item in Arr) // for ... in
==> Arr의 Key값을 반환. -
⭐️ for( item of Arr) ⭐️ // for ... of
==> Arr의 Value값을 반환.
- 같은 배열 반복문인 for ... in 보다 사용빈도가 높음.
(실제 배열 값 자체가 나옴. 배열에선 for ~ of 쓰는게 훨신 좋음.)
**.append()는 DOM에서 제공하는 API다.
- 코드 예제
// 1. 함수를 만듦
// 2. 배열을 입력으로 받게끔, () 사이에 매개변수를 입력해준다.
// 3. 함수 내부에 새로운 배열(빈 배열)을 만든다.
// 4. 함수 내부에 for문을 이용해서 요소 하나씩 돌아가게 한다. (for ~ of)
// 5. 그 요소가 2의 배수이면 skip하고, 2의 배수가 아니면 새로운 배열에 넣어줘요.
// 6. 만들어진 새로운 배열을 return 해요.
// 7. 함수 바깥에서 그 함수를 '호출'해서 그 값을 로그로 남긴다.
function test (arr) {
let result = [];
for(item of arr) {
if(item % 2 !== 0) {
result.push(item);
}
}
return result;
}
const testInput = [2, 3, 1, 5, 6, 7, 8, 9, 10, 122,123]
console.log(test(testInput)); 