자바스크립트 데이터 저장(변수,상수,배열,객체) 알아보자!!

• 01. 변수 : 데이터 저장
• 02. 변수 : 데이터 저장 + 데이터 변경
• 03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
• 04. 상수 : 데이터 저장 + 데이터 변경(X)
• 05. 배열 : 데이터 저장(여러개): 표현방법1
• 06. 배열 : 데이터 저장(여러개): 표현방법2
• 07. 배열 : 데이터 저장(여러개): 표현방법3
• 08. 배열 : 데이터 저장(여러개): 표현방법4
• 09. 객체 : 데이터 저장(키와값): 표현방법1
• 10. 객체 : 데이터 저장(키와값): 표현방법2
• 11. 객체 : 데이터 저장(키와값): 표현방법3
• 12. 객체 : 데이터 저장(키와값): 표현방법4
• 13. 객체 : 데이터 저장(키와값): 표현방법5
• 14. 객체 : 데이터 저장(키와값): 표현방법6
• 15. 객체 : 데이터 저장(키와값): 표현방법7
• 16. 객체 : 데이터 저장(키와값): 표현방법8

----------------------------------------------------------------------------------------------------------------

 

01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소입니다.

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

    //console.log(x);
    //console.log(z);
    //console.log(y);
}

결과값:
100
200
javascript

 

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

변수는 데이터를 저장할수도 있지만 변경도 가능하다

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

    x = 300;

    y = 200;

    z = "react";
    
    // console.log(x);
    // console.log(y);
    // console.log(z);
}

결과값:
300
200
react

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

 

변수는 데이터를 저장, 변경도 가능하고 추가도 가능하다

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

    x += 300; // x = x + 300
    y += 400; // y = y + 400
    z += "react";

    //console.log(x);
    //console.log(y);
    //console.log(z);
}

결과값:
100300
600
javascriptreact

 

04. 상수 : 데이터 저장 + 데이터 변경(x)

상수는 데이터 저장은 가능하다 변경은 불가능합니다.

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

    x = 300; // Assignment to constant variable.
    y = 400;
    z = "react";

    //console.log(x);
    //console.log(y);
    //console.log(z);
}

결과값: 에러
상수는 데이터 변경이 불가능 하다

 

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

new Array를 써서 사용하는방법

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

    // console.log(arr[0]);
    // console.log(arr[1]);
    // console.log(arr[2]);
}

결과값:
100
200
"javascript"

결과확인하기

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

new Array를 사용해서 한줄로 쓰는방법

{
    const arr = new Array(100, 200, "javascript");
    
    // console.log(arr[0]);
    // console.log(arr[1]);
    // console.log(arr[2]);
}

결과값:
100
200
"javascript"

 

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

new Array를 생략하고 인덱스 하나씩 지정해주는 방법

{
    const arr = [];
    arr [0]  = 100;
    arr [1]  = 200;
    arr [2]  = 'javacript';

    // console.log(arr[0]);
    // console.log(arr[1]);
    // console.log(arr[2]);
}

결과값:
100
200
"javascript"

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

 

new Array를 생략하고 한줄로 하는 방법

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

    // console.log(arr[0]);
    // console.log(arr[1]);
    // console.log(arr[2]);
}

결과값:
100
200
"javascript"

 

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

new Object를 써서 인덱스 사용해서 쓰는법

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

    // console.log(obj[0]);
    // console.log(obj[1]);
    // console.log(obj[2]);
}

결과값:
100
200
"javascript"

 

10. 객체 : 데이터 저장(키와 값) : 표현방법2 : 생성자 방식

 

new Constructor() 방식으로 객체를 생성하는 방식

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

    // console.log(obj.a);
    // console.log(obj.c);
    // console.log(obj.b);
}

결과값:
100
200
"javascript"

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

new Object 안쓰고 키값을 넣어주는 방법

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

    // console.log(obj.a);
    // console.log(obj.c);
    // console.log(obj.b);
}

결과값:
100
200
"javascript"

 

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

 

변수처럼 객체를 생성하는 방식으로, 중괄호 {}안에 key:value를 쉼표로 구분하여 만듬

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

    // console.log(obj.a);
    // console.log(obj.c);
    // console.log(obj.b);
}

결과값:
100
200
"javascript"

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

 

배열안에 객체를 넣어주고 표출하는법

{
    const obj = [
        {a:100, b:200},
        {c:"javascript"}
    ];
    // console.log(obj[0].a);
    // console.log(obj[0].b);
    // console.log(obj[1].c);
}

결과값:
100
200
"javascript"

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

객체 안에 배열 및 객체값 불러오기

{
    const obj = {
        a: 100,
        b: [200,300],
        c:{x:400, y: 500},
        d:"javacript"
    }
    // console.log(obj.a);
    // console.log(obj.b[0]);
    // console.log(obj.b[1]);
    // console.log((obj.c).x);
    // console.log((obj.c).y);
    // console.log(obj.d);
}

결과값:
100
200
300
400
500
"javascript"

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

 

변수에 값을 저장한뒤 객체로 변환 하는법

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

    const obj ={a, b, c}

    // console.log(a);
    // console.log(b);
    // console.log(c);
}

결과값: 
100
200
"javascript"

 

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

함수를 통해서 객체를 생성하는 방식

{
    const obj = {
        a: 100,
        b: [200,300],
        c: "javascript",
        d: function(){
            console.log("javascirpt가 실행되었습니다.")
        }
    }
    // console.log(obj.a);
    // console.log(obj.b[0]);
    // console.log(obj.b[1]);
    // console.log(obj.b[2]); // undefined
    // console.log(obj.c);
    // console.log(obj.d); //함수 전체 코드가 보임 
    // obj.d();
}

결과값: 
100
200
300
undefined
"javacript"
"function(){ console.log("javascirpt가 실행되었습니다.") }"
"javascirpt가 실행되었습니다."