01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소이며 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다.

{
    var x = 100;            // 변수 x에 100을 저장함
    var y = 200;            // 변수 y에 200을 저장함
    var z = "javascript";   // 변수 z에 문자열 "javascript"를 저장함

    document.write(x);
    document.write(y);
    document.write(z);
}
결과 보기

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

변수는 데이터를 저장하는 저장소이고, 데이터를 변경할 수 합니다.

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

    x = 300;         // 변수 x의 값이 100에서 300으로 변경됨
    y = 400;         // 변수 x의 값이 200에서 400으로 변경됨
    z = "jquery";    // 변수 z의 값이 "javascript"에서 "jquery"로 변경됨

    document.write(x);
    document.write(y);
    document.write(z);
}
결과 보기

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

변수는 데이터를 저장하는 저장소이고, 데이터를 변경하고 추가할 수 있습니다.

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

    x += 300;       // 변수 x의 값에 300을 추가 (x+300)
    y += 400;       // 변수 y의 값에 400을 추가 (y+400)
    z += "jquery";  // 변수 z의 값에 문자열 "jquery"를 추가 (z+"jquery")

    document.write(x);
    document.write(y);
    document.write(z);
}
결과 보기

04. 변수의 종류 : 지역 변수 + 전역 변수

전역변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역변수는 오직 함수 블록{} 내에서만 사용 할 수 있습니다.

{
    let x = 100;    // 전역변수
    let y = 200;

    function func() {
        let x = 100;            // 지역변수
        let z = "javascript"    // 지역변수

        x = 200;                // 지역변수 100 --> 200
        y = 300;                // 전역변수 200 --> 300

        document.write("함수 안");
        document.write(x);
        document.write(y);
        document.write(z);
    }
    func();

    document.write("함수 밖");
    document.write(x);
    document.write(y);
    document.write(z);
}
결과 보기
함수 안
200
300
javascript

함수 밖
100
300
undefined

05. 상수 : 데이터 저장 + 데이터 변경(X)

상수는 데이터 저장은 가능하나 변경은 불가능합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언 불가능하며 상수의 값을 재지정할 수도 없습니다.

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

    //x = 300;      // 이런 식으로 데이터를 변경할 수 없음
    //x = 400;
    //x = "jquery";
            
    document.write(x);
    document.write(y);
    document.write(z);
}
결과 보기

06. 배열 : 데이터 저장(여러개) : 표현 방법 1

배열은 여러개의 데이터를 저장할 수 있는 저장소이며, 표현 방법도 여러가지입니다.

{
    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";
            
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}
결과 보기

07. 배열 : 데이터 저장(여러개) : 표현 방법 2

배열은 여러개의 데이터를 저장할 수 있는 저장소이며, 표현 방법도 여러가지입니다.

{
    const arr = new Array(100, 200, "javascript");
            
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}
결과 보기

08. 배열 : 데이터 저장(여러개) : 표현 방법 3

배열은 여러개의 데이터를 저장할 수 있는 저장소이며, 표현 방법도 여러가지입니다.

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

09. 배열 : 데이터 저장(여러개) : 표현 방법 4

배열은 여러개의 데이터를 저장할 수 있는 저장소이며, 표현 방법도 여러가지입니다.

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

10. 객체 : 데이터 저장(키와 값) : 표현 방법 1

변수는 데이터 값을 하나밖에 저장하지 못하지만 객체는 값이 필요한 대로 만들어 쓸 수 있습니다. 객체의 데이터는 '이름: 값'쌍으로 이루어진 속성(Properties)입니다. 그 중 첫 번째 방법입니다.

{
    const obj = new Object();
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript";

    document.write(obj[0]);
    document.write(obj[1]);
    document.write(obj[2]);
}
결과 보기

11. 객체 : 데이터 저장(키와 값) : 표현 방법 2

변수는 데이터 값을 하나밖에 저장하지 못하지만 객체는 값이 필요한 대로 만들어 쓸 수 있습니다. 객체의 데이터는 '이름: 값'쌍으로 이루어진 속성(Properties)입니다.

{
    const obj = new Object();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

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

12. 객체 : 데이터 저장(키와 값) : 표현 방법 3

변수는 데이터 값을 하나밖에 저장하지 못하지만 객체는 값이 필요한 대로 만들어 쓸 수 있습니다. 객체의 데이터는 '이름: 값'쌍으로 이루어진 속성(Properties)입니다.

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

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

13. 객체 : 데이터 저장(키와 값) : 표현 방법 4

변수는 데이터 값을 하나밖에 저장하지 못하지만 객체는 값이 필요한 대로 만들어 쓸 수 있습니다. 객체의 데이터는 '이름: 값'쌍으로 이루어진 속성(Properties)입니다.

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

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

14. 객체 : 데이터 저장(키와 값) : 표현 방법 5

배열 속에 객체가 있는 표현 방법입니다.

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

    document.write(obj[0].a);
    document.write(obj[0].b);
    document.write(obj[1].c);
}
결과 보기

15. 객체 : 데이터 저장(키와 값) : 표현 방법 6

객체 속에 배열이 있는 표현 방법입니다.

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

    document.write(obj.a);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c.x);
    document.write(obj.c.y);
    document.write(obj.d);
}
결과 보기

16. 객체 : 데이터 저장(키와 값) : 표현 방법 7

객체 속에 변수가 있는 표현 방법입니다.

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

    const obj = {a, b, c};

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

17. 객체 : 데이터 저장(키와 값) : 표현 방법 8

객체 속에 함수가 있는 표현 방법입니다.

{
    const obj = {
        a : 100, 
        b : [200, 300],
        c : {x : 400, y : 500},
        d : "javascript", 
        e : function() {
            document.write("자바스크립트가 실행되었습니다.")
        }, 
        f : function() {
            document.write(obj.d + "가 실행되었습니다.")
        }, 
        g : function() {
            document.write(this.d + "가 실행되었습니다.")
        }
    };

    document.write(obj.a);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.b);
    document.write(obj.c.x);
    document.write(obj.c.y);
    document.write(obj.c);
    obj.e();
    obj.f();
    obj.g();
}
결과 보기
100
200
300
200,300
400
500
[object Object]
자바스크립트가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.