Top

데이터 저장하기


기초 문법 변수 자료형 식별자/키워드 객체

01. 변수 : 데이터 저장

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

결과보기

100
200
javascript

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

{
    let x = 100;
    let y = 200;
    let z = "javascript";
            
    x = 300; // 데이터 변경
    y = 400;
    z = "Jquery";
    
    document.write(x);
    document.write(y);
    document.write(z);         
}

결과보기

300
400
Jquery

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

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    
    x += 300;           // x = x + 300(x + 300의 값을 다시 x에 대입);
    y -= 400;           // y = y - 400(y - 400의 값을 다시 y에 대입);
    z += "jquery";      // z = javascript + jquery;
    
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

400
-200
javascriptjquery

04. 변수 : 변수의 종류(지역변수, 전역변수, 매개변수)

{
    let x = 100;
    let y = 200;
    function func(){

        document.write("함수 안");
        
        let x = 100;
        let z = "javascript";
        x = 200;
        y = 300;
    }

    func();

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

결과보기

함수 안 100 200 /javascript 함수 밖

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

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

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

결과보기

100
200
javascript

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

{
    const arr = new Array();    // 임의로 정한 arr라고 하는 이름을 정하고 new 키워드로 배열을 정의
    arr[0] = 100;               // 배열의 첫번째 주소에 접근해 100 저장
    arr[1] = 200;               // 두번째 주소에 접근해 200 저장
    arr[2] = "javascript";      // 세번째 주소에 접근해 javascript 문자열 저장

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

100
200
javascript

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

{
    const arr = new Array(100, 200, "javascript"); // 소괄호 안에 첫번째 배열 주소부터 차례대로 자료형에 상관없이 저장

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

100
200
javascript

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

{
    const arr = [];                     // new 연산자를 사용하지 않고 중괄호로 정의
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

100
200
javascript

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

{
    const arr = [100, 200, "javascript"];  // new 연산자를 사용하지 않고 중괄호 안에 첫번째 주소부터 차례대로 자료 저장

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

100
200
javascript

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

{
    const obj = new Object();       // 배열처럼 new 연산자 사용
    obj[0] = 100;                   // 배열처럼 특정 값에 접근할 수 있다(첫번째 값에 접근해 100을 저장)
    obj[1] = 200;
    obj[2] = "javascript";

    document.write(obj[0]);         // 0번째 값 출력
    document.write(obj[1]);         // 1번째 값 출력
    document.write(obj[2]);         // 2번째 값 출력
}

결과보기

100
200
javascript

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

{
    const obj = new Object();
    obj.a = 100;                      // 점 표기법(.변수 이름)를 사용해 object의 a값에 100 저장
    obj.b = 200;                      // object의 b값에 200 저장
    obj.c = "javascript";             // object의 c값에 javascript 문자열을 저장

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

결과보기

100
200
javascript

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

{
    const obj = {};                   // 배열을 정의할때 대괄호[]를 사용했던 것과 비슷하게 객체는 중괄호{}를 사용해서 정의할 수 있다         
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

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

결과보기

100
200
javascript

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

{
    const obj = {                     // a : 100, b: 200, c: "javascript"에서 a,b,c는 키           
                  a: 100,             // : 표현 뒤에 100, 200, "javascript"는 값
                  b: 200,
                  c: "javascript"
                };

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

결과보기

100
200
javascript

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

{
    const obj = [{a: 100, b: 200}, {c: "javascript"}];               // 2개의 주소를 가진 배열에 객체를 저장
                                                                     
    document.write(obj[0].a);                                        // 100 출력
    document.write(obj[0].b);                                        // 200 출력
    document.write(obj[1].c);                                        // javascript 출력
}

결과보기

100
200
javascript

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

{
    const obj = {
        a: 100,                                     // 숫자가 저장된 변수 a
        b: [200, 300],                              // 2개의 주소를 가진 1차원 배열을 저장
        c: {                                        // 객체 c를 저장
              x: 400,
              y: 500
           },
        d: "javascript"                             // 문자열 javascript 저장
        }

    document.write(obj.a);              // 100 출력
    document.write(obj.b[0]);           // 배열 0번지의 200 출력
    document.write(obj.b[1]);           // 배열 1번지의 300 출력
    document.write(obj.c.x);            // 객체 c의 x값 400 출력
    document.write(obj.c.y);            // 객체 c의 y값 500 출력
    document.write(obj.d);              // javascript 출력
}

결과보기

100
200
300
400
500
javascript

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);
}

결과보기

100
200
javascript

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

{
    const obj = {                                                         // 객체 안에 함수를 저장할 수 있다
            a: 100,
            b: [200, 300],
            c: {
                x: 400,
                y: 500
            },
            d: "javascript",
            e: function () {
                document.write("javascript가 실행되었습니다", "
"); }, f: function () { document.write(obj.d + "가 실행되었습니다", "
"); // 문자 결합 "javascript"가 실해되었습니다 }, g: function () { document.write(this.d + "가 실행되었습니다", "
"); // this 객체 : 자기 자신의 주소값을 참조 } } document.write("
*** 017. 객체 ***
"); 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.x); // 400 document.write(obj.c.y); // 500 obj.e(); // 객체 내부 함수 e() 호출 obj.f(); // 내부 함수 f() 호출 obj.g(); // 내부 함수 g() 호출 }

결과보기

100
200, 300
200
300
400
500
javascript가 실행되었습니다
javascript가 실행되었습니다
javascript가 실행되었습니다