[Javascript] Javascript 심화

1단계: ES6+ 기능

1.1 let과 const

let과 const는 블록 스코프를 가지는 변수 선언 키워드입니다.

• let: 재할당이 가능한 변수 선언.
• const: 재할당이 불가능한 상수 선언.

예시:

let message = 'Hello, JavaScript!';
message = 'Hello, ES6!';
console.log(message); // 'Hello, ES6!'

const pi = 3.14;
console.log(pi); // 3.14
// pi = 3.14159; // 오류 발생: 상수 재할당 불가

1.2 화살표 함수

화살표 함수는 더 간결한 함수 표현식을 제공합니다.

예시:

// 전통적인 함수 선언
function add(a, b) {
    return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

1.3 템플릿 리터럴

템플릿 리터럴을 사용하면 문자열을 보다 쉽게 작성하고, 변수 삽입이 가능합니다.

예시:

const name = 'John';
const message = `Hello, ${name}!`;
console.log(message); // 'Hello, John!'

1.4 디스트럭처링 할당

디스트럭처링 할당을 사용하면 배열이나 객체의 값을 개별 변수에 할당할 수 있습니다.

예시:

// 배열 디스트럭처링
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 객체 디스트럭처링
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 'John'
console.log(age); // 30

1.5 스프레드 연산자

스프레드 연산자는 배열이나 객체를 쉽게 복사하거나 결합할 수 있습니다.

예시:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

1.6 모듈

모듈은 코드를 모듈화하여 재사용성을 높입니다. import와 export를 사용하여 모듈을 관리합니다.

예시:

// math.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js

import { add, multiply } from './math.js';
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

2단계: 비동기 JavaScript

2.1 콜백

콜백 함수는 다른 함수의 인수로 전달되어 호출되는 함수입니다.

예시:

function loadScript(src, callback) {
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => callback(script);
    document.head.append(script);
}

loadScript('/my/script.js', function() {
    console.log('Script loaded!');
});

2.2 프로미스

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

예시:

let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve('Success!');
    } else {
        reject('Error!');
    }
});

promise.then(message => {
    console.log(message); // 'Success!'
}).catch(error => {
    console.error(error);
});

2.3 async/await

async/await는 프로미스를 더 간단하게 사용할 수 있는 문법입니다.

예시:

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
}

fetchData();

3단계: 데이터 저장소

3.1 LocalStorage

LocalStorage는 브라우저에 데이터를 영구적으로 저장합니다.

예시:

localStorage.setItem('name', 'John');
let name = localStorage.getItem('name');
console.log(name); // 'John'
localStorage.removeItem('name');

3.2 SessionStorage

SessionStorage는 브라우저 세션 동안 데이터를 저장합니다.

예시:

sessionStorage.setItem('name', 'John');
let name = sessionStorage.getItem('name');
console.log(name); // 'John'
sessionStorage.removeItem('name');

3.3 IndexedDB

IndexedDB는 브라우저에 대용량 구조화된 데이터를 저장할 수 있는 데이터베이스입니다.

예시:

let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['users'], 'readwrite');
    let objectStore = transaction.objectStore('users');
    objectStore.add({ id: 1, name: 'John Doe' });
};