게시 됨 업데이트 됨javascript1분안에 읽기 (약 159 단어)

js void operator, no-floating-promises

  • void ; 주어진 표현식을 평가하고 undefined를 반환합니다.

프로미스 다룰 때 주의할 점

  • no-floating-promises라는 룰이 있는데, 프로미스를 핸들하라는 것이다
  • 무시하고 싶은 경우에 void를 붙여줄 수 있는데,
  • 이 경우 내부에서 throw하는 에러를 외부에서 받지 못한다 (= catch에 안걸린다)
example.ts
1
2
3
4
5
6
7
8
9
10
const f = async () => {
  // ...
  throw Error('에러 발생');
};

try {
  void f();
} catch (error) {
  console.log(error); // not work!
}

참고

 게시 됨 업데이트 됨javascript몇 초안에 읽기 (약 74 단어)

1K 1천 1.1천 같이 숫자를 포맷하기

1천, 1만, 1.1만

  • 숫자 표기가 길어질 때가 있다. 짧게 단위를 붙여서 표기해보자
example.ts
1
2
3
4
5
6
7
const compactNumberFormatter = new Intl.NumberFormat('ko', {
  notation: 'compact',
});

function compactNumber(number: number): string {
  return compactNumberFormatter.format(number);
}

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 165 단어)

js template literals

1
2
3
4
5
6
7
8
9
10
function wow(strings, ...values) {
  console.log(strings);
  console.log(values);
  // ["안녕하세요. 제 이름은", "입니다.", ""]
  // ['친성', '와우 엄청난 문법이다']
}

const name = '친성';
const suffix = '와우 엄청난 문법이다';
wow`안녕하세요. 제 이름은 ${name} 입니다. ${suffix}`;
  • 와우
  • css in js 할 때 쓰던 문법인가?!

String.raw()

1
2
3
4
const filePath = String.raw`C:\Development\profile\aboutme.html`;

console.log(`The file was uploaded from: ${filePath}`);
// "The file was uploaded from: C:\Development\profile\aboutme.html"
  • 오우.. \가 그대로 출력된다!

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 157 단어)

promise all vs allSettled

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo')
);
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result.status))) // 여기에 걸림
  .catch((err) => console.error(err));
// > "fulfilled"
// > "rejected"

Promise.all(promises)
  .then((results) => results.forEach((result) => console.log(result.status)))
  .catch((err) => console.error(err)); // 여기에 걸림
// > foo
  • all은 한개라도 실패하면 종료
  • allSettled은 실패하더라도 모든 프로미스 실행

allSettled 값 꺼내쓰기

example allSettled
1
2
3
4
const [job1, job2] = await Promise.allSettled(promiseJobs);
if (job1.status === 'rejected') throw job1.reason;

console.log(job1.value);
  • rejected : reason에서 실패사유를
  • fulfilled : value에서 값을 꺼내 쓸 수 있다

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 140 단어)

js primitive

1
2
const PrimitiveType =
  string | number | bigint | boolean | undefined | symbol | null;
  • primitive value are immutable

array fill

Array.fill
1
2
3
4
5
6
7
const arr1 = new Array(2).fill({});
arr1[0].a = 1;
console.log(arr1); // [{a:1}, {a:1}] // 전부다 적용됨

const arr2 = new Array(2).fill(0);
arr2[0] = 1;
console.log(arr2); // [1, 0] // 하나만 적용됨

react state

useState
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [state, setState] = useState(0);
const [state2, setstate2] = useState<number[]>([]);

const onClickHandler = () => {
  setState(1); // 제대로 렌더링 됨

  state2.push(1);
  setstate2(state2); // 레퍼런스가 달라지지 않아서 리렌더링 안됨
  console.log({ state2 }); // 로그는 제대로 찍힘
};

const onClickHandlerFix = () => {
  setstate2((prev) => [...prev, 1]); // 레퍼런스를 바꿔줘야 리렌더링
};

참고

 게시 됨 업데이트 됨javascript몇 초안에 읽기 (약 56 단어)

js number comma

example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  const n = 11111111111111;
  console.log(n.toLocaleString());
  // 11,111,111,111,111

  // console.log(navigator.languages);
}

{
  const n = 11111111111111;
  const nuberWithCommas = n.toLocaleString('ko-KR');
  console.log(nuberWithCommas);
  // 11,111,111,111,111
}

참고

 게시 됨 업데이트 됨javascript몇 초안에 읽기 (약 63 단어)

js array range

example.ts
1
2
3
4
5
6
7
// https://stackoverflow.com/a/33457557
const range = (start: number, end: number) =>
  new Array(end - start).fill(0).map((_, idx) => start + idx);

// https://stackoverflow.com/a/10050831
const range = (start: number, end: number) =>
  [...new Array(end - start).keys()].map((idx) => start + idx);
  • keys() 같은 걸 활용할 수도 있다니…

참고

카테고리

아카이브

광고

×