객체와 배열 기초

// 사용자 정보를 담는 객체
let user = {
    name: "김민준",      // 'name'은 속성 이름(키), "김민준"은 속성 값
    age: 28,           // 'age'는 숫자 타입 값
    isStudent: false,  // 'isStudent'는 불리언 타입 값
    email: "[email protected]",
    "favorite-color": "blue" // 속성 이름에 하이픈이 포함되면 따옴표로 묶어야 합니다.
};

console.log(user);
/*
결과:
{
  name: '김민준',
  age: 28,
  isStudent: false,
  email: '[email protected]',
  'favorite-color': 'blue'
}
*/

let product = {
    name: "노트북",
    price: 1200000
};

// 속성 추가
product.manufacturer = "XYZ전자"; // 새로운 manufacturer 속성 추가
product['release-date'] = "2024-05-01"; // 대괄호 표기법으로 속성 추가

console.log(product);
/*
결과:
{
  name: '노트북',
  price: 1200000,
  manufacturer: 'XYZ전자',
  'release-date': '2024-05-01'
}
*/

// 속성 값 변경
product.price = 1150000; // 기존 price 속성 값 변경
console.log(product.price); // 결과: 1150000

let student = {
    id: 101,
    name: "박지성",
    grade: 3
};

console.log(student); // { id: 101, name: '박지성', grade: 3 }

delete student.grade; // grade 속성 삭제
console.log(student); // { id: 101, name: '박지성' }

// delete student['id']; // 대괄호 표기법으로도 삭제 가능

let person = {
    name: "이수진",
    age: 22,
    // sayHello라는 메서드 정의
    sayHello: function() {
        console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
        // this는 현재 객체(여기서는 person)를 가리킵니다.
    },
    // ES6에서 도입된 간결한 메서드 정의 문법
    introduce() {
        console.log(`저는 ${this.age}살 ${this.name}입니다.`);
    }
};

person.sayHello();   // 결과: 안녕하세요, 제 이름은 이수진입니다.
person.introduce(); // 결과: 저는 22살 이수진입니다.

// 숫자 배열
let numbers = [10, 20, 30, 40, 50];

// 문자열 배열
let fruits = ["사과", "바나나", "오렌지", "포도"];

// 다양한 타입의 요소를 포함하는 배열 (권장하지는 않음)
let mixedArray = ["Hello", 123, true, { id: 1 }];

// 빈 배열
let emptyArray = [];

console.log(numbers); // 결과: [ 10, 20, 30, 40, 50 ]
console.log(fruits);  // 결과: [ '사과', '바나나', '오렌지', '포도' ]

let colors = ["red", "green", "blue"];

console.log(colors[0]); // 결과: red (첫 번째 요소)
console.log(colors[1]); // 결과: green (두 번째 요소)
console.log(colors[2]); // 결과: blue (세 번째 요소)

console.log(colors[3]); // 결과: undefined (인덱스를 벗어나면 undefined)

console.log(fruits.length); // 결과: 4

let tasks = ["운동하기", "공부하기", "요리하기"];
console.log(tasks); // 결과: [ '운동하기', '공부하기', '요리하기' ]

// 요소 변경 (인덱스를 통해)
tasks[0] = "산책하기";
console.log(tasks); // 결과: [ '산책하기', '공부하기', '요리하기' ]

// 요소 추가 (length 속성을 이용)
tasks[tasks.length] = "책 읽기"; // 배열의 마지막에 추가
console.log(tasks); // 결과: [ '산책하기', '공부하기', '요리하기', '책 읽기' ]

// `push()` 메서드를 이용한 추가 (더 권장되는 방법)
tasks.push("청소하기"); // 배열의 마지막에 요소 추가
console.log(tasks); // 결과: [ '산책하기', '공부하기', '요리하기', '책 읽기', '청소하기' ]

// `unshift()` 메서드를 이용한 추가 (배열의 맨 앞에 추가)
tasks.unshift("명상하기"); // 배열의 맨 앞에 요소 추가
console.log(tasks); // 결과: [ '명상하기', '산책하기', '공부하기', '요리하기', '책 읽기', '청소하기' ]

let items = ["A", "B", "C", "D"];
console.log(items); // 결과: [ 'A', 'B', 'C', 'D' ]

// `pop()` 메서드: 배열의 마지막 요소를 제거하고 반환합니다.
let lastItem = items.pop();
console.log(items);     // 결과: [ 'A', 'B', 'C' ]
console.log(lastItem);  // 결과: D

// `shift()` 메서드: 배열의 첫 번째 요소를 제거하고 반환합니다.
let firstItem = items.shift();
console.log(items);     // 결과: [ 'B', 'C' ]
console.log(firstItem); // 결과: A

// `splice()` 메서드: 특정 인덱스부터 원하는 개수만큼 요소를 제거할 수 있습니다.
// items.splice(시작_인덱스, 제거할_개수);
items.splice(0, 1); // 인덱스 0부터 1개 제거 (B 제거)
console.log(items); // 결과: [ 'C' ]

items.push("D", "E"); // 다시 추가
console.log(items); // 결과: [ 'C', 'D', 'E' ]

items.splice(1, 2); // 인덱스 1부터 2개 제거 (D, E 제거)
console.log(items); // 결과: [ 'C' ]

let students = ["민수", "지영", "태호"];

// 1. for 문을 이용한 순회 (가장 기본적인 방법)
for (let i = 0; i < students.length; i++) {
    console.log(`${i + 1}번째 학생: ${students[i]}`);
}
/*
결과:
1번째 학생: 민수
2번째 학생: 지영
3번째 학생: 태호
*/

// 2. for...of 문을 이용한 순회 (ES6, 배열 요소에 직접 접근)
for (let student of students) {
    console.log(`학생 이름: ${student}`);
}
/*
결과:
학생 이름: 민수
학생 이름: 지영
학생 이름: 태호
*/

// 3. forEach() 메서드를 이용한 순회 (배열 메서드, 함수 활용)
// forEach(콜백함수)
students.forEach(function(student, index) { // 각 요소와 인덱스를 인자로 받습니다.
    console.log(`${index + 1}. ${student}`);
});
/*
결과:
1. 민수
2. 지영
3. 태호
*/

// 화살표 함수로 더 간결하게 표현 가능
students.forEach((student, index) => {
    console.log(`${index + 1}. ${student}`);
});

const source = { name: "민수", profile: { score: 3 } };
const alias = source;
const shallow = { ...source };
const separate = { ...source, profile: { ...source.profile } };
shallow.name = "영희";
alias.profile.score = 4;
console.log(source.name, shallow.name);             // 민수 영희
console.log(source.profile.score, shallow.profile.score); // 4 4
console.log(separate.profile.score);                // 3