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

변수는 let은 저장된 값을 바꾸어 불러올 수 있다.

{
    //let x = 100;
    //let y = 200;
    //let z = "javascript";

    let x= 100,
    y = 200,
    z = "javascript";
    document.write(x)
    document.write(y)
    document.write(z)
}
결과보기
100
200
javascript

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

상수 const는 값을 바꾸어 불러올 수 없다.

{
    const x = 100,
            y = 200,
            z = "javscript"

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

var arr = [][]; 이와 같은 한 번에 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
}
결과보기
100
200
javascript
jquery

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

length는 배열 안에 값이 몇개 있는지 알려준다.

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

    document.write(arr.length);
}
결과보기
3

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

for문은 초기값,조건식,증감식 구조로 나누어진며, 반복된다

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

       //  document.write(arr[0]);
       //  document.write(arr[1]);
       //  document.write(arr[2]);
       //  document.write(arr[3]);
       //  document.write(arr[4]);
       //  document.write(arr[5]);
       //  document.write(arr[6]);
       //  document.write(arr[7]);
       //  document.write(arr[8]);

        //for(초기값, 조건식, 증감식)
        for(let i=0; i < arr.length; i++){
            document.write(arr[i]);
        }
}
결과보기
100
200
300
400
500
600
700
800
900

07. 변수 : 데이터 불러오기 forEach()

forEach문은 for문을 좀더 편하게 쓰기위해 만들어졌으며 반복문.

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

    //forEach()

     num.forEach(function(el){
           document.wirte(el);
        });

     num.forEach(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

08. 배열에 : 데이터 불러오기 for of()

for of문은 객체를 순회할 수 있도록 해주는 반복문.

{
    const arr = [100, 200, 300, 400, 500]
    for( let i of arr){
        document.write(i);
}
결과보기
100
200
300
400
500

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

for in문은 for문과 다른 반복문으로, 객체의 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다. 

{
    const arr = [100, 200, 300, 400, 500]
    for( let i in arr){
        //document.write(i);
        document.write(arr[i]);
}
결과보기
0 1 2 3 4
100 200 300 400 500

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

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

{
    const arr = [100, 200, 300, 400, 500];
            
    //forEach 이용해서 값을 출력해주세요!

    arr.forEach(function(el){
        document.write(el);
    });

    arr.map(function(el){
        document.write(el);
    });
    arr.map(function(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    });
 }
결과보기
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

11. 펼침연산자(Spread Operator)

배열에 포함된 항목을 목록으로 바꿔주는 연산자이다. 마침표 세 개(...)로 표시한다. 펼침 연산자는 단독으로 쓰일 수 없음에 주의해야 한다. 

{
    {
        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);  //펼침연산자
    }
}
결과보기

12. 배열구조할당(Destructruing assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

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

    document.write(a);
    document.write(b);
    document.write(c);
}
결과보기

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

기본적인 객체 데이터 불러오기 형태입니다.

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
    //100
    //200
    //javascript
}
결과보기

14. 객체 :키,데이터,All 불러오기

객체를 불러오는 새로운 형태에 대해 알아보겠습니다.

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

    // 잘안씀
    document.write(Object.keys(obj));    //키 불러옴
    document.write(Object.values(obj));  //값 불러옴
    document.write(Object.entries(obj)); //다 불러옴
}

}
결과보기

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

변수에 데이터를 저장해서 불러오는 방법입니다.

{
    const obj = {
        a : 100,
        b : 200,
        c : "javascript"
    }
    // 변수에 저장해서 불러오기
    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    document.write(name1);
    document.write(name2);
    document.write(name3);
}
결과보기

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

for in 함수를 이용하여 객체를 불러오는 방법입니다.

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

    for(let key in obj){
        document.write(obj[key]);
    }
}
결과보기

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

map 함수를 이용하여 객체 데이터를 불러오는 방법입니다.

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

obj.map((el) => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});
}
결과보기

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

hasOwonProperty() 함수는 값이 있는지 없는지 확인하는 함수로, true / false값을 출력합니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    // 있는지 없는지 확인 true /false
    document.write(obj.hasOwnProperty("a"));
    document.write(obj.hasOwnProperty("b"));
    document.write(obj.hasOwnProperty("c"));
    document.write(obj.hasOwnProperty("d"));
    document.write("a" in obj);
    document.write("b" in obj);
    document.write("c" in obj);
    document.write("d" in obj);
}
결과보기

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

{
    // 복사
    {
        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. 객체 : 데이터 불러오기 : 펼침연산자 - 추가

{
    // 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);
    }
}
결과보기

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

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

        document.write(spread.a);
        document.write(spread.b);
        document.write(spread.c);
        document.write(spread.d);
    }
}
결과보기

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


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

        document.write(a);
        document.write(b);
        document.write(c);
    }
결과보기

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


    // 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);
    }
결과보기
Top