본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT/Topic

데이터 저장하기

01.

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

난이도 쉬움

소개

안녕하세요!. 웹스토리보이입니다. 자바스크립트는 웹 사이트를 동적으로 표현하는 언어로 묘사하지만, 가장 기본이 되는 특징은 데이터를 컨트롤 하는 기능이 더 중요합니다. 자바스크립트는 데이터를 저장하고, 출력하고, 실행하고, 제어하는 기능을 가지고 있습니다. 이 4가지 특징을 이용해 동적으로 표현 할 수 있습니다. 그래서 우리는 데이터를 저장하는 방법에 대해서 배워보겠습니다.

자바스크립트에서 데이터를 저장하는 방법은 크게 변수, 상수, 배열, 객체가 있습니다. 리액트를 배운다면 더 추가적인 내용이 있겠지만, 우리는 우선 4가지에 대해서 먼저 배워보겠습니다. 변수는 상수랑 비슷하기 때문에 동급으로 취한다면, 변수, 배열, 객체에 대해서 자세히 배워보겠습니다.

여러분들이 사이트를 동적으로 만들려면, 동적으로 만들 요소를 저장해야 합니다. 그래야 움직이게 컨트롤 할 수 있습니다. 그런 요소를 딱! 하나만 저장할 수 있는게 변수입니다. 변수에는 데이터를 하나만 저장할 수 있으며, 데이터를 변경 할 수도 있습니다. 또한 데이터를 하나만 저장하지만 추가도 가능합니다. 하디만 상수는 데이터를 하나만 저장하지만, 데이터를 변경할 수 없습니다. 반면에 배열은 데이터를 순서대로 여러개를 저장할 수 있습니다. 즉 하나가 아닌 여러개도 저장이 가능합니다. 객체 역시 데이터를 저장할 수 있습니다. 배열처럼 여러개를 저장 할 수 있지만, 저장한 데이터의 키 값과 속성 값을 저장할 수 있습니다. 즉 데이터를 좀 더 디테일하게 저장할 수 있습니다. 아직은 이게 무는 말인지 잘 모를 수 있지만 예제를 보면서 이해하시면 됩니다. 시작하기 전에 변수, 배열, 객체는 데이터를 저장하는 저장소라는거 알고 시작하시면 될 것 같습니다.

01. 변수 : 변수는 데이터 저장합니다.

변수에는 숫자와 문자를 저장할 수 있습니다. 문자를 표현 할 때는 "를 사용합니다. 이렇게 숫자, 문자, 함수, 객체 등 여러가지 종류를 저장할 수 있는데 이것을 자료형1이라고 얘기합니다.

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

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

    //100 200 javascript
}

02. 변수 : 변수는 데이터 저장도 하고 변경도 합니다.

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

    x = 300;
    y = 400;
    z = "jquery";

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

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

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

    x += 300;
    y += 400;
    z += "jquery";

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

04. 변수 : 변수는 어디에 쓰냐에 따라 지역변수와 전역변수로 나눌 수 있습니다.

{
    let x = 100;    //전역변수
    let y = 200;    //전역변수

    function func(){
        let x = 100;            //지역변수
        let z = "javascript";   //지역변수
        x = 200;        //지역변수 100->200
        y = 300;        //전역변수 200->300      

        document.write("함수 안");
        document.write(x);
        document.write(y);
        document.write(z);
    }
    func();

    document.write("함수 밖");
    document.write(x);
    document.write(y);
    document.write(z);
}

05. 상수 : 상수는 데이터를 저장 할 수 있지만 변경 할 수는 없습니다.

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

    //x = 300;
    //y = 400;
    //z = "jquery";

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

06. 배열은 여러개의 데이터를 저장할 수 있는 저장소입니다. 표현 방법도 여러가지가 있습니다. 그 중 첫 번째 방법입니다.

{
    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

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

07. 배열을 표현하는 두번째 방법입니다.

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

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

08. 배열을 표현하는 세번째 방법입니다.

new Array 대신에 []를 사용합니다.

{
    const arr = [];

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

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

09. 배열을 표현하는 네번재 방법입니다.

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

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

10. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

객체는 배열을 바탕으로 사용된 데이터 저장소이기 때문에 배열의 표현방식도 그대로 사용할 수 있습니다. 그래서 표현 방법은 8가지로 정의할 수 있습니다. 첫 번째 방법은 new Object를 선언하여 배열로 데이터를 저장한 방법입니다. 배열 방식이 그대로 적용됩니다.

{
    const obj = new Object();
            
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript";

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

11. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

new Object()를 선언하고 데이터를 저장하는 방식입니다.

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

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

12. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

new Object()를 선언하지 하고 {}를 사용합니다.

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

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

13. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

데이터를 바로 저장 할 수 있습니다.

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

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

14. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

변수 안에 배열과 객체를 사용하여 데이터를 저장 할 수 있습니다. 즉 배열안에 객체도 사용 가능합니다.

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

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

15. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

반대로 객체 안에 배열을 사용할 수 있고 객체 안에 객체도 사용 가능합니다.

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

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

16. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

변수에 값을 객체 안에 저장 할 수 있습니다.

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

    const obj = { a, b, c };

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

17. 객체는 키와 값으로 구성된 데이터 값을 저장합니다.

객체 안에는 배열도 저장이 가능하고, 함수도 저장이 가능합니다. 이게 발전하면 객체 생성자 함수가 되는데 이건 나중에 배우게 될 것입니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x: 400, y: 500},
        d: "javascript",
        e: function(){
            document.write("javascript가 실행되었습니다.");
        },
        f: function(){
            document.write(obj.d + "가 실행되었습니다.");
        },
        g: function(){
            document.write(this.d + "가 실행되었습니다.");
        }
    }

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c.x);
    document.write(obj.c.y);
    obj.e();
    obj.f();
    obj.g();
}

참고

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기