[MDN] javascript

https://developer.mozilla.org/en-US/docs/Web
Web API, HTML, CSS, JavaScript에 대한 메서드들은 지속적으로 추가된다.
알고 있다면 유용하게 쓸 수 있지만, 모르면 아예 쓰지 못하는 것들이다.
기본적으로 제공되는 함수를 사용하면 한 줄로 해결될 문제가, 모르면 수 십 수 백줄을 적어야한다.
때문에 MDN에 정리되어 있는 각 파트별 문서들을 읽고 그 중에서 몰랐던 내용만을 따로 정리한다.

---

&&

&&는 피연산자를 왼쪽에서 오른쪽으로 평가하면서, 첫 거짓에 해당하는 값을 반환한다. 만약 모든 값이 참이라면 마지막 피연산자가 반환된다.

'' && 'foo'     // ''
2 && 0          // 0
'foo' && 4      // 4
true && true    // true
true && false   // false
'Cat' && 'Dog'  // 'Dog'
false && 'Cat'  // false

---

&&=

x &&= y는 x = x && y 의 축약형.

let a = 1, b = 0

a &&= 2  // a = 2
b &&= 2. // b = 0

---

||

||는 피연산자를 왼쪽에서 오른쪽으로 평가하면서, 첫 참에 해당하는 값을 반환한다. 만약 모든 값이 거짓이라면 마지막 피연산자가 반환된다.

false || true       // true
false || 3 === 4    // false
'Cat' || 'Dog'      // 'Cat'
'' || false         // false
false || ''         // ''
false || varObject  // varObject

---

||=

x ||= y 는 x || (x = y) 의 축약형. 즉 x가 거짓인 경우 x에 y를 할당하겠다는 의미가 됨.

const a = { duration: 50, title: '' }

a.duration ||= 10  // a.duration = 50

a.title ||= 'title is empty'  // a.title = 'title is empty'

---

?? 연산자 사용

널 병합 연산자는 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

이는 왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy 값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 ( || ) 와는 대조된다.

const foo = null ?? 'default string'  // 'default string'

const foo = 0 ?? 42  // 0

const foo = 0 || 42  // 42

---

??=

x ??= y 는 x = x ?? y 의 축약형.

const a = { duration: 50 }

a.duration ??= 10  // a.duration = 50

a.speed ??= 25  // a.speed = 25

---

Array.prototype.at()

배열의 특정 index에 해당 하는 값을 얻는 메서드.

const arr = [5, 12, 8, 130, 44]

arr.at(2)   // 8
arr.at(-2)  // 130 

---

Array.prototype.copyWithin()

배열의 일부분을 특정 위치로 복사하는 메서드. 이때 배열의 length를 변화시키지 않는 선에서의 복사가 수행된다.

배열 자체를 수정하는 메서드이다.

copyWithin(target, start, end)

target을 start 이상 end 미만의 배열로 대체

const arr = ['a', 'b', 'c', 'd', 'e']

arr.copyWithin(0, 2, 3)  // ['c', 'b', 'c', 'd', 'e']
arr.copyWithin(1, 2)     // ['c', 'c', 'd', 'e', 'e']

---

Array.prototype.toReversed()

Array.prototype.toSorted()

Array.prototype.toSpliced()

reverse(), sort(), splice() 와 동일한 기능을 수행하는 함수들

다만 이 메서드들은 배열 자체를 수정하지 않고, 새로운 배열을 반환한다.

---

Array.prototype.with()

array.with(index, value)

array의 index 위치에 있는 element를 value로 변경. 이때 새로운 배열을 반환

const arr = [1, 2, 3, 4, 5]
arr.with(2, 6)    // [1, 2, 6, 4, 5]
console.log(arr)  // [1, 2, 3, 4, 5]

// Dense Array: 연속된 메모리 공간에 요소를 저장하는 배열
// Sparse Array: 값이 할당되지 않은 인덱스를 가지는 배열
// with method가 반환하는 배열은 항상 dense array이다.

const arr = [1, , 3, 4, , 6]
console.log(arr.with(0, 2))  // [2, undefined, 3, 4, undefined, 6]

---

Promise.all()

일반적으로 다음 코드를 계속 실행하기 전에 서로 연관된 비동기 작업 여러 개가 모두 이행되어야 하는 경우에 사용한다.

입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all은 즉시 거부한다.

const p1 = Promise.resolve(3);
const p2 = 1337;
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 5000);
});

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // 5초 후 [3, 1337, "foo"] 출력
});

Promise.all()에 인자가 주어지는 경우에는 비동기적으로, 인자가 빈 경우에는 동기적으로 동작한다.

Promise.all()은 배열 내 요소 중 어느 하나라도 거부하면 즉시 거부한다.

---

Promise.allSettled()

일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용한다.

Promise.allSettled([
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  99,
  Promise.reject(new Error('an error'))
])
.then(values => console.log(values));

// [
//   {status: "fulfilled", value: 33},
//   {status: "fulfilled", value: 66},
//   {status: "fulfilled", value: 99},
//   {status: "rejected",  reason: Error: an error}
// ]

---

Promise.any()

resolved된 첫번째 promise를 반환하는 메서드

const pErr = new Promise((resolve, reject) => {
  reject("Always fails");
});

const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "Done eventually");
});

const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Done quick");
});

Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value);  // Done quick
});

pErr > pFast > pSlow 순으로 완료됨. pErr는 reject 되기 때문에 그 다음인 pFast가 반환된다.

const failure = new Promise((resolve, reject) => {
  reject("Always fails");
});

Promise.any([failure]).catch((err) => {
  console.log(err);
});
// AggregateError: No Promise in Promise.any was resolved

resolved된 promise가 없는 경우에는 다음과 같이 에러가 발생하게 된다.

---

Promise.race()

첫번째 promise를 반환하는 메서드 (resolve, reject를 구분하지 않음)

function sleep(time, value, state) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (state === "fulfill") {
        return resolve(value);
      } else {
        return reject(new Error(value));
      }
    }, time);
  });
}

const p1 = sleep(500, "one", "fulfill");
const p2 = sleep(100, "two", "fulfill");

Promise.race([p1, p2]).then((value) => {
  console.log(value); // "two"
});

const p3 = sleep(100, "three", "fulfill");
const p4 = sleep(500, "four", "reject");

Promise.race([p3, p4]).then(
  (value) => {
    console.log(value); // "three"
  },
  (error) => {
    // Not called
  },
);

const p5 = sleep(500, "five", "fulfill");
const p6 = sleep(100, "six", "reject");

Promise.race([p5, p6]).then(
  (value) => {
    // Not called
  },
  (error) => {
    console.error(error.message); // "six"
  },
);