자바스크립트/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의 상태

  1. Pending: 대기 중(초기 상태).
  2. Fulfilled: 성공적으로 작업 완료(then 실행).
  3. 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.

비동기와 동기의 차이

  • 동기는 작업이 완료되기 전까지 다른 작업을 실행하지 않음.
  • 비동기는 작업을 병렬로 처리하며, 시간이 오래 걸리는 작업 중에도 다른 작업을 계속 실행.