자바스크립트 데이터 저장하기 완벽 정리

자바스크립트 데이터 저장은 크게 네 가지로 나눌 수 있습니다.

✍🏻 변수✍🏻 

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

데이터를 저장할 수도 있지만 변경과 추가가 가능합니다.

데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다.

 

📍 데이터 저장

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

결과 : 

100

200

javascript

 

📍 데이터 저장 + 변경

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

x = 1000;
y = 1000;
z = "react";

document.write(x);
document.write(y);
document.write(z);

결과 :

1000

1000

react

 

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

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

결과 :

500

700

javascriptreact

 

✍🏻 상수✍🏻 

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

상수는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정할 수도 없습니다.

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

const x = 300;
const y = 100;
const z = "javascript";

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

document.write(x);
document.write(y);
document.write(z);

결과 :

출력 안 됨

 

📍  배열 1

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

const arr = new Array();
arr[0] = 500;
arr[1] = 1000;
arr[2] = "react";

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);

결과 :

5001000react

 

📍  배열 2 

new Array()에 데이터를 ","로 구분하여 저장하는 방법

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

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);

결과 :

200600javascript

 

📍 배열 3 

new Array를 생략하고 인덱스에 데이터를 저장하는 방법

const arr = [];

arr [0] = 400;
arr [1] = 3300;
arr [2] = "javascript";

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);

결과 :

4003300javascript

 

📍  배열 4

new Array를 생략하고 대괄호 안에 데이터를 ","로 구분하여 저장하는 방법

const arr = [1020, 2020, "javascript"];

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);

 

결과 :

10202020javascript

 

📍  객체  1   

객체는 데이터 값을 필요한대로 만들어 사용할 수 있습니다.

객체의 데이터는 키(이름): 값으로 이루어 있으며 이것을 속성이라고 합니다.

const obj = new Object();

obj[0] = 200;
obj[1] = 500;
obj[2] = "javascript";

document.write(obj[0]);
document.write(obj[1]);
document.write(obj[2]);

 

결과 :

200500javascript

 

📍  객체 2 

숫자 대신 문자 a, b, c에 값을 직접 선언하는 방법

const obj = new Object();

obj.a = 100;
obj.b = 200;
obj.c = "자바java";

document.write(obj.a);
document.write(obj.b);
document.write(obj.c);

 

결과 :

100200java자바

 

📍  객체  3

 new Object를 생략하고 중괄호를 써서 객체를 선언하는 방법

const obj = {};

obj.a = "안녕하세요.";
obj.b = "저는";
obj.c = "이유나입니다.";

document.write(obj.a);
document.write("<br>");
document.write(obj.b);
document.write("<br>");
document.write(obj.c);

 

결과 :

안녕하세요

저는

이유나입니다

 

📍  객체  4   

객체 선언 코드를 생략하고 중괄호 안에 키와 값을 직접 입력해 저장하는 방법

const obj = {a:"열심히 한다면", b:" 반드시", c:" 멋진 결과가 !"};

document.write(obj.a);
document.write(obj.b);
document.write(obj.c);

 

 

결과 :

열심히 한다면 반드시 좋은 결과가 !

📍 객체 5 

배열 안에 객체가 있는 구조는 밑의 방법으로 불러옵니다.

const arr = [
  {a:"꾸준함은", b:" 어렵지만"},
  {c: " 결과는 아름답다 !"}
];

document.write(arr[0].a);document.write(arr[0].b);document.write(arr[1].c);

 

결과 :

꾸준함은 어렵지만 결과는 아름답다 !

 

📍 객체 6 

여러 개의 속성에서 지정된 값만 출력하려면 밑의 방법으로 불러옵니다.

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

document.write(obj.a);
document.write(obj.b[0]);
document.write(obj.b[1]);
document.write(obj.c.x);
document.write(obj.c.y);
document.write(obj.d);

 

결과 :

100300400500600javascript

 

📍 객체 7 

키의 값만 배열해 출력이 가능합니다.

let a = 200;
let b = 300;
let c = "javascript";

let obj = {a, b, c};

document.write(a);
document.write(b);
document.write(c);

결과:

200300javascript

 

📍 객체  8 

객체 안에는 함수인 실행문이 들어갈 수 있는데, 실행문을 실행시켜줄 때 쓰는 방법입니다.

const obj = {
  a : 200,
  b : [300, 400],
  c : "javascript",
  d : function(){
    document.write("javascript가 실행되었습니다.");
  },
  e : function(){
    document.write(obj.c + "가 실행되었습니다."); //변수의 키 값(혹은 변수)을 적고 + 를 쓰면 값이 출력된다.
  },
  f : function(){
    document.write(this.c + "가 실행되었습니다."); //this는 자기 자신을 표현합니다.
  }
}

document.write(obj.a);
document.write("<br>");
document.write(obj.b[0]);
document.write("<br>");
document.write(obj.b[1]);
document.write("<br>");
// console.log(obj.b[2]);          //undefined
document.write(obj.c);
document.write("<br>");
// console.log(obj.d);             //(X)
obj.d();
document.write("<br>");
obj.e();
document.write("<br>");
obj.f();

결과 :

200
300
400
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.

---

✨ 감사합니다.