javascript

자바스크립트 데이터 불러오기 정리!

grovy 2023. 3. 6. 19:42
728x90

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], arr[1], arr[2][0], arr[2][1]);
}
100
200
javascript
react
 

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

length()함수를 이용하여 길이 출력

{
    const arr = [100, 200, "javascript"];
    console.log(arr.length);
}
arr 배열의 길이는 3임 !
 

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

for문에서 length()함수를 이용하여 길이를 구해 배열 데이터 출력

{
    const arr = [100, 200,  300, 400 , 500 , 600 , 700, 800 , 900] ;
    for (let i = 0; i < arr.length; i++ ) {
        console.log(arr[i]);
    }
}
100
200
300
400
500
600
700
800
900
 
 
07. 배열 : 데이터 불러오기 : 중첩 for()문

length()함수를 이용하여 길이 출력

{
    const arr = [0,1,[4,5,6],2,[8,9,10],3]
    // 2차원 배열 생성 

    for (let i = 0; i < arr.length; i++) {
        (arr[i].length >0 && arr[i].length != undefined )? console.log(`2차배열 arr[${i}][...]`):console.log(`1차배열 arr[${i}]`)
        //1차 배열의 길이가 undefined거나 length가 0보다 클경우엔 2차 배열이 있따 ! 

        for(let j = 0 ; j <=arr[i].length ; j++ ){
            if( arr[i][j] != undefined )console.log(arr[i][j]);
            //해당값이 undefined가 아닐때 출력 
        }
    }
    
    1차배열 arr[0]
    1차배열 arr[1]
    2차배열 arr[2][...]
    a
    b
    c
    1차배열 arr[3]
    2차배열 arr[4][...]
    d
    e
    f
    1차배열 arr[5]
 
08. 배열 : 데이터 불러오기 : forEach()

for문과 같은용도이나 쓰임세는 다른

{
    let arr8 = [11, 22, 33, 44];
    arr8.forEach(function(element) {
        document.write(element);
    });
    arr10.forEach(el=> document.write(el))
}
11
22
33
44
 
09. 배열 : 데이터 불러오기 : for of

length()함수를 이용하여 길이 출력

{
    const arr09 = [100,200,300,400,500];
    for (let i of arr09) {
        document.write(i);
    }
}
100 
200
300
400
500
 
10. 배열 : 데이터 불러오기 : for in

length()함수를 이용하여 길이 출력

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

0,1,2,3,4

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

length()함수를 이용하여 길이 출력

{
   const num11 =[100,200,300,400,500];
   num11.map(function(el, i , a ){
        console.log(el , i) ;
        console.log(i);
        
    })
}

100 , 0
200 , 1
300 , 2
400 , 3
500 , 4
 
12. 배열 : 데이터 불러오기 : 배열 펼침연산자

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

{
    let arr12_0 = [100,200,300,400,500];
    let arr12_1 = [600,700];

    console.log(arr12_0);

    let arr12_2 = [...arr12_0, ...arr12_1];
    //두 배열 합치기
    console.log(...arr12_2);
    
}
100 
200 
300 
400 
500 
                           
100 
200 
300 
400 
500 
600 
700
 
13. 배열 : 데이터 불러오기 : 배열 구조분해할당

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

{
    let a , b , c ;

    [a, b, c]=[100,200,"javascript"];
    //let 선언한 변수에 각각의 변수값을 집어넣어줌
    console.log(`${a}, ${b}, ${c}`);
}
100, 200, javascript
 
14. 객체 : 데이터 불러오기 : 기본

obj선언한 객체의 값을 각각 가져온당

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

    console.log(`${obj.a}, ${obj.b}, ${obj.c}`);
}
100, 200, javascript
 

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

Object내장함수를 이용해서 key , values, entries를 불러옴 !

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

const 선언한 변수 안에 obj객체 안에 a라는 키를 가진 값을 부여한다

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

    console.log(`${name1}, ${name2}, ${name3}`);
}
100, 200, javascript
 

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

for in 을 이용해서 key에 obj값을 반환한다

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

    //for in 은 키값을 가져온다 
}
obj[key] : 100 ,  key : a 
obj[key] : 200 ,  key : b
obj[key] : javascript ,  key : c
 
18. 객체 : 데이터 불러오기 : map()

배열안의 obj객체를 생성하여 map()타입으로 변환하여 배열안의 객체의 값을 가져온다

{
    const obj = [
        {a:100, b:200, c:"javascript"}
    ]
    //[ ]으로 묶지않았을경우 아래와 같은 에러가 발생 !
    //Uncaught TypeError: obj.map is not a function  
    //객체타입은 map을 못쓰기에 배열안에 객체가 있을때 map()사용 가능

    obj.map(function(el1 ){
        console.log(`${el1.a}`);
    })
    obj.map(el1 =>console.log(`${el1.b}`));
}
100
200
 
19. 객체 : 데이터 불러오기 : hasOwnProperty()

객체안의 key값을 찾아서 true/false 반환

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

    console.log(obj.hasOwnProperty("a"));
    //console.log("a" in obj); 위와 아래가 같다

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

    
}

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

...펼침연산자를 이용해서 값을출력 & 저장할수있따

{
    const obj1 = {
        a:100,
        b:200,
        c:"javascript"
    }
    const obj2 = {
        e:300,
        f:400,
        g:"react"
    }
    const spread = {...obj, ...obj2};
    //spread에 obj1과 obj2를 집어넣어준다 concat과 같은함수 
    console.log(spread.a, spread.g);
}

100
react
 

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

객체의 키값에 부여된 값을 오브젝트형 변수에 할당한다

{
    const obj = {
        a:100,
        b:200,
        c:"javascript",
        d:"react"
    }
    const {a:name1, b:name2, c:name3, e:name4} = obj;
    console.log(name1);
    console.log(name2);
    console.log(name3);
    console.log(a);
    //obj.a로 출력해야 맞다
}

100
200
javascript
Uncaught ReferenceError: a is not defined at javascript02.html
//obj.a로 출력해야 맞다

 

'javascript'의 다른글

  • 현재글자바스크립트 데이터 불러오기 정리!

관련글

댓글

티스토리툴바