데이터를 불러오는 21가지 방법

배열 데이터 불러오기

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

변수에 데이터를 불러 올 수 있습니다.

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

    console.log(x ,y ,z);
}   
//결과 100 200 javascript

 

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

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

{
    const x = 100, y = 200, z = "javascript";
    
    console.log(x, y, z);
}    
//결과 100 200 javascript

 

03. 배열 : 데이터 불러오기

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

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

    console.log(arr[0], arr[1], arr[2]);
}
//결과 100 200 javascript

 

 04. 배열 : 데이터 불러오기 : 2차 배열 

배열안에 배열을 넣어 저장한 데이터를 불러올수 있습니다.

{
    const arr = [100, 200, ["javascript","react"]];
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);       //2번째배열에 0번째배열
    console.log(arr[2][1]);
}
// 100 200 javascript react

 

 05. 배열 : 데이터 불러오기 : 갯수 구하기 

"length"를 사용하여 배열안에 있는 것을 불러 올수 있습니다.

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

    console.log(arr,length)      //length 배열안의 갯수를 구할때 쓴다
}
// 결과 100 200 javscript

 

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

조건이 성립 될때 까지 불러옵니다.

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

    for(let i = 0; i<9; i++){    //i는0부터시작하며 i<9 조건이 맞으면 출력 후 i를 하나를 더하고 다시계산한다
    console.log(arr[i]);
    }
    // i=0; 0<9; console.log(arr[0]); i++  //100
    // i=1; 1<9; console.log(arr[1]); i++  //200
    // i=2; 2<9; console.log(arr[2]); i++  //300
    // i=3; 3<9; console.log(arr[3]); i++  //400
    // i=4; 4<9; console.log(arr[4]); i++  //500
    // i=5; 5<9; console.log(arr[5]); i++  //600
    // i=6; 6<9; console.log(arr[6]); i++  //700
    // i=7; 7<9; console.log(arr[7]); i++  //800
    // i=8; 8<9; console.log(arr[8]); i++  //900
    // i=9; 9<9;"공식이성립안된다" END 
}
// 결과
  100
  200
  300
  400
  500
  600
  700
  800
  900

 

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

배열 안에있는 배열을 조건이 성립할때 까지 불러 옵니다.

{
    for( let i=1; i<=10; i++ ){
        console.log("i : " + i);
        for( let j=1; j<=10; j++ ){
            console.log("j : " + j);
        }
    }
}
//결과
 i:1 j:1 ~ j:10
 i:2 j:1 ~ j:10
      .
      .
      .
 i:10 j:1 ~ j:10

 

 08. 배열 : 데이터 불러오기 : forEach() 

배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다.

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

    //forEach
    num.forEach(function(el){         //배열에 있는 데이터를 반복 시킬때 사용
        document.write(el);           //el=element 배열의 값을 순서대로 반복 합니다.
    });

    //forEach :화살표 함수
    num.forEach((el)=>{
        document.write(el);
    });

    //forEach :화살표 함수 : 괄호 생략
    num.forEach(el=>{
        document.write(el); 
    });

    //forEach :화살표 함수 : 괄호 생략 : 중괄호 생략
    num.forEach(el=> document.write(el));

    // forEach(값, 인덱스, 배열)
    num.forEach(function(element, index, array){
        document.write(element,"<br>");   //element: 배열의 값을 순서대로 반복합니다.
        document.write(index,"<br>");     //index: 배열의 순서를 반복합니다.
        document.write(array,"<br>");     //array: 배열전체를 반복합니다.
    });
}
//결과
forEach ~ 화살표 함수
  100
  200
  300
  400
  500
 값, 인덱스, 배열
 100
 0
 100,200,300,400,500
 200
 1
 100,200,300,400,500
 300
 2
 100,200,300,400,500
 400
 3
 100,200,300,400,500
 500
 4
 100,200,300,400,500

 

 09. 배열 : 데이터 불러오기 : for of 

반복 가능한 객체를 순회할 수 있습니다.

{
    const arr = [100, 200, 300, 400, 500];
    
    for(let i of arr){         //배열에서 사용해야합니다.
        document.write(i); 
    }
}
//결과
100
200
300
400
500

 

10. 배열 : 데이터 불러오기 : for in

객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.

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

    for(let i in arr){           //객체에서 사용해야합니다 하지만 배열도 객체이므로 사용은 가능합다.
        document.write(arr[i]);
    }
}
//결과
100
200
300
400
500

 

 

 11. 배열 : 데이터 불러오기 : map() 

배열의 모든요소에 대해서 주어진 함수를 호출하여, 각 요소를 함수의 반환값으로 대체한 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.

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

    num.map(function(el, i, a){
        console.log(el);
        console.log(i); 
        console.log(a);
    });
}
//결과
100
0
100200300400500
200
1
100200300400500
300
2
100200300400500
400
3
100200300400500
500
4
100200300400500

 

 12. 배열 : 데이터 불러오기 : 배열 펼침연산자 (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

 13. 배열 : 데이터 불러오기 : 배열 구조분해 할당 

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

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

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

 

 

객체 데이터 불러오기

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

기본적인 객체 불러오기 입니다.

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

 

 15.객체 : 데이터 불러오기 : Object 

Object를 통해 키나 값을 불러옵니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(Object.keys(obj));  //abc를불러올때 key
    console.log(Object.values(obj));  //값
    console.log(Object.entries(obj)); //항목 [Array(2), Array(2), Array(2)],  'a',100,'b',200,'c',javascript
}
//결과
 a, b, c
 100, 200, javascrit
 'a',100 'b',200 'c', javascript

 

 16. 객체 : 데이터 불러오기 : 변수 

객체 값을 변수로 저장해 불러옵니다.

{
    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

 

 17. 객체 : 데이터 불러오기 for in 

객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    for(let key in obj){
        console.log(key); //키 abc를 불러온다
        console.log(obj[key]);  // 값을 불러온다
    }
}
//결과
a
100
b
200
c
javascript

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

배열의 모든요소에 대해서 주어진 함수를 호출하여, 각 요소를 함수의 반환값으로 대체한 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.

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

    obj.map(function(el) {
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}
//결과
100
300
javascript

 

 19. 객체 : 데이터 불러오기 : hasOwnProperty 

객체가 특정 속성을 직접 소유하고 있는지를 나타내는 메서드입니다. 이 메서드는 객체 자체에 정의된 속성만을 검사하며, 상속된 속성은 검사하지 않습니다.

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

    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}
//결과
ture
ture
ture
false

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

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

{
    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

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

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

{
    const obj1 = {
        a: 100,
        b: 200,
    }
    const obj2 = {
        c: "jvaascript",
        d: "react"
    }
    const spread = {...obj1, ...obj2}

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

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

배열이나 객체의 값을 새로운 변수에 할당하는 방법입니다. 이를 통해 변수에 배열이나 객체의 일부 또는 전체를 쉽게 할당할 수 있습니다.

{
    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

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

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
//결과
100
200
javascript