자바스크립트, ...

1. 분해 연산자

배열이나 문자열 등의 Itarable 객체를 분해

 

const x = ['b', 'c'];

const y = ['a', ...x, 'd', 'e']; // ['a', 'b', 'c', 'd', 'e']. 배열 x 의 요소들을 분해해서 배열 y 에 포함

const z = [...'Hi, there']; // ['H', 'i', ' ', 't', 'h', 'e', 'r', 'e']. 문자열을 문자 배열로 분해. 문자열도 개념상 문자의 배열

const a = [1, 2];

const b = [0, ...a, 3]; // [0, 1, 2, 3]. 숫자 배열에도 동일하게 적용

 

배열이나 객체에 '분해 할당' 적용
const [a, b] = ['a', 'b']; // a 는 'a', b 는 'b'
const [a, b] = () => { return ['a', 'b']; } 함수의 리턴값을 분해 할당
const x = {a: 'a1', b: 'b1'};

// 배열이나 Iterable 인 경우,

// for(const item of y) { ..... } // ... 와 구분하기 위해 점을 5개로 표시. 이하 동일

// 배열은 forEach(.....) 도 됨
for(const [x1, x2] of Object.entries(x)) { // object 에서 entry 를 추출
  // for 루프의 첫번째, const x1 에는 'a' (x 의 a 속성명), const x2 에는 'a1'(x 의 a 속성값)
  // for 루프의 두번째, const x1 에는 'b'(x 의 b 속성명), const x2 에는 'b1'(x 의 b 속성값)

  // map 이 Map 타입인 경우 key, value 이기 때문에.. for(const [k, v] of map) { ..... } 가능

  // [...map], [...m.entries()], [...m.keys()], [...m.values()] 로 분해 할당 가능
}
const [a, b] = ['a', 'b', 'c', ]; // a 는 'a', b 는 'b'
const [a, ...b] = ['a', 'b', 'c']; // a 는 'a', b 는 ['b', 'c']
const [a, ...b] = 'abc'; // a 는 'a', b 는 ['b', 'c']
const { min, max } = Math; // min 은 Math.min, max 는 Math.max 와 동일하게 작동 (import 에서도 유사)

function foo1(bar, baz) {
  // bar.x, bar.y
  // baz.x, baz.y
}
를 아래와 같이 사용 가능
function foo2([x1,y1], [x2,y2]) { // 파라미터는 복잡하지만
  // x1, y1. 함수 안에서는 간략하게 사용
  // x2, y2
}
const a = [a1, a2];
const b = [b1, b2];
foo1(a, b) 와 foo2(a, b) 는 동일 결과
function foo2({x: x1, y: y1}, {x: x2, y: y2}) { // 배열 대신 object 형태
  ..... // x1, y1, x2, y2 등을 사용
}

// component 에서 export foo, bar; 인 경우..
import { foo, bar } from '.....'; // foo 와 bar 로 사용
import Baz from '.....'; // Baz.foo 와 Baz.bar 으로 사용

 

 

 

2. 나머지 매개변수

(함수에서) 여러개의 인자를 배열에 모아서 전달

함수의 파라미터들 중 맨 마지막에 기술.

 

const x = [1, 2, 3, 4, 5];

Math.max(...x); // 5 리턴. 

Math.max(100, -1, ...x); // 100 리턴

function foo(...x) {

  for(item of x) {

    ...

  }

  //x.forEach(item => {

  //  ...

  //}

}

function foo([x, y, ...aaa], ...bbb]) { ... } // 배열 대신, 객체를 표시하는 {} 사용 가능

 

 

 

3. 표현식

이곳에 사용된 '...' 는 실제 코드가 아니라, "어떤 문자나 문자열을 사용해도 된다" 는 이야기.

[...] 대괄호 안에 있는 어떤 문자에든 일치

[^...] 대괄호에 포함되지 않은 어떤 문자에든 일치

(...) 그룹

(?:...) 그룹만

(?<=...) 긍정 룩비하인드 어서션

(?<!...) 부정 룩비하인드 어서션