[React] 자바스크립트 문법 정리#2

스프레드 레스트 연산자 ( Spread & Rest Operators ) ( ... )

스프레드 연산자(Spread)

Spread( 펼치다, 퍼뜨리다 )라는 단어답게 배열이나 객체를 펼쳐 놓습니다

예를 들어 oldArray가 있는데 이 oldArray배열에 있는 모든 원소들을 새로운 배열에 추가하고

그리고 거기에 원소 4를 더 추가하고 싶다면, 아래와 같이 사용합니다.

// 배열 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4]; console.log(newNumbers); //결과 --> [ 1, 2, 3, 4]

아주 쉽게 배열을 복사하거나, 안전하게 이전 객체를 복사해서 아래와 같이 객체에

프로퍼티를 추가할 수 있습니다.🙋🏻‍♂️

// 객체 const person = { name: 'Max' }; const newPerson = { ...person, age: 28 } console.log(newPerson); --> [object Object] { age: 28, name: "Max" }

레스트 연산자(Rest)

레스트(Rest) 연산자란 쉽게 설명하자면 함수에 전달된 무한 개수의 인수를 처리하는 경우입니다.

인수를 받아들여 그 인수를 인쇄하는 함수의 예를 들어 보겠습니다.

먼저, 인수(arguments)가 하나라면?👇🏻

const rest = (a) =>{ console.log(a) } rest(2) ---> 2

이렇게 인수값을 받아 처리하여 결과값으로 콘솔에 2가 출력될 것입니다.

두번째로 인수(arguments)가 두개라면?👇🏻

const rest = (a, b) =>{ console.log(a) console.log(b) console.log(a, b) } rest(2,5) ---> 2 ---> 5 ---> 2 5

이런식으로 처리 될것입니다.

이제 N 개의 인수를 처리하고 싶을때 사용하는 것이 Rest 연산자인데 {...}을 사용하여 전달된 입력값을 배열로 그룹화합니다.

const filter = (...args) => { return args.filter(el => el ===1); } console.log(filter(1,2,3)); --> [1] console.log(filter(2,3)); --> [] console.log(filter(2,3,1)); --> [1]

위와 같이 파라미터부분에 (...args)를 넣어 필터를 통해 연산을 수행하는 결과를 볼 수있습니다.👩🏻‍💻📝

배열 메소드를 filter()처럼 사용할 수 있고, filter는 배열에서 전달되는 모든 원소들에 대해 함수를 실행합니다그래서 원소를 전달하고 화살표 함수를 사용해서 원소가 1과 같은지, 아닌지를true나 false로반환합니다

인자와 파라미터가 헷갈린다면?!

const rest(a) { // 여기서 a 는 파라미터
  console.log(a); // 여기서 a 는 인자
}
rest('arguments'); // 여기서 'hello world' 는 인자

Spread와 Rest를 잘쓰면 아래와 같은 응용도 할 수 있다.

const rest = (...args) => { return args.filter(el => el === 1); } const num = [1, 2, 3, 4, 5, 6]; const result = rest(...num); console.log(result);

 

---

 

구조분해할당( Destructuring )

스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 여러분이 사용하는어떤 것에 전달합니다.

하지만 구조분해 할당은 원소나 프로퍼티를 하나씩만 가져와서 변수에 저장합니다,

배열과 객체를 예를 들어보겠습니다.

const numbers = [1,2,3]; [num1, num2] = numbers; console.log(num1,num2); --> 1, 2 const numbers = [1,2,3]; [num1, ,num3] = numbers; //[num1, ,num2] = numbers; 변수이름은 상관없음 console.log(num1,num2); -->1, 3

객체또한 같다

cosnt numbers = {a: 42, b: true}; var {a, b} = numbers; console.log(a); // 42 console.log(b); // true

배열에서 특정 원소나 객체에서 특정 속성을 추출하는 편한 방법이 있다는 것을 잘 기억하자!!
Spread & Rest

 

---

 

참조형 및 원시형 데이터 타입

 

const number = 1; const num2 = number; console.log(num2) ---> 1

만약 이런 식으로 number를 생성한다면, 이것은 기본형입니다

이 말은 실제로 number의 복사본을 생성한다는 것이고 그것이 num2입니다

number, string, boolean 이런 것들은 모두 기본형 자료 타입이고, 재할당하거나 변수를
다른 변수에 저장할 때마다 값을 복사합니다,

 

객체와 배열은 참조형 자료 타입입니다무슨 뜻인지 한번 보여 드릴께요

const person = { name: 'Max' }; const secondPerson = person; console.log(secondPerson); --> [object Object] { name: "Max" }

객체 person을 생성했고 name 프로퍼티를 갖습니다, 그런 다음 secondPerson을 생성한 다음 값으로 person을

할당합니다 콘솔 출력함수에 secondPerson을전달하고 실행하면 첫 번째 person과 같은 값을 출력하는데,

사실 객체 person을 복사한 것은 아니고,

객체 person은 ( 👉🏻 { name : 'Max' }  부분 ) 실제로 메모리에 저장되어 있고 

상수 person  ( 👉🏻 const person = )에는 메모리에 있는 주소를 가리키는 포인터를 저장합니다 

그래서 person을 secondPerson에 할당하면 포인터가 복사될 것입니다.

const person = { name: 'Max' }; const secondPerson = person; person.name = 'Menu'; console.log(secondPerson); -->[object Object] { name: "Menu" }

만약 복사된 것을  person.name을 Menu로 바꾼다면

여전히Max가 출력될 거라고 착각하는데, person을 복사해서 secondPerson에 저장했기 때문에

이름이 바뀔 거라 생각합니다

하지만 코드를 실행해 보면 name에 Menu가

출력된 것을 볼 수 있습니다, 심지어 저는 secondPerson을 출력했는데도 말이예요,

그래서 secondPerson의 이름도 바뀌었는데, 그 이유는 단지 포인터를 복사했고 person이 가리키는 메모리에 있는 동일한 객체를 가리키기 때문입니다👍🏻👍🏻

 

만약 객체나 배열을 이렇게 복사한다면, 한 앱에 있는 주소에서 객체를 조작할 수도 있기 때문입니다
그리고 실수로 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작할 수도 있습니다
그래서 "변경할 수 없는 방법" 으로 복사하는 법을 아래에서 배우겠습니다,
이 말은 포인터가 아닌 객체를 복사하는 것인데 스프레드 연산자를 사용할 수 있습니다

 

const person = { name: 'Max' }; const secondPerson = { ...person }; person.name = 'Menu'; console.log(secondPerson); --> [object Object] { name: "Max" }// menu로 바꿨는데도 불구하고

자, 위의 코드에서 보듯 이제 여기에 person 객체를 생성하고 프로퍼티( name: 'Max' )를 스프레드(...person) 하겠습니다 그러면 person객체로부터 프로퍼티와 프로퍼티의 값을 가져와서 새로 생성한 객체에 추가하는데,

중괄호를 써서 생성할 수 있습니다 const secondPerson = { ...person };

 

이제 콘솔 출력 함수로 secondPersond을 출력해도 값이 바뀌지 않습니다

포인터가 아닌 진짜 복사본을 생성했기 때문입니다.

🤘🏻객체와 배열이 참조형 자료 타입이라는 것을 꼭 기억해 두세요
만약 재할당한다면, 값이 아닌 포인터를 복사하는 것이고
그래서 진짜로 복사하고 싶다면, 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아니라
프로퍼티를 복사해야 합니다