notes

#javascript

2023. 7. 7.
Case Insensitive Sort

arr.sort((x, y) => x.toLowerCase().localeCompare(y.toLowerCase()))
//                                ^^^^^^^^^^^^^^^ 🀯
arr.sort((x, y) => x.toLowerCase().localeCompare(y.toLowerCase()))
//                                ^^^^^^^^^^^^^^^ 🀯

2023. 6. 15.
JavaScript 1.2 Reference

  1. λ‚˜λŠ” λΆ„λͺ…νžˆ rsc 글을 μ“°λ˜ μ€‘μ΄μ—ˆλŠ”λ°
  2. μ–΄μ©Œλ‹€λ³΄λ‹ˆ 초창기 js μ½”λ“œλŠ” μ–΄λ–»κ²Œ μƒκ²Όμ—ˆμ„κΉŒ κΆκΈˆν•΄μ Έμ„œ
  3. 검색도 해보고 gptν•œν…Œ 물어도 보고 ν–ˆλŠ”λ° μ μ ˆν•œ κ²°κ³Όλ₯Ό 얻을 수 μ—†μ—ˆλŠ”λ°
  4. κ·ΈλŸ¬λ‹€ μ•„ 초기 λ¬Έμ„œλ₯Ό 찾아보면 λ˜κ² κ΅¬λ‚˜ ν•˜λŠ” 생각이 λ“€μ–΄ μ°Ύμ•„λ³΄λ‹ˆ
  5. JavaScript 1.2 Reference κ°€ μžˆμ—ˆλ‹€

image

"10/31/97" ☜ 간지 λ‚œλ‹€...

wayback machine에 μ•„μΉ΄μ΄λΉ™λœ μ˜€λ¦¬μ§€λ„ 링크도 μžˆμ—ˆλ‹€.

2023. 6. 15.
`for (; amount--; )`

react-scrollbars-custom의 예제λ₯Ό 보닀가 좩격적인 κ±Έ 봐갖고

export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
  const result = [];

  for (; amount--; ) { // ??
    result.push(
      <p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
        {getRandomParagraphText()}
      </p>
    );
  }

  return result;
}
export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
  const result = [];

  for (; amount--; ) { // ??
    result.push(
      <p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
        {getRandomParagraphText()}
      </p>
    );
  }

  return result;
}

?

  for (; amount--; ) {
  for (; amount--; ) {

?? 🀯

mdn의 for κ΄€λ ¨ λ¬Έμ„œλ₯Ό λ³΄λ‹ˆ

All three expressions in the head of the for loop are optional. For example, it is not required to use the initialization block to initialize variables

🀯🀯

이 외에도 좩격적인 게 더 μžˆμ—ˆλŠ”λ°:

Using for without a body

🀯🀯🀯

Using for with two iterating variables

🀯🀯🀯🀯

2023. 6. 5.
`URL` object

const url = new URL('https://sehyunchung.dev')

url.toString() // 'https://sehyunchung.dev/' <- trailing slash μƒκΈ°λŠ” 것에 유의

url.pathname = 'post/1'

url.toString() // 'https://sehyunchung.dev/post/1' <- trailing slash μ—†μŒ

url.searchParams.set('key', 'value')

url.toString() // 'https://sehyunchung.dev/post/1?key=value'
const url = new URL('https://sehyunchung.dev')

url.toString() // 'https://sehyunchung.dev/' <- trailing slash μƒκΈ°λŠ” 것에 유의

url.pathname = 'post/1'

url.toString() // 'https://sehyunchung.dev/post/1' <- trailing slash μ—†μŒ

url.searchParams.set('key', 'value')

url.toString() // 'https://sehyunchung.dev/post/1?key=value'
// console.log(url)
{
  hash: ""
  host: "sehyunchung.dev"
  hostname: "sehyunchung.dev"
  href: "https://sehyunchung.dev/post/1?key=value"
  origin: "https://sehyunchung.dev"
  password: ""
  pathname: "/post/1"
  port: ""
  protocol: "https:"
  search: "?key=value"
  searchParams: URLSearchParams {size: 1}
  username: ""
}
// console.log(url)
{
  hash: ""
  host: "sehyunchung.dev"
  hostname: "sehyunchung.dev"
  href: "https://sehyunchung.dev/post/1?key=value"
  origin: "https://sehyunchung.dev"
  password: ""
  pathname: "/post/1"
  port: ""
  protocol: "https:"
  search: "?key=value"
  searchParams: URLSearchParams {size: 1}
  username: ""
}

url.pathname = ''

url.toString() // "https://sehyunchung.dev/"

url.pathname = 1

url.toString() // "https://sehyunchung.dev/1"

url.pathname = null

url.toString() // "https://sehyunchung.dev/null" ?!

url.pathname = undefined

url.toString() // "https://sehyunchung.dev/undefined" ?!
url.pathname = ''

url.toString() // "https://sehyunchung.dev/"

url.pathname = 1

url.toString() // "https://sehyunchung.dev/1"

url.pathname = null

url.toString() // "https://sehyunchung.dev/null" ?!

url.pathname = undefined

url.toString() // "https://sehyunchung.dev/undefined" ?!

2020. 11. 19.
Beware! Array methods will do shallow copies

const obj1 = { id: 1, name: "obj1" };
const obj2 = { id: 2, name: "obj2" };
const obj3 = { id: 3, name: "obj3" };

const arr = [obj1, obj2, obj3];

const mappedArr = arr.map((obj) => obj);
const filteredArr = arr.filter((obj) => obj.id !== 3);
const reducedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, item];
}, []);

const mappedAndSpreadedArr = arr.map((obj) => ({ ...obj }));
const reducedAndSpreadedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, { ...item }];
}, []);

console.log(obj1 === mappedArr[0]); // true
console.log(obj1 === mappedAndSpreadedArr[0]); // false

console.log(obj1 === filteredArr[0]); // true

console.log(obj1 === reducedArr[0]); // true
console.log(obj1 === reducedAndSpreadedArr[0]); // false

const findedObj1 = mappedArr.find((obj) => obj.id === 1);
findedObj1.name = "lol";
console.log(obj1.name); // 'lol'

const findedObj2 = mappedAndSpreadedArr.find((obj) => obj.id === 2);
findedObj2.name = "lol";
console.log(obj2.name); // 'obj2'
const obj1 = { id: 1, name: "obj1" };
const obj2 = { id: 2, name: "obj2" };
const obj3 = { id: 3, name: "obj3" };

const arr = [obj1, obj2, obj3];

const mappedArr = arr.map((obj) => obj);
const filteredArr = arr.filter((obj) => obj.id !== 3);
const reducedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, item];
}, []);

const mappedAndSpreadedArr = arr.map((obj) => ({ ...obj }));
const reducedAndSpreadedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, { ...item }];
}, []);

console.log(obj1 === mappedArr[0]); // true
console.log(obj1 === mappedAndSpreadedArr[0]); // false

console.log(obj1 === filteredArr[0]); // true

console.log(obj1 === reducedArr[0]); // true
console.log(obj1 === reducedAndSpreadedArr[0]); // false

const findedObj1 = mappedArr.find((obj) => obj.id === 1);
findedObj1.name = "lol";
console.log(obj1.name); // 'lol'

const findedObj2 = mappedAndSpreadedArr.find((obj) => obj.id === 2);
findedObj2.name = "lol";
console.log(obj2.name); // 'obj2'

2020. 10. 23.
Promise.allSettled

λͺ¨λ“  promiseκ°€ resolve/reject 되기λ₯Ό κΈ°λ‹€λ Έλ‹€κ°€ 각 promise의 resultλ₯Ό λ°˜ν™˜ν•œλ‹€.

Promise.allκ³Ό λ‹€λ₯Έμ 

  1. promise 쀑 rejectκ°€ μžˆμ–΄λ„ 일단 λͺ¨λ‘ pending μƒνƒœλ₯Ό λ²—μ–΄λ‚˜κΈΈ κΈ°λ‹€λ Έλ‹€κ°€ 결과값을 λ°˜ν™˜ν•œλ‹€.
  2. rejectλ₯Ό λ”°λ‘œ ν•˜μ§€ μ•Šκ³  λ°˜ν™˜κ°’μ„ λ³€κ²½ν•˜λ―€λ‘œ catchλ₯Ό 타지 μ•ŠλŠ”λ‹€.
  3. λŒ€μ‹  λ°˜ν™˜ 결과값이 λ³΄ν†΅μ˜ promise와 λ‹€λ₯΄λ‹€. Promise<T>κ°€ μ•„λ‹ˆκ³  PromiseSettledResult<T>λ₯Ό λ°˜ν™˜.
  4. PromiseSettledResultλŠ” μ•„λž˜μ™€ 같이 생겼닀.
// fullfiled
{
  status: "fullfiled",
  value: T
}

// rejected
{
  status: "rejected",
  reason: any
}
// fullfiled
{
  status: "fullfiled",
  value: T
}

// rejected
{
  status: "rejected",
  reason: any
}

μ‹€μ œλ‘œ 돌렀보면 μ•„λž˜μ™€ κ°™λ‹€.

Screen Shot 2020-10-23 at 12 04 57 PM Playground

Ref

Promise.allSettled