object, spread, rest , 비구조화 할당

프로퍼티

1. js에서는 객체 내부의 필드를 프로퍼티라고 부른다.
2. 일반적으로 . 을 사용해서 프로퍼티에 접근한다.
3. 만약 프로퍼티 이름에 "-"와 같은 특수문자가 들어가 있거나 프로퍼티의 이름에 규칙성이 있어서 한 번에 가져와야 할 때에는  []를 사용해서 접근한다.

// JS에서는 객체 내부의 필드를 프로퍼티라고 부른다.
let user = {
    name: "이정륜",
    age: 20,
    address: "경기도",
    introduce: () => {
        console.log("Hi😍");
    },
};
console.log(typeof user);
user.introduce();

// 일반적으로 .를 사용해서 프로퍼티에 접근한다.
console.log(user.name);
// 만약 프로퍼티 이름에 "-"와 같은 특수문자가 들어가 있거나
// 프로퍼티 이름에 규칙성이 있어서 한 번에 가져와야 할 때에는
// []를 사용해서 프로퍼티에 접근한다.
console.log(user["name"]);

object
Hi😍
(2)이정륜

 

 

 

let lunch = new Object();

lunch.name = "김밥";
lunch.price = "3000";

console.log(lunch);

lunch.pay = () => {
    console.log("결제 완료");
};

lunch.pay();

{name: '김밥', price: '3000'}
결제 완료

 

 

 

 

// 마트에 등록되지 않은 고객이 3명이다.
// 고객별 정보는 다음과 같다.

// 1)
// 이름: 홍길동
// 나이: 30
// 포인트: 3500

// 2)
// 이름: 이순신
// 나이: 22
// 포인트: 0

// 3)
// 이름: 장보고
// 나이: 66
// 포인트: 9500

// 3명을 모두 마트에 등록 시킨다.
// 마트 객체를 만들고 각 고객을 프로퍼티로 선언한다.




// 빈 객체를 생성하여 market 변수에 할당
const market = new Object();

// 사용자 객체들을 생성
const user1 = { name: "홍길동", age: 30, point: 3500 };
const user2 = { name: "이순신", age: 22, point: 0 };
const user3 = { name: "장보고", age: 66, point: 9500 };

// market 객체에 사용자 객체들을 프로퍼티로 추가
market.user1 = user1;
market.user2 = user2;
market.user3 = user3;

// 반복문을 통해 market 객체의 각 사용자 정보를 출력
for (let i = 0; i < 3; i++) {                  // 0부터 시작해서 2까지 반복하는 반복문입니다. i 변수가 0에서 2까지 변합니다.
    console.log(market[`user${i + 1}`]); 
}

{name: '홍길동', age: 30, point: 3500}
{name: '이순신', age: 22, point: 0}
{name: '장보고', age: 66, point: 9500}

 

---

for의 구조

for (initialization; condition; increment/decrement) {
    // 실행할 코드 블록
}

• initialization: 반복문이 시작될 때 한 번만 실행되며, 주로 반복 변수의 초기화에 사용됩니다.
• condition: 각 반복마다 평가되는 조건입니다. 조건이 true인 동안 반복이 계속됩니다.
• increment/decrement: 각 반복이 끝난 후 실행되는 코드로, 주로 반복 변수를 증가시키거나 감소시키는 역할을 합니다.
• 코드 블록 { ... }: 반복될 코드를 포함하는 블록으로, 조건이 true인 동안 실행됩니다.

for (let i = 0; i < 3; i++) {
    // 반복되는 코드 블록
    console.log(market[`user${i + 1}`]);
}

• let i = 0: 초기화 단계에서 i라는 반복 변수를 0으로 초기화합니다.
• i < 3: 조건이 true인 동안에만 반복합니다. i가 3보다 작을 때만 실행됩니다.
• i++: 각 반복이 끝날 때마다 i를 1씩 증가시킵니다.
• for 반복문에서 i++를 사용했지만, 콘솔에 출력할 때 market[user${i + 1}]에서 i + 1을 사용하는 이유는 인덱스가 0부터 시작하기 때문입니다.이렇게 반복문에서 사용되는 인덱스 i가 0부터 시작하는 경우, 출력할 때 사용하는 인덱스를 1씩 더해주면 실제 사용자 정보에 접근할 수 있습니다. 따라서 user${i + 1}은 user1, user2, user3과 같은 문자열을 생성하게 되어 market 객체의 해당 프로퍼티에 접근하게 됩니다.
• 일반적으로 프로그래밍에서 배열이나 리스트의 인덱스는 0부터 시작합니다. 그래서 for 반복문에서 i를 0부터 시작하여 1씩 증가시키면서 반복하는 경우가 많습니다.

따라서 이 for 문은 market 객체에서 user1, user2, user3의 정보를 차례로 콘솔에 출력하는 반복 작업을 수행합니다.

---

프로토타입

new 뒤에 나오는 생성자를 자바스크립트에서는 프로토타입이라고 부른다.

프로토타입은 함수로 선언하며, 반드시 대문자로 시작한다.

this는 해당 객체를 의미한다.

 

function User(id, pw, name, age) {
    this.id = id;
    this.pw = pw;
    this.name = name;
    this.age = age;
}

han = new User("hds1234", "1234", "이정륜", 20);

console.log(han);

User {id: 'hds1234', pw: '1234', name: '이정륜', age: 20}

 

 

비구조화 할당 ( 구조 분해 )

const user = {
    id: 1,
    name: "ryun",
};

// 비구조화 할당(구조 분해)
const { id, name } = user;
console.log(id, name);

1 ryun

 

 

 

const user = {
    id: 1,
    name: "ryun",
};


const { id: number, name, age = 10 } = user; 
console.log(number, name, age);

1 ryun 10

 

 

 

 

객체 스프레드

 

전개 연산자를 사용하여 객체를 복제

// 기존의 사용자 객체
const user = {
    id: 1,
    name: "ryun",
};

// 전개 연산자(...)를 사용하여 객체를 복제
let userUpdated = { ...user };

// 복제된 객체 출력
console.log(userUpdated);

{id: 1, name: 'ryun'}

 

 

전개 연산자를 사용하여 객체를 복제하고 새로운 속성 추가

// 기존의 사용자 객체
const user = {
    id: 1,
    name: "ryun",
};

// 전개 연산자를 사용하여 객체를 복제하고 새로운 속성 추가
let userUpdated = { ...user, age: 20 };

// 복제된 객체에 새로운 속성이 추가된 것을 출력
console.log(userUpdated);

{id: 1, name: 'ryun', age: 20}

 

 

// 이미 해당 프로퍼티가 존재하면 수정된다.

const user = {
    id: 1,
    name: "ryun",
};

let userUpdated = { ...user, name: "ro" };

console.log(userUpdated);

{id: 1, name: 'ro'}

 

 

 

// rest
const user = {
    id: 1,
    name: "ryun",
};

const userUpdated = { ...user, age: 20 };

const { age, ...rest } = userUpdated;
console.log(age, rest);

20 {id: 1, name: 'ryun'}