자바스크립트 데이터 불러오기(배열, 객체)

자바스크립트 데이터 불러오기(배열, 객체)

 

 

 

 

오늘은 자바스크립트 데이터 불러오기 배열과 객체에 대해 정리해 보겠습니다!

 

 

 

 

배열

펼침연산자(Spread Operator)

자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자

 {
    let arr1 = [100,200,300,400,500];
    let arr2 = [600,700];
 
    console.log(arr1, "<br>");//100,200,300,400,500               //배열
    console.log(...arr1,);//100 200 300 400 500                   //...으로 불러오면 데이터
    console.log(...arr1, ...arr2);//100 200 300 400 500 600 700 
}
{
    const arr = [1,2,3,4,5];
    const str = "string";
    console.log(...arr)//1 2 3 4 5
    console.log(...str)//s t r i n g
}

❕ arr1은 배열값을 그대로 가져온다

❕ '...'이 펼침연산자의 기호라고 생각하면 된다.  '...'를 사용해 배열이나 문자열 등을 요소 하나하나로 전개시킬 수 있다.

 

구조분해할당(Arrat destructuring assignment)

배열 구조분해 할당은 배열의 요소를 개별 변수에 할당하는 방법 중 하나이다.
이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.

let a, b, c;

[a, b, c,] = [100, 200, "javascript"];

console.log(a);//100
console.log(b);//200
console.log(c);//javascript

 

객체

데이터 불러오기 기본

객체를 사용해 데이터를 불러오는 기본적인 방법

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
console.log(obj.a);//100
console.log(obj.b);//200
console.log(obj.c);//javascript

 

데이터 불러오기 Object

객체에서 속성 이름을 변수로 사용해야 할 때는 Object 문법을 사용하는 것이 유용

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
console.log(Object.keys(obj));   //['a', 'b', 'c']
console.log(Object.values(obj)); //[100,200,'javascript']
console.log(Object.entries(obj));//['a', 100]['b', 200]['c', 'javascript']

keys 키의 값

valuse 인덱스값

entries 키의 값 인덱스값 둘 다

 

데이터 불러오기 변수

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;

console.log(name1)//100
console.log(name2)//200
console.log(name3)//javascript

데이터 불러오기 for in

객체의 속성을 반복하는 데 사용되는 반복문
객체의 모든 열거 가능한 속성에 대해 반복하고, 각 속성의 키를 반복 변수에 할당

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
for(let key in obj){                //객체
    console.log(key);               //a b c 
    console.log(obj[key]);          //100 200 javacript
}

데이터 불러오기 map()

배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만드는 javascript 배열 메서드이다.

    const obj = [
        {a: 100, b:300, c:"javascript"}
    ]

    obj.map((el) => {                
        console.log(el.a)//100
        console.log(el.b)//300
        console.log(el.c)//javascript
    });

데이터 불러오기 hasOwnProperty

해당 객체가 특정 속성을 직접 소유하고 있는지 여부를 판별하는 역할
상속받은 속성은 포함하지 않으며, 직접 소유한 속성만 검사

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
console.log(obj.hasOwnProperty("a")); //true
console.log(obj.hasOwnProperty("b")); //true
console.log(obj.hasOwnProperty("c")); //true
console.log(obj.hasOwnProperty("d")); //false

console.log("a" in obj);//true             //줄여서 간단하게 표현할 수 있음 for in문은 아님
console.log("b" in obj);//true
console.log("c" in obj);//true

데이터 불러오기 객체 펼침연산자

javascript에서 사용되는 연산자 중 하나이다. '...'으로 표시
객체 리터럴 내에서 사용하거나 함수 호출에서 인수로 사용 가능

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d:"react"}

    console.log(spread.a);//100
    console.log(spread.b);//200
    console.log(spread.c);//javascript
    console.log(spread.d);//react
}
{
    const obj1 = {
        a: 100,
        b: 200
    }
    const obj2 = {
        a: "javascript",
        d: "react"
    }
    const spread = {...obj1, ...obj2}

    console.log(spread.a);//javascript
    console.log(spread.b);//200
    console.log(spread.c);//undefined
    console.log(spread.d);//react
}

데이터 불러오기 객체 구조분해할당

javascript에서 사용되는 문법 중 하나이다.
객체의 속성을 변수에 할당할 수 있다. 이를 통해 객체에서 필요한 속성만 추출하여 사용할 수 있다.

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

    console.log(a);//100
    console.log(b);//200
    console.log(c);//javascript                             //기본 형태
}
{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a:name1, b:name2, c:name3} = obj;

    console.log(name1);//100
    console.log(name2);//200
    console.log(name3);//javascript                         //가장 많이 쓰는 형태
}