자바스크립트 데이터 저장하기

자바스크립트 데이터 저장하기

 

 

 

 

자바스크립트에서 데이터 저장하는 방법들에 대해 정리해보려고 합니다.

 

변수

변수는 데이터를 저장하는 저장소입니다.
데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다.
데이터를 추가할수도 있습니다.

데이터 저장

{
 var x = 100;                   
 var y = 200;             
 var z = "javascript";      
    
 console.log(x);
 console.log(y);
 console.log(z);
}

데이터 저장 + 데이터 변경

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

 x = 300;
 y = 200;
 z = "react";

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

데이터 저장 + 데이터 변경  + 데이터 추가

{
 let x = 100;
 let y = 200;
 let z = "javascript";
    
 x += 300;        //x = x + 300
 y += 400;
 z += "react";
    
 console.log(x);
 console.log(y);
 console.log(z);
}

 

 

상수

상수는 데이터 저장은 가능하나 변경이 불가능합니다.
상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정 할 수도 없습니다.

데이터 저장 (데이터 변경 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);
}

 

배열

배열(Array)은 여러 개의 값을 순서대로 나열한 자료형입니다.
배열은 대괄호([])를 사용하여 나타내며, 각 값을 쉽표(,)로 구분됩니다.
배열의 각 값은 인덱스를 통해 접근할 수 있습니다.

 

배열을 쓰는 방법은 여러가지입니다.

방법-1

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

방법-2

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

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

방법 1,2 두개 다 같은 값이 나오는데요

배열방식이 다릅니다.

밑에가 훨씬 간단하죠?

이렇게 배열을 한번에 지정해줄수있습니다.

방법 3,4 도 마찬가지입니다.

방법-3

{
 const arr = [];
 arr[0] = 100;
 arr[1] = 200;
 arr[2] = "javascript"

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

방법-4

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

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

 

 

 

객체

객체(Object)는 데이터와 그 데이터에 관련된 동작을 모두 포함하는 자료형입니다.
객체는 중괄호({})를 사용하여 나타내며, 각 데이터와 동작은 속성(property)이라고 부릅니다.
객체의 속성은 이름과 값으로 이루어져 있으며 이름과 값 사이에는 (;)을 사용하여 구분합니다.

 

객체의 표현방법도 여러가지입니다.

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

숫자 대신에 a,b,c 에 변수를 직접 선언하는 방법

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

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

new objcet를 생략하고 {}를 사용하는 방법

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

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

객체 선언 코드를 생략하고 {}안에 키와값을 직접 입력하는 방법

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

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

배열안에 객체가 있는 방법

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

 console.log(obj [0].a);
 console.log(obj [0].b);
 console.log(obj [1].c);
}

여러개의 속성에서 지정된 값만 출력하는 방법

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

키의 값만 배열해 출력하는 방법

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

 const obj = {a, b, c};

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

 

객체 안에는 함수인 실행문이 들어가고, 실행문을 실행시켜줄때 쓰는 방법

{          
 const obj = {
  a: 100,
  b: [200, 300],
  c: "javacript",
  d: function(){
   console.log("javascript가 실행되었습니다.");
  },
  e: function(){
   console.log(obj.c + "가 실행되었습니다.");
  },
  f: function(){
   console.log(this.c + "가 실행되었습니다.");    //자기 자신을 표현할때 쓴다 this개념 가장 중요
  }
 }

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