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. 21.
EcmaScript 업데이트 상황 편하게 보기

http://kangax.github.io/compat-table/es2016plus/

약간 그... caniuse 느낌으로 보여준다. kangax github io_compat-table_es2016plus_

ecmascript javascript

2023. 6. 15.
JavaScript 1.2 Reference

나는 분명히 rsc 글을 쓰던 중이었는데
어쩌다보니 초창기 js 코드는 어떻게 생겼었을까 궁금해져서
검색도 해보고 gpt한테 물어도 보고 했는데 적절한 결과를 얻을 수 없었는데
그러다 아 초기 문서를 찾아보면 되겠구나 하는 생각이 들어 찾아보니
JavaScript 1.2 Reference 가 있었다

"10/31/97" ☜ 간지 난다...

wayback machine에 아카이빙된 오리지널 링크도 있었다.

javascript history

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과 다른점

promise 중 reject가 있어도 일단 모두 pending 상태를 벗어나길 기다렸다가 결과값을 반환한다.
reject를 따로 하지 않고 반환값을 변경하므로 catch를 타지 않는다.
대신 반환 결과값이 보통의 promise와 다르다. Promise<T>가 아니고 PromiseSettledResult<T>를 반환.
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

typescript javascript

2020. 10. 19.
optional destructurering

const { name = {} } = user;

const { name = {} } = user;

typescript javascript

2020. 10. 14.
array optional chaining

optionalArray?.[index]

optionalArray?.[index]

2020. 10. 8.
conditional spread

const cond = false;
const arr = [
  ...(cond ? ['a'] : []),
  'b',
];
    // ['b']

const cond = false;
const arr = [
  ...(cond ? ['a'] : []),
  'b',
];
    // ['b']

https://2ality.com/2017/04/conditional-literal-entries.html