본문 바로가기
Frontend/JavaScript

[JAVASCRIPT] 문법 정리 - 데이터 저장하기

by joy_95 2021. 8. 11.

데이터 저장하기

 

01 변수 : 데이터 저장

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

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

 

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

{
    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 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(x); //400
    document.write(y); //600
    document.write(z); //javascriptjquery
}

 

03-1 변수 : 변수의 종류(지역 변수 + 전역 변수 + 매개변수)

{
    // 전연 변수 설정
    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(x); //100
        document.write(y); //500
        document.write(z); //javascript
        document.write(a); //400
    }
    func();

    //함수 밖
    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
    document.write(a); //400
}

a 값 이해가 안됨.

 

04 상수 : 변하지 않는 데이터 저장소

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

    //x = 300;
    //y = 400;
    //z = "jquery";
    //Uncaught TypeError : Assignment to constant variable.
    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
}

 

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

{
    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
}

 

06 배열 : 표현방법2

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

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

 

07 배열 : 표현방법3

{
    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
}

 

08 배열 : 표현방법4

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

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

 

09 객체 : 데이터 저장(키와 값) : 표현방법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
}

 

10 객체 : 데이터 저장(키와 값) : 표현방법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
}

 

11 객체 : 데이터 저장(키와 값) : 표현방법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
}

 

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

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

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

 

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

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

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

 

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

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

    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
    document.write(obj.d); //javascript
}

 

15 객체 : 데이터 저장(키와 값) : 표현방법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
}

 

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(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가 실행되었습니다.
}

 

반응형