[React #3] JSX 문법을 익혀보자! ㅣ concat, filter, map, spread, slice, forEach

이번 포스팅에서는 concat, filter, map, slice, 스프레드(전개) 연산자에 대해서 살펴볼 것이다.

 

• 스프레드 연산자

스프레드 연산자는 깊은 복사를 실시하는 연산자이다.

아래 코드를 보자.

const a = [1,2,3]
const b = [...a];

b.push(4);

// a???

이렇게 했을 때, a의 값은 어떻게 될까?

 

정답은 [1,2,3] 그대로다.

이것이 깊은 복사이다.

 

a의 모든 값을 복사하여 새로운 메모리를 할당한 배열 b에 저장한다.

그래서 b에 새로운 값을 푸쉬해도 a에는 아무런 영향을 주지 않는다.

 

• concat

concat 함수는 추가하는 함수라고 생각하면 된다.

아래 코드를 보자.

const a = [1,2,3];
const b = a.concat(4);

// b???

이 때의 b값은 1,2,3,4 이다.

 

• filter

filter는 걸러내는 함수라고 생각하면 된다.

filter 속에는 함수를 넣어주어야 한다. 함수에서 true값 나오는 것들만 배열에 남게 된다.

아래 코드를 보자.

const a = [1,2,3]
const b = a.filter((n) => { return n != 1});

// b???

이 때의 b값은 2,3 이다.

a의 값을 n으로 순차적으로 받아오고 1만 false 나머지는 true여서 2, 3 만 남게되는 것이다.

 

• slice

slice는 잘라내는 함수이다.

아래 코드를 보자.

const a = [1,2,3];
const b = a.slice(0, 2);

// b???

이 때의 b값은 1,2 이다.

 

• forEach, map

forEach, map은 반복하는 것이라고 생각하면 된다.

차이점은 forEach는 return이 없다.

map은 return이 있다.

 

아래 코드를 보면서 살펴보자.

const a = [1,2,3]

a5.forEach((n) => { console.log}(n);}); // 리턴 x

const b = a5.map((n) => n); // 리턴 o

n은 n이다. 라고 했기 때문에

b는 [1, 2, 3]이다.

(const b = [...a])

 

forEach는 연산이나 콘솔을 찍을 때, 주로 사용된다.