자바스크립트/JavaScript
[JavaScript] let, var, const / promise / 동기, 비동기
KIMJAVAN
2025. 1. 16. 15:12
728x90
1. let, var, const 차이
var
- 스코프: 함수 스코프 (함수 내에서만 유효).
- 재선언: 동일한 이름으로 다시 선언 가능.
- 초기화: 선언 전에 값을 참조하면 undefined (호이스팅됨).
- 특징: 블록 스코프를 무시하고 재선언이 가능하여 예기치 않은 버그가 발생할 수 있음.
var x = 10;
if (true) {
var x = 20; // 같은 변수를 덮어씀
}
console.log(x); // 20
let
- 스코프: 블록 스코프 (중괄호 {} 내에서만 유효).
- 재선언: 동일한 이름으로 다시 선언 불가능.
- 초기화: 선언 전에 참조하면 에러(ReferenceError).
- 특징: 재할당은 가능하지만 재선언은 불가.
let y = 10;
if (true) {
let y = 20; // 별도의 스코프에서 선언
console.log(y); // 20
}
console.log(y); // 10
const
- 스코프: 블록 스코프.
- 재선언: 동일한 이름으로 다시 선언 불가능.
- 초기화: 반드시 선언과 동시에 초기화 필요.
- 특징: 재할당이 불가능하지만 객체나 배열은 내부 속성 변경 가능.
const z = 10;
z = 20; // TypeError: Assignment to constant variable.
const obj = { a: 1 };
obj.a = 2; // 가능 (참조된 객체는 변경 가능)
console.log(obj.a); // 2
2. Promise 개념
Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, 콜백 기반의 비동기 처리를 구조화하고 오류 처리를 더 쉽게 하기 위해 도입됨.
Promise의 상태
- Pending: 대기 중(초기 상태).
- Fulfilled: 성공적으로 작업 완료(then 실행).
- Rejected: 작업 실패(catch 실행).
기본 사용법
const promise = new Promise((resolve, reject) => {
const success = true; // 예시 조건
if (success) {
resolve('Success!');
} else {
reject('Error!');
}
});
promise
.then(result => console.log(result)) // 성공: 'Success!'
.catch(error => console.log(error)) // 실패: 'Error!'
.finally(() => console.log('Done')); // 항상 실행
장점
- 비동기 작업을 더 명확하게 처리.
- 체이닝(then, catch)으로 비동기 작업을 순차적으로 처리 가능.
3. 동기(Synchronous) vs 비동기(Asynchronous)
동기(Synchronous)
- 작업이 순서대로 실행됨.
- 이전 작업이 완료되어야 다음 작업을 진행.
- 단점: 작업이 오래 걸리면 프로그램이 멈추는 것처럼 보일 수 있음.
console.log('Start');
console.log('Middle'); // 이전 작업 완료 후 실행
console.log('End');
비동기(Asynchronous)
- 작업이 병렬적으로 실행됨.
- 특정 작업이 완료되기를 기다리지 않고 다음 작업을 진행.
- 장점: CPU 유휴 시간을 줄이고 효율적인 작업 가능.
console.log('Start');
setTimeout(() => console.log('Middle'), 1000); // 비동기 처리
console.log('End');
// 출력: Start -> End -> Middle
비동기 처리의 예
- I/O 작업 (파일 읽기/쓰기, 네트워크 요청).
- setTimeout, setInterval.
- Promise, async/await.
비동기와 동기의 차이
- 동기는 작업이 완료되기 전까지 다른 작업을 실행하지 않음.
- 비동기는 작업을 병렬로 처리하며, 시간이 오래 걸리는 작업 중에도 다른 작업을 계속 실행.