[내배캠] 002. [JS] 객체와 배열 - 값 접근하기, 수정하기, 삭제하기

객체란?

개념

key : value로 이루어진 데이터의 집합.

리액트에서는 JSON 형태로 데이터를 불러오는 작업을 많이 한다. (JSON, JavaScript Object Notation)

특징

key: value 쌍을 이룬다 / value에는 모든 자료형이 올 수 있다

const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
}

접근 방법

점 표기법

console.log(user.name); // '장원영'
console.log(user.age); // 21
user.printHello(); // 'hello'

괄호 표기법

const attribute = 'name';

console.log(user[attribute]); // '장원영'
console.log(user['name']); // '장원영'
// 위 콘솔 출력 내장함수는 같은 의미.

괄호 표기법은 프로퍼티의 key를 변수명.key 형태로 가져오는 것이 아니라 key를 변수로 선언해서 가져올 때 사용한다.

객체의 속성(attribute)과 값을 추가하기

const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
}

user.eamil = 'wonyoung@ive.com';
// user라는 객체에는 eamil이라는 attribute가 없다. 따라서 위와 같이 코드를 작성하면
// key와 value가 아래와 같이 추가된다.

const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
    email: 'wonyoung@ive.com'
}

객체의 속성(attribute)의 값 수정하기

그런데 이미 있는 attribute의 값을 재할당하면 그 프로퍼티의 값이 수정된다.

const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
}

user.name = 'Jang WonYoung';
// 이렇게 하면 아래와 같이 user 객체가 수정된다.

const user = {
    name: 'Jang WonYoung', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
}

객체의 속성(attribute) 삭제하기

const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
    printHello: () => console.log('hello') // function
}

delete user.group;
// group이 삭제된다.

console.log(user);
//{
//    name: '장원영',
//    age: 21,
//    isBeauty: true,
//    printHello: () => [Function: printHello]
//}

배열이란?

개념

순차적인 데이터를 저장하기 위한 데이터의 집합.

const numbers = [1, 2, 3];

접근 방법

대괄호 표기법

• 배열이 저장된 순서대로 index 번호를 갖는다.
• 그리고 컴퓨터는 0부터 숫자를 센다.

const numbers = [1, 2, 3];

// 2에 접근하는 방법
console.log(numbers[1]); // 2

배열의 값 수정하기

const numbers = [1, 2, 3];

numbers[1] = 10;
console.log(numbers); // [1, 10, 3];

객체와 배열의 기초 내장 메서드

객체

Object.keys()

객체의 key만 추출해서 나열하는 메서드

// 아래 객체에서 key만 뽑아와 배열로 나열하고 싶다.
const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
}

const keysArr = Object.keys(user);

console.log(keysArr); // ['name', 'age', 'group', 'isBeauty']

Object.values()

객체의 value만 추출해서 나열하는 메서드

// 아래 객체에서 value만 뽑아와 배열로 나열하고 싶다.
const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
}

const keysArr = Object.values(user);

console.log(keysArr); // ['장원영', 21, 'ive', true]

Object.entries()

객체의 key: value를 쌍으로 추출해서 나열하는 메서드

// 아래 객체에서 key: value를 쌍으로 뽑아와 배열로 나열하고 싶다.
// 아래 객체에서 value만 뽑아와 배열로 나열하고 싶다.
const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
}

const keysArr = Object.entries(user);

console.log(keysArr); // [ ['name', '장원영'], ['age', 21], ['group', 'ive'], ['isBeauty', true] ]
// keysArr라는 큰 배열 안에 [key, value]가 쌍으로, 배열로 나열되고 있다.

Object.assign()

객체에 객체를 합치는 메서드.

// Object.assign(합쳐질 객체, 합칠 객체)

// 아래 user 객체에 userDetail 객체를 포함시키고 싶다.
const user = {
    name: '장원영', // string type
    age: 21, // number type
    group: 'ive',
    isBeauty: true, // boolean type
}

const userDetails = {
    occupation: "아이돌",
    height: 171
}

// user(대상객체)에 userDetails(출처객체)를 합침.
Object.assign(user, userDetails);
console.log(user);

//{
//  "name": "장원영",
//  "age": 21,
//  "group": "ive",
//  "isBeauty": true,
//  "occupation": "아이돌",
//  "height": 171
//}