데이터 불러오기 총정리

 

안녕하세요 o((>ω< ))o

오늘은 자바스크립트 데이터 불러오기 총정리를 해보도록 하겠습니다.

 

✍🏻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차 배열✍🏻

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

ex ) const 키 = [값1, 값2, [값3, 값4]] / 값3 : console.log(arr[2[0]]); / 값4 : console.log(arr[2[1]]);

{
  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

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

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

ex ) console.log(키.length);

{
  const arr = [100,200,"javascript"];
  
  console.log(arr.length);
  
}

결과

3

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

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

for()문 작성 법 : for(초기값; 조건식; 증감식){실행문}

for()문 실행 순서 : 초기값 -> 조건식 (true, false 초기값이 맞는 지 확인) -> 실행문 -> 증감식

{
  const arr = [100,200,300,400,500,600,700,800,900];
  
  for(let i=0; i<9; i++){
    console.log(arr[i]);
  }
}

결과

100,200 ~ 900

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

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

for()문 안에 새로운 for()문이 들어가 있는 것입니다.

ex ) 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);
  }
}

결과

i : 1 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 2 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 3 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 4 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 5 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 6 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 7 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 8 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 9 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 10 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10

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

for each문은 반복문 중 하나로, 배열이나 리스트와 같은 컬렉션의 요소를 하나씩 순회하며 처리하는

구문입니다.

{
        const num = [100, 200, 300, 400, 500];
        document.write(num[0],"");
        document.write(num[1],"");
        document.write(num[2],"");
        document.write(num[3],"");
        document.write(num[4],"");
        document.write("");

        //for문으로 간단히 출력

        for(let i=0; i");
        }
        document.write("");

        //forEach로 출력 (배열에 있는데이터 반복시킬때 사용함)

        num.forEach(function(el){
            document.write(el, "")
        });
        document.write("");

        //forEach : 화살표함수

        num.forEach((el)=>{
            document.write(el, "");
        });
        document.write("");

        //forEach : 화살표함수 : 괄호 생략

        num.forEach(el => {
            document.write(el, "");
        });
        document.write("");

        //forEach : 화살표함수 : 괄호 생략 : 중괄호생략

        num.forEach(el => document.write(el, ""));
        document.write("");

        //forEach (값, 인덱스, 배열 )

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

결과

100 200 300 400 500 100 200 300 400 500 100 200 300 400 500 100 200 300 400 500 100 200 300 400 500 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문 ✍🏻

여러개의 배열된 데이터를 for( )문을 이용해서 불러오는 방법입니다.
for( )문 작성 방법 : for(초기값; 조건식; 증감식){실행문}
for( )문 실행 순서 : 초기값 -> 조건식(true, false 초기값이 맞는지 확인) -> 실행문 -> 증감식

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

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

결과

100200300400500

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

여러개의 배열된 데이터를 for( )문을 이용해서 불러오는 방법입니다.
for( )문 작성 방법 : for(초기값; 조건식; 증감식){실행문}
for( )문 실행 순서 : 초기값 -> 조건식(true, false 초기값이 맞는지 확인) -> 실행문 -> 증감식

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

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

결과

100200300400500

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

여러개의 배열된 데이터를 for( )문을 이용해서 불러오는 방법입니다.
for( )문 작성 방법 : for(초기값; 조건식; 증감식){실행문}
for( )문 실행 순서 : 초기값 -> 조건식(true, false 초기값이 맞는지 확인) -> 실행문 -> 증감식

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

    num.forEach(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });  
    //데이터만 추출
    num.map(function(el, i ,a){
        console.log(el)
        console.log(i)
        console.log(a)
    });
}

결과

100 0 Array(5) 200 1 Array(5) 300 2 Array(5) 400 3 Array(5) 500 4 Array(5) 100 0 Array(5) 200 1 Array(5) 300 2 Array(5) 400 3 Array(5) 500 4 Array(5)

 

✍🏻12. 배열 : 데이터 불러오기 :배열 펼침 연산자(spread Operater)✍🏻

펼침 연산자(spread operator)는 자바스크립트에서 배열(array)이나 객체(object)를 펼칠 때 사용하는 문법입니다. ... 기호를 사용하여 표현하며, 배열이나 객체 내의 각 요소(element)를 분리하여 개별적인 값으로 확장합니다.

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

    console.log(arr1, "");
    console.log(...arr1,);
    console.log(...arr1,...arr2)  //합치기
}

결과

Array(5) '
' javascript02.html:551 100 200 300 400 500 javascript02.html:552 100 200 300 400 500 600 700 800 900

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

(destructuring assignment)✍🏻

배열 구조 분해 할당(array destructuring assignment)은 배열을 분해해서 개별적인 변수로 할당하는 방법입니다. 이를 통해, 배열의 각 요소를 쉽게 접근할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있습니다.

 {
    let a, b, c;

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

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

결과

100200javascript

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

JavaScript에서 객체(object) 데이터를 불러오는 방법은 객체의 속성(property)을 참조하는 것입니다.

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

결과

100200javascript

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

키 값을 불러오는 법 : JavaScript에서 객체(object)의 키(key) 값을 불러오는 방법은 Object.keys() 메서드를 사용하는 것입니다. Object.keys() 메서드는 객체의 속성 이름을 배열로 반환합니다. 이 배열에서 원하는 속성 이름을 선택하면 됩니다.

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

결과

(3) ['a', 'b', 'c'] (3) [100, 200, 'javascript'] (3) [Array(2), Array(2), Array(2)]

 

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

JavaScript에서 객체(object)의 변수 데이터를 불러오는 방법은 객체 변수를 그대로 참조하는 것입니다.

{
    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)
}

결과

100200javascript

 

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

JavaScript에서 객체(object) 데이터를 반복하여 불러오는 방법 중 하나는 for...in 루프를 사용하는 것입니다. for...in 루프는 객체의 속성(property) 이름을 반복하며, 각 속성의 값을 가져올 수 있습니다.

{
    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

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

JavaScript에서 객체(object) 데이터를 변환하려면, map() 메서드를 사용할 수 있습니다. map() 메서드는 배열의 각 요소를 변환하는 데 사용되는 함수를 적용하여 새로운 배열을 반환합니다.

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

    obj.map((el) =< {
        console.log(el.a)  //el은 obj임
        console.log(el.b)  //el은 obj임
        console.log(el.c)  //el은 obj임
    });
}

결과

100 2000 javascript

✍🏻19. 객체 : 데이터 불러오기 : hasOwnProperty()✍🏻

hasOwnProperty() 메서드는 객체(object)가 특정 속성(property)을 직접적으로 가지고 있는지 여부를 판단하는 메서드입니다. 상속받은 속성이 아닌, 직접적으로 속성을 가지고 있는 경우에만 true를 반환합니다.

{
    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);
    console.log("b" in obj);
    console.log("c" in obj);
}

결과

true true true false true true true

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

JavaScript에서 객체(object) 데이터를 다룰 때, 객체 펼침 연산자(spread operator)를 사용하여 객체의 속성들을 복사하거나 합칠 수 있습니다. 객체 펼침 연산자는 기존 객체를 변경하지 않고, 새로운 객체를 생성합니다. 따라서 원본 객체들은 그대로 유지됩니다.

{
    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);
}

{
    const obj1 = {
        a:100,
        b:200,
    }
    const obj2 = {
        c:400,
        d:2000,
    }
    
    const spread = {...obj1, ...obj2}

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

결과

100 200 javascript 100 200 400 2000

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

객체 구조 분해 할당(destructuring assignment)은 JavaScript에서 객체의 속성을 개별 변수에 할당하는 문법입니다.

      {
    const obj = {
        a:100,
        b:200,
        c:"javascript"
    }
    const {x, y, z} = obj;
    console.log(obj.a); //x라고 쓰면 undifinded 나옴
}

{
    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 100 200 javascript

 

✨ 감사합니다.