데이터 저장하기

  1. 변수 : 데이터 저장
  2. 변수 : 데이터 저장 + 데이터 변경
  3. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
  4. 상수 : 데이터 저장(변하지 않음)
  5. 배열 : 데이터 저장(여러개) : 표현 방법1
  6. 배열 : 데이터 저장(여러개) : 표현 방법2
  7. 배열 : 데이터 저장(여러개) : 표현 방법3
  8. 배열 : 데이터 저장(여러개) : 표현 방법4
  9. 객체 : 데이터 저장(키와 값) : 표현 방법1 : 배열 스타일
  10. 객체 : 데이터 저장(키와 값) : 표현 방법2 : 객체 스타일
  11. 객체 : 데이터 저장(키와 값) : 표현 방법3
  12. 객체 : 데이터 저장(키와 값) : 표현 방법4
  13. 객체 : 데이터 저장(키와 값) : 표현 방법5 : 배열 속에 객체
  14. 객체 : 데이터 저장(키와 값) : 표현 방법6 : 객체 속에 배열
  15. 객체 : 데이터 저장(키와 값) : 표현 방법7 : 객체 속에 변수
  16. 객체 : 데이터 저장(키와 값) : 표현 방법8 : 객체 속에 함수
  1. 변수의 종류 : 변수(전역/지역)
  2. 변수의 변환 : 형 변환
  3. 변수의 유형 : 데이터 타입

01. 변수 : 데이터 저장

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

    document.write("*** 01. 변수 : 데이터 저장소 ***");
    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;
    z = "jquery";
    
    document.write("*** 02. 변수 : 데이터 저장 + 데이터 변경 ***");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

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

{
    let x = 100;
    let y = 200;
    let z = "javascript";
    x += 300;   // x = x + 300; (대입연산자)
    y += 400;   // y = y + 400;
    z += "jquery";  // z = z + "jquery";

    document.write("*** 03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가 ***");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

04. 상수 : 데이터 저장소 : 데이터 값이 변하지 않음

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    //x = 300;
    //y = 400;
    //z = "jquery";
    //Uncaught TypeError: Assignment to constant variable.

    document.write("*** 04. 상수 : 데이터 저장소 : 데이터 값이 변하지 않음 ***");
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

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

{
    const arr = new Array();    //배열 선언
    arr[0] = 100;   //첫번째 배열 저장소에 숫자 100을 저장
    arr[1] = 200;   //두번째 배열 저장소에 숫자 200을 저장
    arr[2] = "javascript";  //세번째 배열 저장소에 문자열 javascript를 저장

    document.write("*** 05. 배열 : 여러개의 데이터 저장 : 표현 방법1 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

06. 배열 : 표현방법2

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

    document.write("*** 06. 배열 : 표현방법2 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

07. 배열 : 표현 방법3

{
    const arr = [];     //배열 선언
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    document.write("*** 07. 배열 : 표현 방법3 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

08. 배열 : 표현 방법4

{
    const arr = [100, 200, "javascript"];       //배열 선언
    
    document.write("*** 08. 배열 : 표현 방법4 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

결과보기

09. 객체 : 데이터 저장소(키와 값) : 배열 스타일

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

    document.write("*** 09. 객체 : 데이터 저장소(키와 값) : 배열 스타일 ***");
    document.write(obj[0]);
    document.write(obj[1]);
    document.write(obj[2]);
}

결과보기

10. 객체 : 데이터 저장(키와 값) : 표현 방법2 : 객체 스타일

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

    document.write("*** 10. 객체 : 데이터 저장(키와 값) : 표현 방법2 : 객체 스타일 ***")
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

결과보기

11. 객체 : 데이터 저장(키와 값) : 표현 방법3 : 키워드 생략

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

    document.write("*** 11. 객체 : 데이터 저장(키와 값) : 표현 방법3 : 키워드 생략 ***")
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);             
}

결과보기

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

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

    document.write("*** 12. 객체 : 데이터 저장(키와 값) : 표현 방법4 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

결과보기

13. 객체 : 데이터 저장(키와 값) : 표현 방법5 : 배열 속에 객체

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

    document.write("*** 13. 객체 : 데이터 저장(키와 값) : 표현 방법5 : 배열 속에 객체 ***");
    document.write(obj[0].a);
    document.write(obj[0].b);
    document.write(obj[1].c);
}

결과보기

14. 객체 : 데이터 저장(키와 값) : 표현 방법6 : 객체 속에 배열

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

    document.write("*** 14. 객체 : 데이터 저장(키와 값) : 표현 방법6 : 객체 속에 배열 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c);
}

결과보기

15. 객체 : 데이터 저장(키와 값) : 표현 방법7 : 객체 속에 변수

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

    const obj = {a, b, c};

    document.write("*** 15. 객체 : 데이터 저장(키와 값) : 표현 방법7 : 객체 속에 변수 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);

}

결과보기

16. 객체 : 데이터 저장(키와 값) : 표현 방법8 : 객체 속에 함수

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

    document.write("*** 16. 객체 : 데이터 저장(키와 값) : 표현 방법8 : 객체 속에 함수 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c);
    obj.d();
    obj.e();
    obj.f();            
}

결과보기

01. 변수의 종류 : 지역변수, 전역변수

{
    document.write("*** 01. 변수의 종류 ***")

    let x = 100;    //변수 설정 : 전역 변수
    let y = 200;
    let z = "javascript";
    let a = 300;

    function func(){
        let x = 100;    //변수 설정 : 지역 변수
        let y = 200;
        let z = "javascript";
        a = 400;    //전역 변수 : 변수 값이 300 -> 400 변경
        y = 500;    //지역 변수 : 변수 값이 200 -> 500 변경

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

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

결과보기

02. 변수의 변환 : 형 변환

{
    document.write("*** 02. 변수의 변환 ***")

    let x = 100;
    let y = "100";

    document.write("x : " + x + " : " + typeof(x));
    document.write("y : " + y + " : " + typeof(y));

    x = "" + x; //숫자를 문자열로 형 변환
    document.write("x : " + x + " : " + typeof(x));

    y = Number(y); //내장 객체를 이용한 형 변환
    document.write("y : " + y + " : " + typeof(y));

    x = Number(x);
    document.write("x : " + x + " : " + typeof(x));

    y = "" + y;
    document.write("y : " + y + " : " + typeof(y));
}

결과보기

03. 변수의 유형(데이터 타입)

{
    document.write("*** 19. 변수의 유형 ***");

    let num1 = 100;
    let str = "javascript";
    let func = function(){};
    let arr = [1, 2, 3];
    let obj = {a:1, b:2, c:3};
    let boo = true;
    let nul;    //아무런 값이 없을 때
    let und = undefined;   //값이 정의되어 있지 않을 때
    let sym = Symbol();

    document.write(typeof(num1));
    document.write(typeof(str));
    document.write(typeof(func));
    document.write(typeof(arr));
    document.write(typeof(obj));
    document.write(typeof(boo));
    document.write(typeof(nul));
    document.write(typeof(und));
    document.write(typeof(sym));
}

결과보기