[javascript] 문법정리 - 데이터 불러오기

01 변수 : 데이터 불러오기

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

    document.write(x); //100
    document.write(y); //200
    document.write(z); //javscript
}

 

02 상수 : 데이터 불러오기

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

    document.write(x);
    document.write(y);
    document.write(z);
}

 

03 배열 : 데이터 불러오기

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

    document.write(arr[0]); //100
    document.write(arr[1]); //200
    document.write(arr[2]); //javascript
}

 

04 배열 : 데이터 불러오기

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

    document.write(arr[0]);//100
    document.write(arr[1]);//200
    document.write(arr[2]);//javascript, jquery
    document.write(arr[2][0]);//javascript
    document.write(arr[2][1]);//jquery
}

 

05 배열 : 데이터 불러오기 : 갯수 구하기 -> length

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

document.write(arr.length); //3
}

 

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

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

  for( let i = 0; i < arr.length; i ++){
    document.write(arr[i]); //100, 200, javascript
  }
}

for 문

var, let 차이

 

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

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

document.write(num[0]); //100
document.write(num[1]); //200
document.write(num[2]); //300
document.write(num[3]); //400
document.write(num[4]); //500

//for 문
for(let i=0; i<num.length; i++){
document.write(num[i]); //100200300400500
}

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

//forEach(element, index.array)
num.forEach((element, index, array) => {
document.write(element);
document.write(index);
document.write(array);
});
}

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

 

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

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

    for ( let i of num ){
        document.write(i); //100200300400500
    }
}

for of

 

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

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

    for(let i in num){
        document.write(i); //01234
    }
    //배열의 순서가 숫자로 나온다.

    for(let i in num){
        document.write(num[i]); //100200300400500
    }
}

 

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

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

    num.map((el) => {
        document.write(el); //100200300400500
    })

    num.map((element, index, array) => {
        document.write(element);
        document.write(index);
        document.write(array);
    });
    //100 0 100200300400500
    //200 1 100200300400500
    //300 2 100200300400500
    //400 2 100200300400500
    //500 2 100200300400500
}

 

11 배열 : 데이터 불러오기 : 펼침 연산자

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

    document.write(arr); //100200javascript
    document.write(arr[0], arr[1], arr[2]); //100200javascript
    document.write(..arr); //100200javascript
}

 

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

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

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

 

13 객체 : 데이터 불러오기 : 기본

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

    document.write(obj.a); //100
    document.write(obj.b); //200
    document.write(obj.c); //javascript
    document.write(obj['a']); //100
    document.write(obj['b']); //200
    document.write(obj['c']); //javascript
}

 

14 객체 : 데이터 불러오기 : Object

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

    document.write(Object.keys(obj)); //a, b, c
    document.write(Object.values(obj)); //100, 200, javascript
    document.write(Object.entries(obj));//a,100,b,200,c,javascript
}

 

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

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

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

    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javascript
}

 

16 객체 : 데이터 불러오기 : for in문

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

    for(let key in obj){
        document.write(obj[key]);//100, 200 ,javascript
    }
}

 

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

{
    const obj = [
        {a:100, b:200, c:"javascript1"},
        {a:300, b:400, c:"javascript2"},
        {a:500, b:600, c:"javascript3"}
    ];

    document.write(obj[0].a); //100
    document.write(obj[0].b); //200
    document.write(obj[0].c); //javascript1
    document.write(obj[1].a); //300
    document.write(obj[1].b); //400
    document.write(obj[1].c); //javascript2
    document.write(obj[2].a); //500
    document.write(obj[2].b); //600
    document.write(obj[2].c); //javascript3
    
    obj.map(el => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
    });
//100
//200
//javascript1
//300
//400
//javascript2
//500
//600
//javascript3
}

 

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

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

    document.write(obj.hasOwnProperty('a')); //true
    document.write(obj.hasOwnProperty('b')); //true
    document.write(obj.hasOwnProperty('c')); //true
    document.write(obj.hasOwnProperty('100')); //false
    document.write('a' in obj);//true
    document.write('b' in obj);//true
    document.write('c' in obj);//true
    document.write('100' in obj);//false
}

 

19 객체 : 데이터 불러오기 : 펼침 연산자 - 복사

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

    document.write(spread.a);//100
    document.write(spread.b);//200
    document.write(spread.c);//javscript
}

 

20객체 : 데이터 불러오기 : 펼침 연산자 - 데이터 추가하기

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

    const spread = {...obj, d : "jquery"}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javscript
    document.write(spread.d); //jquery
}

 

21 객체 : 데이터 불러오기 : 펼침 연사자 - 데이터 결합시키기

{
    const objA = {
        a : 100,
        b : 200
    }
    const objB = {
        c : "javascript",
        d : "jquery"
    }
    const spread = {...objA, ...objB}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
    document.write(spread.d); //jquery
}

 

22 객체 : 데이터 불러오기 : 비구조화 할당

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

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

 

23 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장

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

    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javscript
}