데이터 불러오기

728x90

데이터 불러오기

자바스크립트에서 데이터를 불러오는 방법은 여러 가지가 있습니다.
1. 변수 : 데이터 불러오기
2. 상수 : 데이터 불러오기
3. 배열 : 데이터 불러오기
4. 객체 : 데이터 불러오기
이러한 데이터 불러오기에도 상세하게 들어가면 수많은 데이터 불러오기가 있습니다.
지금부터 확인해보겠습니다!!

1. 변수 : 데이터 불러오기

변수 안에 저장된 데이터를 불러오는 방법입니다.

{
    let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
}

답 확인하기

100, 200, javascript

2. 상수 : 데이터 불러오기

상수 안에 저장된 데이터를 불러오는 방법입니다.

{
    const x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
}

답 확인하기

100, 200, javascript

3. 배열 : 데이터 불러오기 : 기본

여러 개의 배열된 데이터를 불러오는 방법입니다.

{
    const arr = [100, 200, "javascript"]

    console.log(arr[0], arr[1], arr[2]);
}

답 확인하기

100, 200, javascript

3-1. 배열 : 데이터 불러오기 : 2차 배열

배열안에 배열이 있는 데이터를 불러오는 방법입니다.

{
    const arr = [100, 200, ["javascript","react"]];

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}

답 확인하기

100
200
javascript
react

3-2. 배열 : 데이터 불러오기 : 갯수 구하기

여러 개의 배열된 데이터를 불러오는 값의 갯수를 구하는 방법입니다.

{
    const arr = [100, 200, "javascript"];

    console.log(arr.length);
}

답 확인하기

3-3. 배열 : 데이터 불러오기 : for( )문

여러 개의 배열된 데이터를 for( )문을 이용해서 불러오는 방법입니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for(let i=0; i<9; i++){
        console.log(arr[i]);
    }
}

답 확인하기

100, 200, 300, 400, 500, 600, 700, 800, 900

3-4. 배열 : 데이터 불러오기 : 중첩 for( )문

여러개의 배열된 데이터를 for( )문을 이용해서 불러오는 방법입니다.
for( )문 안에 새로운 for( )문이 들어가 있는 형태입니다.

{
    for(let i=1; i<=10; i++){
        console.log("i : " + i);
        for(let j=1; j<=10; j++){
            console.log("j : " + j);
        }
    }
}

답 확인하기

3-5. 배열 : 데이터 불러오기 : forEarch( )문

forEach( )문은 배열의 데이터가 있을 경우 사용합니다.
forEach( )문은 element(값), index(인덱스), array(배열)을 불어오는 특징이 있습니다.

{
    const num = [100, 200, 300, 400, 500];

    num.forEach(function(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

답 확인하기

3-6. 배열 : 데이터 불러오기 : for of

for of문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.
for of문은 element 값 출력하는데 사용합니다.

{
    const arr = [100, 200, 300, 400, 500];

    for(let i of arr){
        document.write(i);
    };
}

답 확인하기

100, 200, 300, 400, 500

3-7. 배열 : 데이터 불러오기 : for in

for in문은 반복해서 값을 불러오는데 사용됩니다.
for in문은 index 인덱스 출력하는데 사용합니다.

{
    const arr = [100, 200, 300, 400, 500];

    for(let i in arr){
        document.write(i);
    };
}

답 확인하기

0, 1, 2, 3, 4

3-8. 배열 : 데이터 불러오기 : map( )

forEach문과 비슷하며, element(값) index(인덱스) array(배열)을 출력하는데 사용합니다.

{
    const arr = [100, 200, 300, 400, 500];

    num.map(function(el, i, a){
        document.write(el);
        document.write(i);
        document.write(a);
    });
}

답 확인하기

3-9. 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread Operator)

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

{
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];

    console.log(arr1);
    console.log(...arr1);               
    console.log(...arr1, ...arr2);
}

답 확인하기

100, 200, 300, 400, 500
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700

3-10. 배열 : 데이터 불러오기 : 배열 구조분해할당(Destructuring assignment)

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

{
    let a, b, c;

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

    console.log(a);
    console.log(b);
    console.log(c);
}

답 확인하기

100
200
javascript

4. 객체 : 데이터 불러오기 : 기본

객체의 데이터를 불러오는 기본적인 방법입니다.

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

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}

답 확인하기

100
200
javascript

4-1. 객체 : 데이터 불러오기 : Object

객체의 데이터를 키만 불러오거나, 값만 불러오거나, 키와 값을 둘다 불러오는 방법입니다.

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

    console.log(Object.keys(obj));          
    console.log(Object.values(obj));        
    console.log(Object.entries(obj));       
}

답 확인하기

a, b, c
100, 200, javascript
a, 100, b, 200, c, javascript

4-2. 객체 : 데이터 불러오기 : 변수

객체의 키와 값을 변수로 설정해서 출력값을 변수를 입력해서 불러오는 방법입니다.

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

    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    console.log(name1);
    console.log(name2);
    console.log(name3);
}

답 확인하기

100
200
javascript

4-3. 객체 : 데이터 불러오기 : for in

for in문을 사용해서 객체의 데이터를 불러오는 방법입니다.

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

    for(let key in obj){
        console.log(key);          
        console.log(obj[key]);     
    }
}

답 확인하기

a, 100
b, 200
c, javascript

4-4. 객체 : 데이터 불러오기 : map( )

데이터가 배열로 감싸고 안에 객체가 있을 경우 사용됩니다.

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

    obj.map(function(el){
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}

답 확인하기

100
200
javascript

4-5. 객체 : 데이터 불러오기 : hasOwnProperty( )

객체에 특정 속성이 존재하는지 여부를 나타내는 불리언 값을 반환합니다.
해당 속성이 객체 자신의 속성으로 존재하면 true를 반환하고, 해당 속성이 존재하지 않으면 false를 반환합니다.

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

    console.log(obj.hasOwnProperty("a"));      
    console.log(obj.hasOwnProperty("b"));      
    console.log(obj.hasOwnProperty("c"));       
    console.log(obj.hasOwnProperty("d"));           
}

답 확인하기

true
true
true
false

4-6. 객체 : 데이터 불러오기 : 객체 펼침 연산자(Spread Operator)

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

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

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
}

답 확인하기

100
200
javascript

4-7. 객체 : 데이터 불러오기 : 객체 구조분해할당(Destructuring assignment)

객체의 속성들을 변수로 분해하여 할당하는 것을 의미합니다.

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

    const {a, b, c} = obj;

    console.log(a);
    console.log(b);
    console.log(c);
}

답 확인하기

100
200
javascript

참고 홈페이지

https://dongjin6539.github.io/web2023/javascript/javascript02.html

728x90

코딩 공부하기

데이터 불러오기