- [JavaScript] let, var, const / promise / 동기, 비동기2025년 01월 16일
- KIMJAVAN
- 작성자
- 2025.01.16.:12
728x90
1. let, var, const 차이
var
- 스코프: 함수 스코프 (함수 내에서만 유효).
- 재선언: 동일한 이름으로 다시 선언 가능.
- 초기화: 선언 전에 값을 참조하면 undefined (호이스팅됨).
- 특징: 블록 스코프를 무시하고 재선언이 가능하여 예기치 않은 버그가 발생할 수 있음.
var x = 10; if (true) { var x = 20; // 같은 변수를 덮어씀 } console.log(x); // 20let
- 스코프: 블록 스코프 (중괄호 {} 내에서만 유효).
- 재선언: 동일한 이름으로 다시 선언 불가능.
- 초기화: 선언 전에 참조하면 에러(ReferenceError).
- 특징: 재할당은 가능하지만 재선언은 불가.
let y = 10; if (true) { let y = 20; // 별도의 스코프에서 선언 console.log(y); // 20 } console.log(y); // 10const
- 스코프: 블록 스코프.
- 재선언: 동일한 이름으로 다시 선언 불가능.
- 초기화: 반드시 선언과 동시에 초기화 필요.
- 특징: 재할당이 불가능하지만 객체나 배열은 내부 속성 변경 가능.
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.
비동기와 동기의 차이
- 동기는 작업이 완료되기 전까지 다른 작업을 실행하지 않음.
- 비동기는 작업을 병렬로 처리하며, 시간이 오래 걸리는 작업 중에도 다른 작업을 계속 실행.
'자바스크립트 > JavaScript' 카테고리의 다른 글
[JavaScript] 제곱근 판별 (4) 2025.01.16 [JavaScipt] 임의의 숫자를 큰 것 부터 작은 순으로 재정렬하기 (0) 2025.01.16 [JavaScript] for...of / for...in 문 차이 (1) 2025.01.13 [JavaScript] 퀵 정렬 (3) 2025.01.11 [JavaScript] 합병정렬 (0) 2025.01.11 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)