구조분해할당, Spread 연산자 & Rest매개변수, 타입 [JavaScript | 학습을 위한 자료 | 한입만 REACT]

구조분해할당

 

// 구조 분해 할당
// 배열 또는 객체의 속성/값을 간단하게 변수로 추출하는 방식 

// 1. 배열의 구조 분해 할당
// 배열에 변수를 순서대로 할당 
let arr = [1, 2, 3];

let [one, two, three, four =4] = arr; // 변수 할당, 대괄호 사용
console.log(one, two, four);

// 2. 객체의 구조 분해 할당
let person = {
    name : "강진호",
    age : 36,
    hobby : "농구",
};

let { 
    name,            // person.name → name 변수에 할당
    age: myAge,      // person.age → myAge 변수에 할당
    hobby,           // person.hobby → hobby 변수에 할당
} = person;
console.log(name, myAge, hobby);


// 3. 객체 구조 분해 할당을 이용해서 함수의 매개변수를 받는 방법
// 프로퍼티 값을 바로 추출하여 함수 내부에서 사용
const func = ({name, age, hobby}) => {
    console.log(name, age, hobby);
};

func(person);

---

Spread 연산자 & Rest매개변수

// Spread 연산자 & Rest 매개변수 

// 1. Spread 연산자(...)
// 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할
// 배열/객체의 요소를 개별 값으로 분리

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
console.log(arr2);

let obj1 = {
    a: 1,
    b: 2,
};

let obj2 = { // 객체에서 사용
    ...obj1,
    c : 3,
    d : 4,
};

console.log(obj2);

function funcA(p1, p2, p3){ // 함수에서 사용
    console.log(p1, p2, p3);
}

funcA(...arr1);

// 2. Rest 매개변수
// 나머지 매개변수, 배열형태로 매개변수를 받아온다
// 함수의 나머지 인수를 배열로 수집

function funcB (one,...args) { // 뒤에는 추가 불가, 소괄호 안에 작성
    console.log(args);
}

funcB(...arr1);

---

타입

// 원시 타입 VS 객체 타입
// 값이 저장되거나 복사되는 과정이 서로 다르다.
// 원시 타입 : 값 자체로써 변수에 저장되고 복사 된다. 값 변경시 실제 메모리의 값은 수정되지 않음 추가되서 가르키도록 동작.(불변값)
// 객체 타입 : 참조값을 통해 변수에 저장되고 복사된다. 값 변경시 실제 메모리의 원본 데이터가 수정. 같은 참조값을 가르킨다.(가변값)
// 객체타입은 의도치 않게 값이 수정될 수 있어서 객체를 새로 생성하여 사용.
// 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다.
// 프로퍼티간의 비교를 하기위해서는 내장함수 사용.
// 배열과 함수도 객체이다.