자바스크립트 데이터를 저장해 보자 !

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

Tip.여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있습니다.

var num, str, temp;

var num = 10, str = 'javascript', temp = true

 

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

Tip.변수는 새로운 데이터가 저장되면 기존 데이터는 사라집니다.

var num = 0;

num = 10;

document.write(num); // 10

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

변수는 데이터를 저장하고, 변경하고, 추가할 수 있습니다.

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

400
600
javascript

Tip.변수명 관련 주의사항

변수명은 띄어쓰기할 수 없습니다.

변수명의 첫 글자에는 숫자나 특수문자가 올 수 없으나 예외적으로 특수문자 중 '_'나 '$'는 사용할 수 있습니다.

예약어(reserved word)는 자바스크립트에서 특별한 용도를 가진 키워드를 의미하며, 변수명으로 사용할 수 없습니다.

변수, 함수, 객체 등을 선언할 때는 변수명, 함수면, 객체명과 같이 이름이 필요합니다. 이러한 이름에 일정한 규칙을 부여하면 코드에 대한 가독성을 높일 수 있습니다. 이를 명명 규칙 이라고 합니다.

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

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

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

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

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

100
200
javascript

 

05. 배열 : 데이터 저장(여러개) 표현방법 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]);
}

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
javascript

 

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

대괄호 안에 데이터를 보다 간단하게 저장했다.

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

객체의 속성 값을 저장하는 또 다른 방법이다.

{
    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

 

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

중괄호를 이용하여 객체의 속성 값을 더 쉽게 저장했다.

{
    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

 

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. 연산자

{
    const a = 20000;
    const b = 40000;

    console.log(a + b);
    console.log(a - b);
    console.log(a > b);
    console.log(a * b);
    console.log(a / b);
    console.log(a % b);
}

60000
-20000
false
800000000
0.5
20000

Tip.변수로 연산이 가능하다.

변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자가 있다.

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

배열 안에 객체가 있는 방식

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

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

100
200
javascript

 

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

객체 안에 배열이 있는 방식

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

    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

 

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

키 값에 변수를 저장함

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

    const obj = {a, b, c};

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

100
200
javascript

 

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

객체 안에는 실행문이 들어갈 수 있다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: "javscript",
        d: function(){
            console.log("jasvcript가 실행되었습니다.");
        }
    }
    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]);  // undifined
    console.log(obj.c);
    console.log(obj.d);     // 이렇게 사용 하면 전체를 문자열로 인식
    obj.d();
}

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

 

18. 예제

함수에서 변수를 실행하는 방법입니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: "javscript",
        d: function(){
            console.log("javscript가 실행되었습니다.");
        },
        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.c);
    obj.d();
    obj.e();
    obj.f();
}

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