JS chapter01 데이터 저장

Posted Apr 2, 2024

By Jinwoo 19 min read

자바스크립의 데이터 저장 방식에 대해서 정리한 글입니다

자바스크립트 기본 개념 정리

변수

변수(Variable)는 프로그래밍에서 데이터를 저장하고 나중에 참조하거나 변경할 수 있는 메모리 공간을 가리킵니다. JavaScript에서 변수는 다양한 종류가 있으며, 각각의 변수는 특정한 데이터 타입을 가질 수 있습니다. 변수는 프로그램의 상태를 추적하고 필요한 데이터를 보관하는 데 중요한 역할을 합니다.

변수의 특징

데이터 저장: 변수는 값(데이터)을 저장하는데 사용됩니다.

이름(Identifier): 변수에는 이름이 지정되어 있어서 해당 데이터를 식별할 수 있습니다.

데이터 타입: JavaScript는 동적 타입 언어이므로 변수는 데이터 타입에 관계없이 값을 저장할 수 있습니다.

값 변경: 변수에는 저장된 값이 변경될 수 있습니다.

유효 범위(Scope): 변수의 유효 범위는 선언된 위치에 따라 달라집니다.

변수 선언 방법

JavaScript에서 변수를 선언하는 방법에는 var, let, const 세 가지 키워드가 있습니다.

var: ES5까지 사용되던 변수 선언 방법으로 함수 스코프를 가집니다.

  
var age = 30;
var name = "John";

let: ES6에서 도입된 블록 스코프를 가지는 변수 선언 방법입니다.

  
let score = 90;
let message = "Hello, world!";

const: 상수(값이 변하지 않는 변수)를 선언할 때 사용됩니다.

  
javascript
Copy code
const PI = 3.14;
const MAX_SIZE = 1024;

변수 사용 예시

  
let x = 10;
let y = 20;
let sum = x + y;

console.log(sum); // 30

x = 5; // 변수의 값 변경
console.log(x); // 5

주의사항

변수를 선언할 때는 변수의 이름을 명확하게 지정하여 의도를 파악할 수 있도록 해야 합니다.

변수는 선언한 후에 여러 번 사용할 수 있으며, 필요에 따라 값이 변경될 수 있습니다.

var, let, const 키워드는 변수의 스코프와 재할당 가능성을 명확히 구분하기 위해 적절히 선택하여 사용해야 합니다.

JavaScript에서 변수는 프로그램의 상태를 유지하고 데이터를 관리하는 데 필수적인 개념이므로, 변수의 사용법과 특징을 잘 이해하는 것이 중요합니다.

상수 (Constants)

상수(Constant)는 프로그램에서 변하지 않는 값을 의미합니다. JavaScript에서 상수는 한 번 할당되면 그 값을 변경할 수 없는 변수를 말합니다. 상수는 프로그램에서 변하지 않아야 하는 값을 저장하거나 식별하기 위해 사용됩니다.

상수의 특징

변경 불가능(Immutable): 한 번 값이 할당되면 변경할 수 없습니다. 선언과 동시에 초기화: 상수는 선언할 때 반드시 값을 할당해야 합니다. 재할당 불가: 상수에 다른 값을 다시 할당할 수 없습니다. 상수 선언 방법

const 키워드를 사용하여 상수 선언

  
const PI = 3.14159;
const MAX_SIZE = 100;
const COMPANY_NAME = 'ABC Inc.';

선언과 동시에 초기화

  
const daysInWeek = 7;
const hoursInDay = 24;

상수 사용 예시

  
const TAX_RATE = 0.1;
let price = 100;
let totalPrice = price + (price * TAX_RATE);

console.log(totalPrice); // 110

주의사항

재할당 불가: const로 선언된 상수는 다시 값을 할당할 수 없습니다. 불변성: 상수로 선언된 값은 프로그램이 실행되는 동안 항상 동일한 값을 가집니다.

스코프: 상수는 블록 스코프를 따르며, 블록 내에서만 유효합니다. JavaScript에서는 상수를 사용하여 변하지 않는 값들을 명시적으로 표현하고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 상수는 코드 내에서 의미 있는 값들을 추상화하여 표현하고, 실수로 값이 변경되는 것을 방지하여 안정성을 높이는 데 도움이 됩니다.

배열 (Arrays)

JavaScript에서 배열(Array)은 여러 개의 값을 순서대로 저장하는 자료 구조입니다. 배열은 동적으로 크기가 조절될 수 있고, 인덱스를 사용하여 각 요소에 접근할 수 있습니다. 배열은 대괄호 [] 안에 요소들을 콤마로 구분하여 나열하여 선언하며, 각 요소는 0부터 시작하는 인덱스로 접근할 수 있습니다.

배열의 특징

순서가 있음: 배열은 요소들이 순서대로 저장되며, 각 요소는 0부터 시작하는 인덱스를 가집니다. 다양한 데이터 타입: JavaScript 배열은 어떠한 종류의 데이터 타입도 포함할 수 있습니다. 길이가 가변적: 배열의 크기는 동적으로 조절될 수 있습니다. 배열 메서드 제공: 배열은 다양한 내장 메서드를 통해 요소를 추가, 제거, 검색, 정렬 등의 작업을 수행할 수 있습니다. 배열 선언 방법

배열 선언

  
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

배열 선언과 동시에 초기화

  
let colors = new Array('red', 'green', 'blue');

리터럴 방식으로 배열 선언

  
let daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

리터럴 방식으로 선언과 동시에 초깃값 설정

  
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

배열 요소 접근 배열 요소에 접근할 때는 인덱스를 사용합니다. 인덱스는 0부터 시작하며, 대괄호([]) 안에 인덱스를 넣어서 요소에 접근합니다.

  
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // orange

배열 메서드 활용 JavaScript 배열은 다양한 내장 메서드를 제공하여 배열 요소의 추가, 제거, 변형, 검색 등을 수행할 수 있습니다.

  
let numbers = [1, 2, 3, 4, 5];

// 배열의 길이
console.log(numbers.length); // 5

// 요소 추가
numbers.push(6); // [1, 2, 3, 4, 5, 6]

// 요소 제거 (마지막 요소)
numbers.pop(); // [1, 2, 3, 4, 5]

// 요소 검색 (인덱스)
console.log(numbers.indexOf(3)); // 2

// 요소 제거 (인덱스 위치)
numbers.splice(1, 1); // [1, 3, 4, 5]

// 배열 순회 (for...of 루프)
for (let number of numbers) {
    console.log(number);
}

JavaScript의 배열은 다양한 작업을 수행할 수 있는 강력한 자료 구조로, 다른 데이터를 모아서 관리하고 처리하는 데 유용하게 활용됩니다. 배열은 프로그래밍에서 빈번하게 사용되며, 다양한 상황에 유연하게 대응할 수 있도록 다양한 내장 메서드를 제공합니다.

객체(Object)

JavaScript의 객체는 속성(프로퍼티)들의 모음으로, 각 속성은 이름(키)과 값으로 구성됩니다. 객체는 {} 중괄호를 사용하여 정의하며, 속성은 쉼표로 구분됩니다.

객체 선언 방식

객체 선언 후 배열 방식으로 데이터 입력 객체를 선언한 후 속성을 배열 방식으로 추가할 수 있습니다.

  
let person = {};
person['name'] = 'John';
person['age'] = 30;
person['gender'] = 'male';

객체 선언 후 점 표기법(dot notation)으로 데이터 입력 점 표기법을 사용하여 객체의 속성을 추가하거나 수정할 수 있습니다.

  
let person = {};
person.name = 'Jane';
person.age = 25;
person.gender = 'female';

객체 리터럴 방식으로 객체 선언 객체 리터럴을 사용하여 객체를 선언할 수 있습니다.

  
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020
};

객체 리터럴 방식으로 선언과 동시에 초기값 설정 객체 리터럴을 사용하여 객체를 선언하고 초기값을 설정할 수 있습니다.

  
let student = {
    name: 'Alice',
    age: 22,
    major: 'Computer Science'
};

배열 안에 객체가 있는 방식 배열 안에 객체를 포함하여 복잡한 데이터 구조를 표현할 수 있습니다.

  
let people = [
    { name: 'Tom', age: 25 },
    { name: 'Kate', age: 30 },
    { name: 'Mike', age: 28 }
];

객체 안에 배열이 있는 방식 객체의 속성 값으로 배열을 사용할 수 있습니다.

  
let country = {
    name: 'South Korea',
    population: 52000000,
    cities: ['Seoul', 'Busan', 'Incheon']
};

객체 안에 객체가 있는 방식 객체의 속성 값으로 또 다른 객체를 사용할 수 있습니다.

  
let user = {
    name: 'Alice',
    address: {
        city: 'New York',
        zipCode: '10001'
    }
};

객체 안에 함수가 있는 방식 객체의 속성 값으로 함수(메서드)를 포함할 수 있습니다.

  
let calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};

객체 구조 분해 할당 (Object Destructuring) 객체 구조 분해를 사용하여 객체의 각 속성을 개별 변수로 추출할 수 있습니다.

  
let person = {
    name: 'John',
    age: 30,
    gender: 'male'
};

let { name, age, gender } = person;
console.log(name);    // John
console.log(age);     // 30
console.log(gender);  // male

객체 펼침 연산자 (Spread Operator) 객체 펼침 연산자(…)를 사용하여 다른 객체의 속성을 현재 객체에 병합할 수 있습니다.

  
let defaults = {
    theme: 'light',
    fontSize: 14
};

let customSettings = {
    fontSize: 16,
    backgroundColor: 'blue'
};

let combinedSettings = { ...defaults, ...customSettings };
console.log(combinedSettings);
// { theme: 'light', fontSize: 16, backgroundColor: 'blue' }

JavaScript의 객체는 다양한 형태로 사용되며, 데이터를 구조화하고 관리하는 데 유용합니다. 객체는 프로그래밍에서 중요한 개념으로, 다른 데이터 구조와 함께 사용하여 복잡한 데이터를 표현하고 처리할 수 있습니다.

파일(File)

파일(File)은 컴퓨터 시스템에서 데이터를 저장하고 읽고 쓰는 데 사용되는 단위입니다. 프로그래밍 컨텍스트에서 파일은 보통 파일 시스템에 저장된 데이터의 단위를 가리킵니다. JavaScript에서 파일을 다루는 기능은 주로 웹 브라우저나 Node.js와 같은 런타임 환경에 따라 다르게 제공됩니다.

파일 다루기

JavaScript에서 파일을 다루기 위해서는 주로 다음과 같은 방법을 사용합니다.

웹 브라우저 환경에서 파일 다루기

File API: 웹 브라우저 환경에서 파일을 읽고 쓰는 기능을 제공합니다. 주로 <input type="file"> 요소를 통해 파일을 선택하고, JavaScript로 해당 파일에 접근하여 처리합니다.

예시:

  
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    console.log(file.name);
    // 파일을 읽거나 처리하는 코드 작성
});

Node.js 환경에서 파일 다루기

fs 모듈: Node.js 환경에서 파일 시스템에 접근하여 파일을 읽고 쓸 수 있도록 하는 내장 모듈입니다. 예시:

  
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data);
});

파일 교환(JSON)

JSON(JavaScript Object Notation)은 데이터를 텍스트 형식으로 표현하기 위한 경량의 데이터 교환 형식입니다. JavaScript의 객체와 배열을 문자열로 표현하여 파일로 저장하거나 네트워크를 통해 전송할 수 있습니다.

파일로 저장: JSON.stringify() 함수를 사용하여 JavaScript 객체를 JSON 문자열로 변환하고, 이를 파일로 저장합니다.

  
const fs = require('fs');
const data = { name: 'John', age: 30 };
fs.writeFileSync('data.json', JSON.stringify(data));

파일에서 읽기: fs.readFile() 함수로 JSON 파일을 읽은 후 JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.

  
fs.readFile('data.json', 'utf8', (err, jsonString) => {
    if (err) {
        console.error(err);
        return;
    }
    const data = JSON.parse(jsonString);
    console.log(data.name); // "John"
});

주의사항

파일 다루기는 사용 중인 환경에 따라 다르게 처리되므로, 웹 브라우저 환경과 Node.js 환경에서 각각의 방식을 숙지해야 합니다.

파일을 다룰 때에는 권한 관리와 보안에 주의하여 안전하게 처리해야 합니다. JSON 형식은 간단하면서도 매우 효율적인 데이터 교환 형식이지만, 특정한 데이터 타입을 정확하게 표현하고자 할 때는 추가적인 처리가 필요할 수 있습니다.

JavaScript에서 파일 다루기는 프로그램에서 데이터를 영구적으로 저장하고 관리하는 데 필요한 기능 중 하나이며, 각 환경에서 제공하는 API를 활용하여 효율적으로 파일을 다루는 방법을 익히는 것이 중요합니다.

위 내용은 JavaScript에서 가장 기본적인 개념들을 간략히 설명한 것입니다. JavaScript를 공부하거나 프로그래밍을 시작하는 데 도움이 되기를 바랍니다.

coding

This post is licensed under CC BY 4.0 by the author.

자바스크립트 기본 개념 정리

변수

변수의 특징

변수 선언 방법

주의사항

상수 (Constants)

상수의 특징

주의사항

배열 (Arrays)

배열의 특징

객체(Object)

객체 선언 방식

파일(File)

파일 다루기

파일 교환(JSON)

주의사항

Trending Tags