JAVASCRIPT

자바스크립트 데이터 저장에 대해 알아봅시다~

김도현2 2023. 2. 26. 13:19
반응형

자바스크립트 (JavaScript) 데이터 저장에 대해 얼마나 알고계신가요?

우리는 변수, 상수, 배열, 객체에 대해 알아보고, 여러 예시를 보는 시간을 가지겠습니다!

 

 

 

 

 

  • 변수(Variable) : 변수는 데이터를 저장하고 나중에 사용하기 위한 이름표입니다. 변수는 var, let, const 키워드를 사용하여 선언할 수 있습니다. var와 let은 값이 변경될 수 있는 변수를 선언할 때 사용되고, const는 값이 변경될 수 없는 상수를 선언할 때 사용됩니다.
  • 상수(Constant) : 상수는 값을 변경할 수 없는 변수를 의미합니다. const 키워드를 사용하여 상수를 선언할 수 있습니다. 상수는 일반적으로 변하지 않는 값을 저장할 때 사용됩니다.
  • 배열(Array) : 배열은 여러 개의 값을 하나의 변수에 저장하기 위한 방법입니다. 배열은 대괄호([ ])를 사용하여 선언하며, 각각의 값은 쉼표( , )로 구분됩니다. 배열의 각각의 값은 인덱스를 사용하여 접근할 수 있습니다.
  • 객체(Object) : 객체는 속성과 메서드를 가지고 있는 데이터 타입입니다. 객체는 중괄호({ })를 사용하여 선언하며, 속성과 메서드는 이름과 값으로 구성됩니다. 객체의 속성에 접근할 때는 점( . ) 또는 대괄호([ ])를 사용합니다.

 

 

 

 

01. 변수 : 데이터 저장

변수는 데이터를 담는 그릇입니다.

{
    var x = 100;             //변수 x에 숫자 100을 저장함
    var y = "200";           //변수 y에 문자 200을 저장함
    var z = "javascript";    //변수 z에 문자 "javascript"를 저장함
    
    console.log(x);
    console.log(y);
    console.log(z);
}

결과 :

100
200
javascrip

 

 

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

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

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

    x = 300;            //변수를 중간에 변경해도 정상 작동됩니다.
    y = 500;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}
결과 :

300
500
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);
}
결과 :

400
600
javascripreact

 

 

04. 상수 : 데이터 저장 + 데이터 변경X

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

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    
    x = 300;        //const(상수)는 변경이 불가능합니다.
    y = 400;
    z = "react";               
    
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 :

Uncaught TypeError: Assignment to constant variable.
(에러. 결과값이 안뜸)

 

 

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

배열은 데이터 저장을 여러개 할 수 있다.

{
    const arr = new Array();    
    arr[0] = 100;              //배열 값을 따로 저장해줍니다.
    arr[1] = 200;
    arr[2] = "javascript";

    console.log(arr[0]);       //배열 [0]첫번째 값을 불러옵니다.
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 :

100
200
"javascript"

 

 

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

배열은 데이터 저장을 여러개 할 수 있다.

배열안에 요소를 적어 불필요한 코드를 줄일 수 있다.

{
    const arr = new Array(100, 200, "javascript");  //배열코드안에 직접 여러개의 값을 저장합니다.

    console.log(arr[0]);    
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 :

100
200
javascrip

 

 

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

배열은 데이터 저장을 여러개 할 수 있다.

특정 변수 선언코드를 생략해 코드를 줄일 수 있다.

{
    const arr = [ ];        //특정 선언코드를 생략했습니다.
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascrip";

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 :

100
200
javascrip

 

 

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

배열은 데이터 저장을 여러개 할 수 있다.

특정 변수 선언코드를 생략하고 배열안에 요소를 적어 코드를 줄일 수 있다.

{
    const arr = [100, 200, "javascrip"];   //특정 선언코드를 생략하고 배열 안에 직접 값을 여러개 저장합니다.

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 :

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

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

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

숫자대신 변수명을 직접 선언 할 수 있다.

{
    const obj = new Object();       
    obj.a = 100;                //객체 변수에 변수명을 직접 선언해서 저장할 수 있습니다.
    obj.b = 200;
    obj.c = "javascrip";

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 :

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

특정 변수 선언코드를 생략해 코드를 줄일 수 있다.

{
    const obj = { };        //특정 선언코드를 생략
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascrip";

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 :

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

{
    const obj = {a:100, b:200, c:"javascript"};        //객체 안에 키와 값을 한번에 적을수 있습니다.
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascrip";

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 :

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

배열안에 객체를 넣어 값을 불러올 수 있다.

{
    const obj = [           //[ ] 안에 여러 배열,객체값을 넣을 수 있습니다.
    {a:100, b:200},         //obj[0] 줄입니다.
    {c:"javascript"}        //obj[1] 줄입니다. 
    ];

    console.log(obj[0].a);  //[배열].(객체) 를 사용하여 값을 출력합니다.
    console.log(obj[0].b);
    console.log(obj[1].c);
}
결과 :
 

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

객체 안에 배열을 넣어 값을 불러올 수 있다.

{
    const obj = {
    a: 100,                 //다음 배열값을 넣을때 쉼표를 붙여줍니다.
    b: [200, 300],          
    c: {x: 400, y: 500},
    d: "javascript"
    };

    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
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

객체안 키값에 변수를 저장한다.

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

    const obj = {a, b, c};  //위 상수값을 객체에 넣는 작업입니다.

    console.log(a);
    console.log(b);
    console.log(c);
    
    // console.log(obj.a);   ( ) 안에 obj. 를 붙여도 정상작동됩니다.
    // console.log(obj.b);
    // console.log(obj.c);
}
결과 :

100
200
javascrip

 

 

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

객체는 키와 값에 데이터 저장을 할 수 있다.

객체 안에 함수를 넣을 수 있다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: "javascript",
        d: function(){          //function는 함수입니다.
            console.log("javascript가 실행되었습니다.")
            };
}
    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]);  //b배열의 2번은 존재하지않아 undefined 가 뜹니다.
    console.log(obj.c);
    console.log(obj.d);     //(X) 문자열 그대로 나옵니다.
    obj.d( );                    //함수 실행문은 이렇게 출력합니다.
}
결과 :
 

100
200
300
undefined
javascrip
f ( ) {
console.log("javascript가 실행되었습니다.");
}
javascrip가 실행되었습니다.
200

 

 

 

 

자바스크립트 변수,상수,객체,배열에 대해 알아봤습니다!

제일 중요한 기본기가 될테니 개념을 이해합시다!