자바스크립트 데이터 불러오기를 알아보자

JAVASCRIPT

자바스크립트 데이터 불러오기를 알아보자

김도현2 2023. 3. 6. 19:32

데이터 불러오기

변수, 상수, 배열, 객체에 대해 알아보겠습니다~

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차 배열
    console.log(arr[2][1]);
}

결과:

100
200
javascript
react

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

배열에 저장된 값의 갯수를 불러오는 방법입니다.

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

    console.log(arr.length);
}

결과:

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

배열에 저장된 값의 데이터를 불러오는 방법입니다.
for문을 사용해 값이 조건에 맞을때까지 계속 실행하는 방법입니다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);
    }

    for(let i = 0; i<9; i++){   //for문을 사용해 반복되는 불필요한 코드를 줄일 수 있습니다.
       console.log(arr[i]);
}

결과:

100
200
300
400
500
600
700
700
800
900
//1~13줄 코드와 15~17줄 코드의 값은 똑습니다.

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

중첩for문을 for문안에 for문을 넣어 실행하는 방법입니다.
중첩 for문을 이용해 구구단을 만들었습니다.

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

결과:

1 * 1 = 1
1 * 2 = 2
~
9 * 8 = 72
9 * 9 = 81

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

forEach() 메소드는 배열(Array)의 각 요소(element)마다 콜백 함수(callback function)을 실행합니다.

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

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

    //forEach 화살표 : 중괄호 생략
    num.forEach(el => document.write(el,"<br>"));

    document.write("<br>");

    //forEach (값, 인덱스, 배열)
    num.forEach(function(Element,index, array){
        document.write(Element,"<br>");
        document.write(index,"<br>");
        document.write(array,"<br>");
    });
}

결과:

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

자바스크립트에서 배열이나 객체의 요소를 반복하기 위한 반복문입니다.

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

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

결과:

100200300400500

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

for in문은 자바스크립트의 반복문 중 하나로, 객체의 속성을 순회하는 데 사용됩니다.

{ 
    const arr = [100, 200, 300, 400, 500];
    
    for(let i in arr){
        document.write(i);
    }
}

결과:

01234

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

map()은 배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만듭니다.

{ 
    const num = [100, 200, 300, 400, 500];
   
    num.map(function(el, i, a){  //element, index, array 의 줄인말
        console.log(el);
        console.log(i);
        console.log(a);

        const mapNum = el;
        console.log(mapNum)
    });
}

결과:

100 0 100,200,300,400,500 100
200 1 100,200,300,400,500 200
300 2 100,200,300,400,500 300
400 3 100,200,300,400,500 400
500 4 100,200,300,400,500 500

12. 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread operator)

배열 펼침 연산자 (spread operator)는 자바스크립트에서 배열을 확장하거나 합치는 데 사용됩니다.
이 연산자는 "..." 기호로 표시되며, 배열의 각 항목을 쉼표로 구분하여 목록에 추가하는 방식으로 작동합니다.

{ 
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];
    
    console.log(arr1);
    console.log(...arr1);   //...을 붙일시 요소의 값만 가져옵니다.
    console.log(...arr1, ...arr2);  //...추가가 가능합니다.
}

결과:

(5) [100, 200, 300, 400, 500]
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700

13. 배열 : 데이터 불러오기 : 배열구조분해할당(Array Destructuring Assignment)

배열 구조 분해 할당 (Array destructuring assignment)은 자바스크립트에서 배열을 분해하여 개별적인 변수로 할당하는 기능입니다.
이 기능은 배열의 각 요소를 분리하여 변수에 할당하는 방식으로 작동합니다.

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

결과:

100
200
javascript
{a: 100, b: 200, c:'javascript'}

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

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

{
    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. 객체 : 데이터 불러오기 : 변수

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

{
    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

for in문은 자바스크립트의 반복문 중 하나로, 객체의 속성을 순회하는 데 사용됩니다.

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

결과:

100
200
javascript

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

map()은 배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만듭니다.
map()은 배열을 불러오는 문이라 객체를 배열안으로 넣어줘야 합니다.

{  
    const obj = [   //객체를 배열안으로 넣어줘야 합니다.
        {a:100, b:200, c:"javascript"}
    ];
    obj.map(function(element){
        console.log(element.a);
        console.log(element.b);
        console.log(element.c);
    });
    //화살표함수
    obj.map((element) => {  
        console.log(element.a);
        console.log(element.b);
        console.log(element.c);
    });
}

결과:

100
200
javascript
undefined
100
200
javascript
undefined

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

hasOwnProperty()는 특정 객체가 특정 속성을 직접 포함하고 있는지 여부를 검사하는 데 사용됩니다.

{    
    const obj = {
        a:100,
        b:200,
        c:"javascript"
    };
    console.log(obj.hasOwnProperty("a")); //값이 있으면 true
    console.log(obj.hasOwnProperty("b"));
    console.log(obj.hasOwnProperty("c"));
    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);
}

결과:

100
200
javascript
react

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

객체 펼침연산자는 객체를 펼쳐서 새로운 객체를 만드는 연산자입니다.
배열안에 키와 값을 추가 시킬 수 있습니다.

{      
    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

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

객체 펼침연산자는 객체를 펼쳐서 새로운 객체를 만드는 연산자입니다.
배열끼리 요소값을 합칠 수 있습니다.

{      
    const obj = {
        a: 100,
        b: 200,
    };
    const obj2 = {
        c: "javascript",
        d: "react"
    };
    const spread = {...obj, ...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:name1, b:name2, c:name3} = obj; //속성을 추출하여 변수에 할당하는 방법입니다.
    console.log(name1);
    console.log(obj.b);
    console.log(obj.c);
}

결과:

100
200
javascript

현재글자바스크립트 데이터 불러오기를 알아보자

G I T B l o g

Loading data ...

toString, concat(), querySelectorAll(), innerHTML, charCodeAt(), charAt(), normalize(), padEnd(), 코드팬, <select>, localeCompare(), json, #인라인구조 #블록구조 #블록레벨요소 #인라인요소, at(), codepen.io, <option>, setInterval(), repeat(), padStart(), charPointAt(),

Today :
Yesterday :

공부블로그