자바 스크립트 개인 학습

1. 기본 개념

변수와 상수: 자바스크립트에서는 let, const, var를 사용하여 변수를 선언할 수 있다.

• let: 값을 변경할 수 있는 변수.
• const: 한번 할당하면 값을 변경할 수 없는 상수.
• var: 예전 방식으로 변수를 선언할 때 사용되지만, let과 const에 비해 호이스팅(hoisting) 특성이 달라 지금은 잘 사용되지 않는다.

자료형:

• 기본 자료형: 숫자(Number), 문자열(String), 불리언(Boolean), undefined, null 등.
• 복합 자료형: 객체(Object), 배열(Array), 함수(Function) 등.

연산자: 자바스크립트에서는 산술 연산자(+, -, *, /), 비교 연산자(==, !=, >, < 등), 논리 연산자(&&, ||, !) 등을 사용.

 

 

 

배열:

#선언
let arr1 = [];
let arr2 = new Array();

#초기화
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"

 

객체:

let person = {
    name: "Alice",
    age: 25
};
console.log(person.name); // "Alice"

 

비동기 프로그래밍: 동시에 처리 하게끔 할 수 있음. 네트워크 응답처럼 한 개의 작업 시간이 오래 걸리는 경우 다른 작업을 동시에 처리.

 

콜백 함수: 다른 함수에 인자로 전달되는 함수, 비동기 작업 시 주로 사용

function fetchData(callback) {
    setTimeout(() => {
        callback("데이터 로딩 완료");
    }, 2000);
}

fetchData((message) => {
    console.log(message); // "데이터 로딩 완료"
});

# callback함수는 2초 대기 후 호출된다.

 

프로미스: 비동기 작업의 성공, 실패 유무를 확인하고 처리하기 위한 객체.

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("작업 성공");
    } else {
        reject("작업 실패");
    }
});

myPromise.then((message) => {
    console.log(message); // "작업 성공"
}).catch((message) => {
    console.log(message); // "작업 실패"
});

 

async / await: async는 함수가 비동기적으로 실행된다는 것을 표시하고, await는 promise가 해결될 때까지 대기한다.

async function fetchData() {
    let result = await myPromise;
    console.log(result); // "작업 성공"
}

 

ES6+ 이후 기능

화살표 함수: 함수를 간단히 요약

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

 

템플릿 리터럴: 더 쉬운 문자열 처리 방법 ${} 안의 변수나 표현식을 삽입 할 수 있음

let name = "John";
console.log(`Hello, ${name}`); // "Hello, John"

 

디스트럭처링: 배열이나 객체에서 특정 값만 추출하는 방법

let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age); // "Alice", 25

 

DOM: HTML 요소를 JavaScript로 제어할 수 있게 해주는 객체

let title = document.getElementById("title");
title.innerHTML = "새 제목";

 

이벤트 처리: 사용자의 입력(클릭, 키 입력 등)을 처리할 수 있는 방법

let button = document.getElementById("button");
button.addEventListener("click", () => {
    console.log("버튼 클릭됨");
});

 

2. 고급 개념

클로저: 함수가 외부 함수의 변수에 접근할 수 있는 특성

function outer() {
    let counter = 0;
    return function inner() {
        counter++;
        console.log(counter);
    };
}
let count = outer();
count(); // 1
count(); // 2

 

호이스팅: 자바스크립트에서 변수와 함수 선언은 코드 실행 전에 자동으로 끌어올려지는 현상

console.log(x); // undefined
var x = 5;

 

배열 메서드: map, filter, reduce 등 배열을 변형하거나 축소하는 메서드

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

 

비동기 흐름 제어: setTimeout, setInterval

setTimeout(() => {
    console.log("1초 후 실행");
}, 1000);

 

fetch API: 네트워크 요청을 보내고 응답을 받는데 사용

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));