• 티스토리 홈
  • 프로필사진
    KIMJAVAN
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
KIMJAVAN
  • 프로필사진
    KIMJAVAN
    • 개발 (178)
      • 마크업 언어 (20)
        • HTML (8)
        • CSS (12)
      • 자바스크립트 (95)
        • JavaScript (35)
        • JS Library (7)
        • React (18)
        • threeJS (6)
        • TypeScript (3)
        • Next js (7)
        • Node JS (18)
        • webGL (1)
      • AI (4)
        • chat-gpt (4)
      • flutter (17)
        • dart (11)
        • flutter (6)
      • Sql (3)
      • PHP (4)
      • Python (2)
      • Git (6)
      • vscode (1)
      • 개발 도움 사이트 (7)
      • 작업기록 (4)
      • 오류 모음 (4)
      • 메모장 (7)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [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); // 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.

        비동기와 동기의 차이

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

        '자바스크립트 > 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일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바