데이터를 불러오는 객체 메서드 종류

오늘은 데이터를 불러오는 객체 메서드 중 4가지 종류에 대해서 알아보려고 하는데요,
각각의 메서드마다 조금씩 차이가 있으니 예시를 통해 제대로 알고 넘어가보도록 합시다.

1. Objct.keys()

▶ Object.keys() 메서드는 자바스크립트에서 객체의 속성명(키)들을 배열로 반환해주는 기능을 합니다.
이 배열은 객체가 가지고 있는 열거 가능한 속성들의 이름을 담고 있어 객체의 키값을 쉽게 확인하고 처리하는 데 유용한데요,
하나의 예시를 통해 살펴보도록 할게요!

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    console.log(Object.keys(obj));
    console.log(Object.keys(obj)[0]);
    console.log(Object.keys(obj)[1]);
    console.log(Object.keys(obj)[2]);
}

💡 예시는 객체 a, b, c라는 키에 100, 200, “javascript”라는 값을 넣어주고 있습니다.
여기서 obj가 객체 메서드임에도 불구하고 console.log()로 확인할 때 [0], [1], [2]와 같이 배열로 넣는 이유가 궁금하실텐데요,
바로 Objct.keys()가 배열로 반환해주는 기능을 하기 때문에 인덱스라는 배열요소로 지정을 해주어야합니다.
그럼 각각의 결과값은 [‘a’,’b’,’c’] / a / b / c 로 나오게 됩니다.

2. Objct.values()

▶ Object.values() 메서드는 자바스크립트에서 객체의 값들을 배열로 반환해주는 기능을 합니다.
이 배열은 객체가 가지고 있는 모든 속성값을 담고 있어객체의 값들을 쉽게 확인하고 처리하는 데 유용한데요,
하나의 예시를 통해 살펴보도록 할게요!

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    console.log(Object.values(obj));      
    console.log(Object.values(obj)[0]);      
    console.log(Object.values(obj)[1]);      
    console.log(Object.values(obj)[2]);      
}

💡 예시는 객체 a, b, c라는 키에 100, 200, “javascript”라는 값을 넣어주고 있습니다.
Objct.values() 메서드 또한 마찬가지로 객체를 배열로 반환해주는 기능을 하기 때문에 각각의 결과값만 얻고 싶을 땐 인덱스라는 배열요소로 지정을 해주어야합니다.
그럼 각각의 결과값은 [100, 200,’javascript’] / 100 / 200 / ‘javascript’ 로 나오게 됩니다.

3. Objct.entries()

▶ Object.entries() 메서드는 자바스크립트에서 객체의 키-값 쌍을 배열로 반환해주는 기능을 합니다.
이 배열은 객체가 가지고 있는 모든 키-값 쌍을 담고 있어 객체의 모든 키와 값에 쉽게 접근하고 처리하는 데 유용한데요,
하나의 예시를 통해 살펴보도록 할게요!

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    console.log(Object.entries(obj));
    console.log(Object.entries(obj)[0]);
    console.log(Object.entries(obj)[1]);
    console.log(Object.entries(obj)[2]);
}

💡 예시는 객체 a, b, c라는 키에 100, 200, “javascript”라는 값을 넣어주고 있습니다.
Objct.entries() 또한 마찬가지로 결과값을 배열로 반환해주는 것은 동일하지만 결과값을 도출할 때 Object.values(obj), Object.keys(obj)와는 조금 차이가 있는데요,
바로 Objct.entries()는 결과값을 2차 배열로 반환해준다는 점입니다!
때문에 각각의 결과값은 [[‘a’, 100], [‘b’, 200], [‘c’, ‘javascript’]] / [‘a’, 100] / [‘b’, 200] / [‘c’, ‘javascript’] 로 나오게 됩니다.

❗ Objct.entries()와 Object.values(obj), Object.keys(obj)의 차이는 꼭 이해하고 넘어가세요!

4. Objct.assign()

▶ Object.assign() 메서드는 여러 개의 소스 객체(source objects)에서 대상 객체(target object)로 속성을 병합해주는 기능을 합니다.
보통은 객체를 병합하고 새로운 객체를 반환할 때 대상 객체에 동일한 속성명이 있을 경우 소스 객체의 속성으로 덮어쓰기 위해 사용되는데요,
이때 소스 객체들은 변경되지 않고, 새로운 객체인 대상 객체에만 속성이 추가됩니다.
하나의 예시를 통해 살펴보도록 할게요!

{
    {
        const obj1 = {
            a: 100,
            b: 200,
        }
        const obj2 = {
            c: 300,
            d: 400,
        }
        const obj3 = Object.assign(obj1, obj2);  

        console.log(obj3);
    }
}

💡 예시는 obj1, obj2라는 두 개의 객체가 있고 그 안에 각각 a, b는 100, 200을 c, d는 300, 400 이라는 속성과 키값을 넣어주고 있습니다.
Objct.assign() 메서드는 객체를 병합해주는 기능을 하기때문에 예시처럼 Object.assign(obj1, obj2)라는 합쳐진 결과를 obj3이라는 지정하게 되면
결과값은 {a: 100, b:200, c:300, d:400}로 나오게 됩니다.

❗ Objct.assign()는 객체의 속성을 병합해주기 때문에 위에 나온 배열로 변환해주는 3개의 메서드와는 다르다는 점 헷갈리지마세요!

오늘은 데이터를 불러올 때 사용하는 객체 메서드에 대해 알아봤는데요,
이 외에도 다양한 종류의 메서드가 있으니 조금씩 알아가보면 코드를 만들 때 도움이 되겠죠?
기회가 된다면 다음엔 다른 종류의 메서드를 소개하는 글을 들고 오도록 할게요😁!