데이터 저장하기

변수, 상수, 배열, 객체

• 변수 : 데이터 저장 : 데이터 변경 : 데이터 추가

• 상수 : 데이터 저장 : 데이터 변경X : 데이터 추가X

• 배열 : 데이터 저장 : 여러개

• 객체 : 데이터 저장 : 여러개 : 키와 값

변수 : 데이터 저장 : 데이터 변경 : 데이터 추가

01. 변수 : 데이터 저장 (var)

{
    var x = 100;
    var y = 200;
    var z = "javascript";

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

02. 변수 : 데이터 저장 + 변경 (let)

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    
    x = 300;
    y = 400;
    z = "jquery";
    
    document.write(x); //300
    document.write(y); //400
    document.write(z); //jquery
}

03. 변수 : 데이터 저장 + 변경 + 추가 (let)

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    x += 300;       // x = x + 300;
    x += 300;       // x == x + 300;
    x += 300;       // x === x + 300 = 1000;
    y += 400;       // y == y + 400 = 600;
    z += "jquery";

    document.write(x); //1000
    document.write(y); //600
    document.write(z); //javascriptjquery
}

상수 : 데이터 저장 : 데이터 변경X : 데이터 추가X

17. 상수 (const)

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

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

배열 : 데이터 저장 : 여러개

04. 배열 : 여러개의 데이터 저장소 (new Array)

    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

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

const 상수 : 변하지 않는 데이터

05. 배열 : 04번에서 발전

{
    const arr = new Array(100, 200, "javascript");

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

06. 배열 : new Array -> [];

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

const arr = []; *중요! 대괄호 안에 많은 데이터가 있을 수 있음을 의미

07&18. 배열 : 06번에서 발전

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

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

객체 : 데이터 저장 : 여러개 : 키와 값

내장객체

• 숫자객체

• 문자열 객체

• 배열 객체

• 수학 객체 (최대값/최소)

• 브라우저 객체

• 요소 객체

• 이벤트 객체

08. 객체 : 배열 스타일 : 표현방법1

{
    const obj = new Object();

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

09. 객체 : 배열 스타일 : 표현방법2

{
    const obj = new Object();

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

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

10. 객체 : 표현방법3

{
    const obj = {};

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

const obj = new Object(); → const obj = {};

11. 객체 : 표현방법4

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    
    document.write(obj.a); //100
    document.write(obj.b); //200
    document.write(obj.c); //javascript
}

12. 객체 : 표현방법5 : 배열 속에 객체

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

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

13. 객체 : 표현방법6 : 객체 속에 배열

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x:400, y:500},
        d: "javascript"
    }

    document.write(obj.a);    //100
    document.write(obj.b[0]); //200
    document.write(obj.b[1]); //300
    document.write(obj.c.x);  //400
    document.write(obj.c.y);  //500
    document.write(obj.d);    //javascript
}

객체 안에 객체도 가능 ex) c: {x:400, y:500, z:{300}}

14. 객체 : 표현방법7 : 객체 속에 변수

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = {a,b,c}

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

15. 객체 : 표현방법8 : 객체 속에 함수

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: "javascript",
        d: function(){
            document.write("javascript가 실행되었습니다.")
        },
        e: function(){
            document.write(obj.c + "가 행되었습니다.");
        },
        f: function(){
            document.write(this.c + "가 실행되었습니다."); //this 쓰는게 가장 좋은 방법
        }
        
        document.write(obj.a);      //100
        document.write(obj.b);      //200,300
        document.write(obj.b[0]);   //200
        document.write(obj.b[1]);   //300
        document.write(obj.c);      //javascript
        obj.d();                    //javascript가 샐행되었습니다.
        obj.e();                    //javascript가 샐행되었습니다.
        obj.f();                    //javascript가 샐행되었습니다.
    }
}