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

ts enum spread

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
enum TestStatus {
  PENDING,
  ACCEPTED,
  WRONG_ANSWER,
}
console.log(Object.values(TestStatus));
// [ 'PENDING', 'ACCEPTED', 'WRONG_ANSWER', 0, 1, 2 ]

export enum Actor {
  USER = 'USER',
  HOST = 'HOST',
  ADMIN = 'ADMIN',
}

console.log(Object.values(Actor));
// [ 'USER', 'HOST', 'ADMIN' ]
  • 일반 Numeric enums의 경우 멤버 이름과 값이 나온다
  • String enums의 경우 값만 나온다
  • es2017 이상에서 사용할 수 있다

참고

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

js spread syntax `...` 연산자

1
2
3
4
5
6
const arr = [1, 2, 3];
console.log(arr); // [1,2,3]
console.log(...arr); // 1 2 3
console.log(1, 2, 3); // 1 2 3
console.log([...arr]); // [1,2,3]
console.log(arr === [...arr]); // false
  • 리액트를 처음 공부할 때 자주 접하면서 알게 된 연산자다
  • 상태를 변경하려면, 완전히 새로운 객체를 대입시켜줘야 한다
  • (참조하는 주소를 이전이랑 다르게 해야 state 갱신이 일어났다고 판단하고 화면을 갱신한다)
  • 자바스크립트에는 괴랄한 문법이 많구나 느꼈었다
  • 한 꺼풀 벗겨내는 연산자라고 생각하면 쉽다

배열에서 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 함수 인자 넘기기
{
  const pram = [1, 2];

  function add(a, b) {
    return a + b;
  }

  add(...pram); // === add(1, 2); // 3
}

// 함수 파라미터
{
  const pram = [1, 2, 3, 4, 5];

  function add2(...args) {
    return args.reduce((p, c) => p + c, 0);
  }

  const result1 = add2(...pram);
  console.log(result1);
  const result2 = add2(10, 20, 30);
  console.log(result2);
}

// 배열 이어 붙이기
{
  const prefix = 111;
  const subfix = 999;
  const arr = [1, 2, 3];
  const newArr = [prefix, ...arr, subfix];
  console.log(newArr); // [111, 1, 2, 3, 999]
}

객체에서 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 객체 복사 및 값 일부 수정
{
  const obj = {
    a: 1,
    b: 2,
  };
  const newObj = {
    ...obj,
    b: 10,
  };

  console.log(obj === newObj); // false
  console.log(obj); // b===2
  console.log(newObj); // b===10
}

참고

카테고리

아카이브

광고

×