데이터 저장하기를 정리해보자

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

결과: 400 600 javascriptreact

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

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

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

 

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);
 
결과: Assignment to constant variable. Assignment to constant variable. Assignment to constant variable.

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

배열을 통해서 데이터를 표현하는 첫 번 째 방법입니다.

arr[ ]의 값을 정해줘서 배열을 연산합니다.

 

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] = "javascript";

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
 
결과: 100 200 javascript

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

배열을 통해서 데이터를 표현하는 네 번 째 방법입니다.

[ ]의 값을 정해줘서 배열을 연산합니다.

위의 배열을 이용한 데이터 저장 방법 중에서 가장 효율적인 연산 방법입니다.

 

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

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

결과: 100 200 javascript

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

객체를 이용한 데이터 저장을 표현하는 첫 번 째 방법입니다.

[숫자]의 형식에서 간소화하여, .알파벳의 값을 정해주는 방식입니다.

 

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

결과: 100 200 javascript

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

객체를 이용한 데이터 저장을 표현하는 두 번 째 방법입니다.

명령어에서 new Object( )를 중괄호로 대체하여 보다 간소하게 표현하는 방식입니다.

 const obj = { };
 obj.a = 100;
 obj.b = 200;
 obj.c = "javascript";
           
 console.log(obj.a);
 console.log(obj.b);
 console.log(obj.c);

결과: 100 200 javascript

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

객체를 이용한 데이터 저장을 표현하는 세 번 째 방법입니다.

값을 따로 정해주지 않고, 명령어에서 중괄호 안에 알파벳:을 차례대로 입력해주는 보다 간소한 방식입니다.

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

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
 
결과: 100 200 javascript

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

 가장 간편해서 많이 쓰는 방법입니다.

 

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

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
 
결과: 100 200 javascript

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 javascript

 

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

const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javascript"
}
       
console.log(obj.a);  // 객체 a
console.log(obj.b[0]);  // 객체 b의 배열 0
console.log(obj.b[1]);  // 객체 b의 배열 1
console.log(obj.c.x);  // 객체 c의 x 값
console.log(obj.c.y);  // 객체 c의 y 값
console.log(d);

결과: 100 200 300 400 500 javascript

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

결과: 100 200 javascript

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

종합적인 표현방법들 입니다.

const obj = {

a: 100,
b: [200, 300],
c: "javascript",
d: function( ){
        console.log("javascript가 실행되었습니다.");
    }
e: function( ){
        console.log("obj.c + 가 실행되었습니다.");
        }
    }
f: function( ){
        console.log(this.c + "가 실행되었습니다.");
        }
   }

console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]);     // obj[2]는 없기 때문에 undefined 라고 나온다.
console.log(obj.c);
console.log(obj.d);
obj.d( );                         // 실행문 쓰는 방법
obj.e( );
obj.f( );

결과: 100 200 300 undefined javascript javascript가 실행되었습니다. javascript가 실행되었습니다. javascript가 실행되었습니다.

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

간편하게 표현할 수 있는 방법입니다.

 

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

const obj = {a, b, c};

console.log(a);
console.log(b);
console.log(c);
 
결과: 100 200 javascript

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

간편하게 표현할 수 있는 방법입니다.

 

const j = "javascript";

const obj = {
       a: 100,
       b: [200, 300],
       c: "javascript",
       d: function(){
             console.log("javascript가 실행되었습니다.");
       },
      e: function(){
            console.log(obj.c + "가 실행되었습니다.");
      },
      e: function(){
            console.log(j + "가 실행되었습니다.");
      },
      f: function(){
            console.log(this.c + "가 실행되었습니다.");
      }
}

console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]);     // obj[2]는 없기 때문에 undefined 라고 나온다.
console.log(obj.c);
obj.d();                          // 실행문 쓰는 방법
obj.e();
obj.f();

결과: 100 200 300 undefined javascript javascript가 실행되었습니다. javascript가 실행되었습니다. javascript가 실행되었습니다.