객체, 배열 [JavaScript | 학습을 위한 자료 | 한입만 REACT]

객체

// 객체
// 여러가지 값을 동시에 저장할 수 있는 자료형
// 여러 값을 키-값 쌍(key-value pair)으로 저장하는 참조형 데이터 구조

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자 방식
let obj2 = {}; // 객체 리터럴 (대부분 사용)

// 2. 객체 프로퍼티 (객체 속성) 
let person = { // 프로퍼티와 값 - key : value  
    name : "강진호",
    age : 36,
    hobby : "바이크",
    10 : 20, // 숫자형 키
    "like cat" : true // 공백이 포함된 키 (따옴표로 묶어야 함)
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;
let name2 = person.name2; // undefined
console.log(name);
console.log(name2);

let age = person["age"];
console.log(age);

let property = "hobby";
let hobby = person[property];
console.log(hobby); // 동적으로 변화시키면서 꺼내와야할 때는 괄호표기법을 이용

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "백엔드 개발자";
person["favoritefood"] = "고기";

// 3.3 프로퍼티를 수정하는 방법
person.job = "alba";
person["favoritefood"] = "과자";

console.log(person);

// 3.4 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoritefood"];

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result1);
console.log(result2);

 

 

---

상수 객체

// 1. 상수 객체
// 객체 자체(참조 주소)는 불변이지만 객체 내부의 프로퍼티는 수정 가능
const animal = { // 객체의 정보를 정의
    type : "고양이",
    name : "나비",
    color : "black",
};

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; //삭제

// 저장되어 있는 객체값에 변경은 가능
//객체의 동작을 정의하며 객체 내부의 데이터를 처리하거나 반환하는 데 사용
console.log(animal);

// 2. 메서드
// -> 객체 프로퍼티중에 값이 함수인 프로퍼티
const person = {
    name : "강진호",
    // 메서드 선언, 보통 객체의 동작을 정의
    sayHi() {
        console.log("안녕!");
    },
};

person.sayHi();
person[sayHi]; // sayHi는 변수가 아니라 메서드 이름이므로 person["sayHi"] 또는 person.sayHi()로 접근

---

배열

// 배열(Array) 
// 여러개의 값을 순차적으로 담을 수 있는 자료형

// 1. 배열 생성 
let arrA = new Array(); //배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

// 다양한 데이터 타입을 혼합하여 저장 가능
// 중첩된 객체, 배열, 함수도 요소로 포함할 수 있다
let arrC = [
    1,            // 숫자
    2,            // 숫자
    3,            // 숫자
    true,         // 불리언
    "hello",      // 문자열
    null,         // null 값
    undefined,    // undefined 값
    () => {},     // 함수
    {},           // 객체
    [],           // 배열
];

// 2. 배열 요소 접근
// 인덱스는 0부터 시작
let item1 = arrC[0]; // 첫 번째 요소
let item2 = arrC[1]; // 두 번째 요소

console.log(item1, item2); // 출력: 1 2

arrC[0] = "hello"; // 배열 내용 변경
console.log(arrC);

// 배열에 요소 추가
arrC.push("new item"); // 마지막에 추가
console.log(arrC);

arrC.unshift("first item"); // 맨 앞에 추가
console.log(arrC);

// 배열에 요소 삭제
arrC.pop(); // 마지막 요소 제거
console.log(arrC);

arrC.shift(); // 첫 번째 요소 제거
console.log(arrC);

// 배열 길이 확인
console.log(arrC.length); // 배열의 길이 반환

// 배열 순회
for (let i = 0; i < arrC.length; i++) {
    console.log(arrC[i]);
}

arrC.forEach((item, index) => {
    console.log(`Index ${index}:`, item);
});