Top

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

{
    let x = 100,
        y = 200,
        z = "javascript";
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

100
200
javascript
-->

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

{
    const x = 100, y = 200, z = "javascript";
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

100
200
javascript

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

{
    const arr = [100, 200, "javascript"];
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

100
200
javascript

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

{
    const arr = [100, 200, ["javascript", "jquery"]];
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
    document.write(arr[2][0]);
    document.write(arr[2][1]);
}

결과보기

100
200
javascript jquery
javascript
jquery

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

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

결과보기

3

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

{
    const arr = [100, 200, 300, 400, 500];
    // document.write(arr[0])
    // document.write(arr[1])
    // document.write(arr[2])
    // document.write(arr[3])
    // document.write(arr[4])
    //for(초기값, 조건식, 증감식)
    for( let i=0; i<arr.length; i++ ){
        document.write(arr[i], "<br>");
    }
}

결과보기

100 200 300 400 500

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

{
    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])
    //for문
    for( let i=0; i<num.length; i++ ){
        document.write(num[i],"<br>");
    }
    //forEach()
    num.forEach(function(el){
        document.write(el, "<br>");
    });
    //forEach(element, index, array)
    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 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];

    document.write("
*** 08: 배열 : 데이터 불러오기 ***
"); for( let i of num ){ document.write(i); } }

결과보기

100 200 300 400 500

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

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

    document.write("
*** 09: 배열 : 데이터 불러오기 ***
"); for( let i in num ){ document.write(i); } for( let i in num ){ document.write(num[i]); } }

결과보기

0 1 2 3 4
100 200 300 400 500

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

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

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

    //map(element, index, array)
    num.map(function(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

결과보기

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

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

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

    document.write(num); 
    document.write(num[0], num[1], num[2], num[3], num[4]);
    document.write(...num); 
}

결과보기

100, 200, 300, 400, 500
100 200 300 400 500
100 200 300 400 500

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

{
let a, b, c;

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

document.write(a)
document.write(b)
document.write(c)
}

결과보기

100 200 javascript

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

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

document.write(odj.a)
document.write(odj.b)
document.write(odj.c)
document.write(odj['a'])
document.write(odj['b'])
document.write(odj['c'])
}

결과보기

100
200
javascript
100
200
javascript

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

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

document.write(Object.keys(odj);
document.write(Object.values(odj);
document.write(Object.entries(odj);
//a
//b
//c
}

결과보기

a,b,c
100,200,javascript
a,100,b,200,c,javascript

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

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

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

document.write(name1)
document.write(name2)
document.write(name3)
}

결과보기

100 200 javascript

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


const odj = {
    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: "javascript"}
]

obj.map(function(el){
    document.write(el.a)
    document.write(el.b)
    document.write(el.c)
});
}

결과보기

100 200 javascript

18 객체 제이터 불러오기 : hasOwnProperty()

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




    documentw.write(obj.hasOwnproprerty('a'))
    documentw.write(obj.hasOwnproprerty('b'))
    documentw.write(obj.hasOwnproprerty('c'))
    documentw.write(obj.hasOwnproprerty('d'))
    documentw.write('a' in obj)
    documentw.write('b' in obj)
    documentw.write('c' in obj)
    documentw.write('d' in obj)

}

결과보기

true true true false true true true false

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

    const Spread = {...obj}

    document,write(Spread.a)
    document,write(Spread.b)
    document,write(Spread.c)

}

결과보기

100 200 javascript

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

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

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

    document,write(Spread.a)
    document,write(Spread.b)
    document,write(Spread.c)
    document,write(Spread.d)
}

결과보기

100 200 javascript jquery

21. 객체 : 데이터 불러오기 : 펼침 연산자 - 결합

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

        document,write(Spread.a)
        document,write(Spread.b)
        document,write(Spread.c)
        document,write(Spread.d)
    }
    

결과보기

100 200 "javascript" "jquery"

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

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

    const {a,b,c} = obj;

    document,write(a);
    document,write(b);
    document,write(c);
    
}

결과보기

100 200 javascript

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


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

    const {a:name1,b:name2,c:name3} = obj;

    document,write(name1);
    document,write(name2);
    document,write(name3);

}
    

결과보기

100 200 javascript
// result h4를 클릭하면