프론트엔드/Javascript

Javasciprt - 데이터 저장하기

0-SIK 2024. 3. 28. 16:43
728x90

01. 변수 : 데이터 저장소

자바스크립트 변수는 데이터를 저장하고 관리하기 위한 식별자(identifier)입니다. 변수는 값을 저장하고 참조할 수 있는 메모리 공간을 나타내며, 프로그램 내에서 데이터를 재사용하거나 조작할 때 사용됩니다. 변수는 프로그래밍 언어에서 중요한 개념 중 하나입니다.

{
    var x = 100;	// 변수 x에 숫자 100을 저장
    let y = 200;	// 변수 y에 숫자 200을 저장
    const z = "javascript";	// 변수 z에 문자 javascript를 저장

    var x = 300;	// 과거에 사용되던 변수 선언, 재할당이 가능함
    // let y = 400;	// 오류: Uncaught SyntaxError: Identifier 'y' has already been declared
    // const z = "jquery";	// 오류: Uncaught SyntaxError: Identifier 'z' has already been declared

    console.log(x); // 300
    console.log(y); // 200
    console.log(z); // 400
}

 

변수 선언(Declaration): 변수를 생성하고 식별자를 할당합니다. 변수를 선언할 때 var, let, const와 같은 키워드를 사용합니다.
var: 과거에 사용되던 변수 선언 방식입니다. 함수 스코프를 가지며 호이스팅 현상이 발생합니다.
let: 블록 스코프를 가지며, 값을 재할당할 수 있는 변수를 선언할 때 사용됩니다.
const: 블록 스코프를 가지며, 한 번 할당된 값은 변경할 수 없는 상수를 선언할 때 사용됩니다.

 

02. 변수 : 데이터 저장 + 데이터 변경

 

자바스크립트에서 데이터 변경은 변수의 값이나 객체의 속성 등을 수정하는 작업을 의미합니다. 이를 통해 프로그램의 상태나 동작을 조작하거나 업데이트할 수 있습니다. 데이터 변경은 변수의 재할당, 객체의 속성 수정, 배열의 요소 변경 등으로 이루어집니다.

{
    let x = 100;	// 변수 x에 숫자 100을 저장
    let y = 200;	// 변수 y에 숫자 200을 저장
    let z = "javascript";	//변수 z에 문자 javascript를 저장

    x = 300;	// 변수 x에 값을 숫자 300으로 변경
    y = 400;	// 변수 y에 값을 숫자 400으로 변경
    z = "jquery";	// 변수 z에 값을 문자 jquery로 변경

    console.log(x);	// 300
    console.log(y);	// 400
    console.log(z);	// "jquery"
}

 

변수의 값 변경: 변수는 let이나 var를 사용하여 선언하고, = 연산자를 사용하여 값을 변경할 수 있습니다.

 

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

 

자바스크립트에서 데이터 추가는 객체의 속성, 배열의 요소 등에 새로운 데이터를 추가하는 작업을 의미합니다. 데이터 추가를 통해 프로그램의 상태를 확장하거나 업데이트할 수 있습니다.

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

    x += 100;       // x = x + 100;
    y += 100;       // y = y + 100;
    z += "jquery";  // z = z + "jaquery";

    console.log(x);	// 200
    console.log(y);	// 300
    console.log(z);	// "javascriptjquery"
}

 

+=는 자바스크립트에서 사용되는 복합 할당(Compound Assignment) 연산자 중 하나입니다. 이 연산자는 변수에 현재 값을 더한 후 그 결과를 변수에 다시 할당하는 역할을 합니다.

 

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

 

자바스크립트에서 상수는 값을 한 번 할당하면 그 값을 변경할 수 없는 변수를 의미합니다. 상수는 프로그램 내에서 변하지 않아야 하는 값이나 설정을 나타내는 데 사용됩니다. 자바스크립트에서 상수를 정의하기 위해 const 키워드를 사용합니다.

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

    x = 200;

    console.log(x);	// TypeError: Assignment to constant variable.
    console.log(y);	// 200
    console.log(z);	// "javascript"
}

 

const 키워드를 사용하여 선언된 변수는 한 번 할당된 값은 변경할 수 없습니다. 이것은 상수의 핵심 특성입니다. 하지만 객체나 배열 같은 데이터 구조가 const로 선언되더라도, 그 안의 내용은 변경할 수 있습니다. 이는 변수가 객체나 배열 자체를 가리키는 포인터이기 때문입니다.

 

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

 

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

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

    console.log(arr);	// 100, 200, "javascript"
    console.log(arr[0]);	// 100
    console.log(arr[1]);	// 200
    console.log(arr[2]);	// "javascript"
    console.log(arr[3]);	// undefined
}

 

const arr = new Array();는 빈 배열을 생성하는 코드입니다. 이 코드는 Array 생성자 함수를 사용하여 빈 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.

 

06. 배열 : 데이터 저장(여러개) : 표현방식2 : 배열 선언과 동시에 초기값 설정

 

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

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

    console.log(arr);	// 100, 200, "javascript"
    console.log(arr[0]);	// 100
    console.log(arr[1]);	// 200
    console.log(arr[2]);	// "javascript"
    console.log(arr[3]);	// undefined
}

 

const arr = new Array(100, 200, "javascript"); 코드는 값을 가지는 배열을 생성하는 예시입니다. 이 코드는 Array 생성자 함수를 사용하여 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.

 

07. 배열 : 데이터 저장(여러개) : 표현방법3 : [](리터럴) 방식으로 배열 선언

 

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

{
    const arr = [];

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

    console.log(arr);	// 100, 200, "javascript"
    console.log(arr[0]);	// 100
    console.log(arr[1]);	// 200
    console.log(arr[2]);	// "javascript"
    console.log(arr[3]);	// undefined
}

 

const arr = [];는 빈 배열을 생성하는 코드입니다. 이 코드는 배열 리터럴을 사용하여 빈 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.

 

08. 배열 : 데이터 저장(여러개) : 표현방법4 : [](리터럴) 방식으로 배열 선언과 동시에 초기값 설정

 

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

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

    console.log(arr);	// 100, 200, "javascript"
    console.log(arr[0]);	// 100
    console.log(arr[1]);	// 200
    console.log(arr[2]);	// "javascript"
    console.log(arr[3]);	// undefined

    const arr2 = [[100,200], [300,400], ["javascript","jquery"]];

    console.log(arr2[0]);	// 100, 200
    console.log(arr2[0][0]);	// 100
    console.log(arr2[0][1]);	// 200
    console.log(arr2[1]);	// 300, 400
    console.log(arr2[1][0]);	// 300
    console.log(arr2[1][1]);	// 400
    console.log(arr2[2]);	// "javascript", "jquery"
    console.log(arr2[2][0]);	// "javascript"
    console.log(arr2[2][1]);	// "jquery"
}

 

const arr = [100, 200, "javascript"]; 코드는 값을 가지는 배열을 생성하는 예시입니다. 이 코드는 배열 리터럴을 사용하여 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다. 배열 사용시 대부분 '표현방법4'를 사용한다.

 

09. 배열 : 데이터 저장(여러개) : 표현방법5 : 2차 배열

 

자바스크립트에서 2차 배열은 배열의 요소로 또 다른 배열을 포함하는 배열을 말합니다. 2차 배열은 행과 열의 형태로 데이터를 구조화하거나 표현할 때 사용됩니다. 각 행은 배열의 요소로서 다시 하위 배열을 가지고 있습니다.

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

    console.log(arr[0]);	// 100
    console.log(arr[1][0]);	// 200
    console.log(arr[1][1]);	// 300
    console.log(arr[2][0]);	// "javascript"
    console.log(arr[2][1]);	// "jquery"
}

 

2차 배열은 중첩된 구조이므로 데이터의 행과 열을 쉽게 접근하고 조작할 수 있습니다.

 

10. 배열 : 데이터 저장(여러개) : 표현방식5 : 배열 구조 분해 할당

 

자바스크립트에서 배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 값을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 배열의 각 요소를 쉽게 변수에 분배하거나 교환할 수 있습니다. 배열 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

{
    const arr = [100, 200, "javascript"];
    const [a, b, c] = arr;
    console.log(a);	// 100
}

 

배열 구조 분해 할당은 배열의 요소를 여러 변수에 빠르게 할당하거나 추출하는 강력한 기능입니다. 코드를 보다 간결하게 작성하고 유지보수하기 쉬운 방향으로 발전시키는 데 도움이 됩니다.

 

11. 배열 : 데이터 저장(여러개) : 표현방법6 : 배열 펼침연산자

 

자바스크립트 배열 펼침 연산자(Spread Operator)는 배열이나 문자열 같은 이터러블(iterable) 객체를 펼쳐서 그 내용을 개별적인 요소로 분해하는 기능을 제공합니다. 이를 통해 배열을 복사하거나 다른 배열에 병합하거나 함수의 매개변수로 전달하는 등 다양한 상황에서 유용하게 활용할 수 있습니다. 펼침 연산자는 ES6(ECMAScript 2015)에서 도입되었습니다.

{
    const arr1 = [100, 200, "javascript"];
    const arr2 = [300, 400, "jquery"];
    const arr3 = [...arr1, 500]

    console.log(arr1);	// 100, 200, "javascript"
    console.log(...arr1);	// 100 200 "javascript"
    console.log(...arr1, ...arr2);	// 100 200 "javascript" 300 400 "jquery"
    console.log(...arr3);	// 100 200 "javascript" 500
}

 

배열 펼침 연산자는 코드를 간결하게 만들어주고, 배열 조작과 관련된 다양한 작업을 더 쉽게 처리할 수 있도록 도와줍니다.

 

12. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = new Object();

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

    console.log(obj);	// 0: 100, 1: 200, 2: "javascript"
    console.log(obj[0]);	// 100
    console.log(obj[1]);	// 200
    console.log(obj[2]);	// "javascript"
    console.log(obj[3]);	// undefined
}

 

객체 선언 후 데이터를 할당합니다.
데이터를 입력할 때 배열 방식도 적용됩니다.

 

13. 객체 : 데이터 저장(키와값 || 속성과메서드) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = new Object();

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    console.log(obj);  // a: 100, b: 200, c: "javascript"
    console.log(obj.a);  // 100
    console.log(obj.b);  // 200
    console.log(obj.c);  // "javascript"
}

 

객체 선언 후 데이터를 할당합니다.
데이터를 입력할때 키(속성)와 값(메서드)으로 입력합니다.

 

14. 객체 : 데이터 저장(키와값 || 속성과메서드) : 표현방법3 : {}(리터럴) 방식으로 객체 선언

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = {};

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";
    // obj[d] = "jquery"; // Uncaught ReferenceError: d is not defined

    console.log(obj);	// a: 100, b: 200, c: "javascript"
    console.log(obj.a);	// 100
    console.log(obj.b);	// 200
    console.log(obj.c);	// javascript
}

 

객체 선언 후 데이터를 할당합니다.

 

15. 객체 : 데이터 저장(키와값) : 표현방법4 : {}(리터럴) 방식으로 객체 선언과 동시에 초기값 설정

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

    console.log(obj);	// a: 100, b: 200, c: "javascript"
    console.log(obj.a);	// 100
    console.log(obj.b);	// 200
    console.log(obj.c);	// "javascript"
}

 

객체 약식으로 선언하고 동시에 데이터를 할당합니다.
가장 많이 사용하는 방식입니다.

 

16. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법5 : 배열안에 객체가 있는 방식

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

    console.log(obj[0]);	// a: 100, b: 200, c: "javascript"
    console.log(obj[0].a);	// 100
    console.log(obj[0].b);	// 200
    console.log(obj[0].c);	// "javascript"

    const obj1 = [
        {a: 100, b: 200, c: "javascript"},
        {a: 300, b: 400, c: "jquery"}
    ];
    
    console.log(obj1[0]);	//  a: 100, b: 200, c: "javascript"
    console.log(obj1[0].a);	// 100
    console.log(obj1[0].b);	// 200
    console.log(obj1[0].c);	// "javascript"
    
    console.log(obj1[1]);	// a: 300, b: 400, c: "jquery"
    console.log(obj1[1].a);	// 300
    console.log(obj1[1].b);	// 400
    console.log(obj1[1].c);	// "jquery"
}

 

배열 안에 객체를 선언했을 경우

 

17. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법6 : 객체안에 배열이 있는 방식

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

    console.log(obj.a[0]);	// 100
    console.log(obj.a[1]);	// 200
    console.log(obj.b[0]);	// 300
    console.log(obj.b[1]);	// 400
    console.log(obj.c);	// "javascript"
    console.log(obj.d);	// "jquery"
}

 

객체 안에 배열를 선언했을 경우

 

18. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법7 : 객체안에 객체가 있는 방식

 

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

    console.log(obj.a);	// 100
    console.log(obj.b[0]);	// 200
    console.log(obj.b[1]);	// 300
    console.log(obj.c.x);	// 400
    console.log(obj.c.y);	// 500
    console.log(obj.d);	// "javascript"
}

 

객체 안에 객체를 선언했을 경우

 

19. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법8 : 객체 + 함수

 

자바스크립트에서는 객체 안에 함수를 저장할 수 있습니다. 이러한 함수를 객체의 속성(property)으로 저장하여 해당 객체의 메서드(method)로 활용할 수 있습니다. 객체 안에 저장된 함수는 해당 객체의 상태나 데이터에 접근하고 조작할 수 있으며, 객체의 행동을 정의하는 데 사용됩니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {a: 400, b: 500, c: 600},
        d: "javascript",
        e: function(){
            console.log("jquery");
        },
        f: function(){
            console.log(obj.a);
        },
        g: function(){
            console.log(this.a);
        }
    }

    console.log(obj.a);	// 100
    console.log(obj.b[0], obj.b[1]);	// 200 300
    console.log(obj.c.a, obj.c.b, obj.c.c);	// 400 500 600
    console.log(obj.d);	// "javascript"
    obj.e();	// "jquery"
    obj.f();	// 100
    obj.g();	// 100
}

 

함수를 객체 속성으로 저장함으로써 해당 객체에 관련된 기능을 논리적으로 그룹화하고 재사용할 수 있습니다. 객체의 함수를 메서드로 사용하면 객체의 상태에 대한 변경을 더 효율적으로 관리하고 조작할 수 있습니다.

 

20. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법9 : 객체 구조 분해 할당

 

자바스크립트에서 객체 구조 분해 할당(Object Destructuring Assignment)은 객체의 속성을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 객체의 각 속성을 쉽게 변수에 할당하거나 기본값을 설정할 수 있습니다. 객체 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

{
    const obj = {
        a: 100,
        b: {x: 200, y: 300},
        c: "javscript",
    }
    
    const {a, b: {x, y}, c} = obj

    console.log(a);	// 100
    console.log(x);	// 200
    console.log(y);	// 300
    console.log(c);	// "javascirpt"
}

 

객체 구조 분해 할당은 객체의 속성을 빠르게 변수에 할당하거나 추출하는 유용한 기능입니다. 이를 통해 코드를 간결하게 작성하고 필요한 데이터를 쉽게 활용할 수 있습니다.

 

21. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법10 : 객체 펼침연산자

 

자바스크립트에서 객체 펼침 연산자(Object Spread Operator)는 객체의 속성을 펼쳐서 새로운 객체를 생성하거나 기존 객체에 다른 객체의 속성을 병합하는 기능을 제공합니다. 객체 펼침 연산자는 ES6(ECMAScript 2015)부터 도입되었습니다.

{
    const obj1 = {a: 100, b: 200, c: "javascript"};
    const obj2 = {...obj1, d: "jquert"};
    const obj3 = {...obj1, ...obj2};

    console.log(obj1);	// a: 100, b: 200, c: "javascript"
    console.log(obj2);	// a: 100, b: 200, c: "javascript", d: "jquert"
    console.log(obj2.a);	// 100
    console.log(obj2.b);	// 200
    console.log(obj2.c);	// "javascirpt"
    console.log(obj2.d);	// "jquery"
    console.log(obj3);	// a: 100, b: 200, c: "javascript", d: "jquert"
}

 

객체 펼침 연산자는 객체를 복사하거나 속성을 조작할 때 편리하게 사용할 수 있는 기능입니다. 다만, 객체 내부의 중첩된 객체까지는 얕은 복사만 수행되므로, 깊은 복사(deep copy)를 하려면 별도의 방법을 사용해야 합니다.

 

22. 파일 : 데이터 교환 : JSON

 

JavaScript에서 JSON (JavaScript Object Notation) 데이터를 다루는 예제입니다.

// Json 데이터를 객체로 변환
const jsonString = '{"name": "0-sik", "age": "100"}'
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);	// "0-sik"

// 객체를 Json 데이터로 변환
const person = {name: "0-sik", age: 100}
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);	// {"name": "0-sik", "age": "100"}

 

첫번째 부분
· jsonString은 문자열 형태로 JSON 데이터를 나타냅니다. 이 데이터는 name이 "0-sik"이고 age가 "100"인 객체를 나타냅니다.
· JSON.parse()는 JSON 문자열을 JavaScript 객체로 변환하는 함수입니다. 따라서 jsonString을 파싱하여 jsonObject에 저장합니다.
· jsonObject.name은 jsonObject 객체의 name 속성에 접근하며 "0-sik"를 출력합니다.

두번째 부분
· person은 JavaScript 객체로, name이 "0-sik"이고 age가 100인 객체입니다.
· JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환하는 함수입니다. 따라서 person 객체를 JSON 문자열로 변환하여 jsonPerson에 저장합니다.
· console.log(jsonPerson)은 JSON 문자열을 콘솔에 출력합니다. 결과적으로 jsonPerson은 {"name": "0-sik", "age": "100"}입니다. 주의할 점은, age가 숫자로 저장되어 있음에도 불구하고 JSON 문자열로 변환될 때는 문자열 형태로 변환됩니다.
728x90
저작자표시 비영리 변경금지