Javascript 레퍼런스

데이터 저장하기

  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 : 객체 속에 함수
  17. 변수의 종류 : 전역변수, 지역변수
  18. 변수의 변환 : 형 변환
  19. 변수의 유형 : 데이터 타입

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. 배열 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

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

    document.write("*** 06. 배열 ***");
    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. 배열 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

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

    document.write("*** 08. 배열 ***");
    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

{
    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. 객체 ***);
    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. 객체 ***");
    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. 객체 ***");
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

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

{
    const obj = {a: 100, b: 200, c:"javascript"};  //가장 많이 사용하는 형태

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

    document.write("*** 13. 객체 ***");
    document.write(obj[0].a);
    document.write(obj[0].b);
    document.write(obj[1].c);

    // console.log(obj[0]); 콘솔로그 - 크롬 개발자 모드
}

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

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

    document.write("*** 14. 객체 ***");
    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. 객체 ***); //실행문
    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("javascript가 실행되었습);
        },
        e: function(){
            document.write( obj.c + "가 실행되었습);
        },
        f: function(){
            document.write( this.c + "가 실행되었습);
        }
    }

    document.write("*** 16. 객체 ***);
    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();
}

결과보기


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

{
    document.write("*** 17. 변수의 종류 : 전역변수, 지역변수 ***");

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

결과보기


18. 변수의 변환 : 형 변환

{
    document.write("*** 18. 변수의 변환 : 형 변환 ***");

    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 = String(y);     
    document.write("y : " + y + " : " + typeof(y));
}

결과보기


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

{
    //변수 : 숫자(number), 문자(string), 함수(function), 배열(object),
    //       객체(object), 불린(트루폴스값: boolen), 특수값(null, undefined), 심볼(symbol)

    document.write("*** 19. 변수의 유형(데이터 타입) ***");

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

    document.write(typeof(num));
    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));
}

결과보기