반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 싱글톤 패턴
  • 메이븐 페이즈
  • serverless computing
  • 팩터리 메서드 패턴
  • item8
  • item9
  • 서버리스 컴퓨팅
  • 느린 쿼리
  • 알고리즘
  • 참조 해제
  • bean Validation
  • try-with-resources
  • 스프링 검증
  • next js app
  • 자바 디자인패턴
  • 외래키 제약조건
  • prerendering
  • 자바
  • 슬로우 쿼리
  • Javadoc 자바독 자바주석 주석 Comment
  • 싱글톤
  • 디자인패턴
  • 메이븐 골
  • 이펙티브 자바
  • pnpm
  • 싱글턴
  • Next.js
  • 자바 검증
  • NEXT JS
  • 자바스크립트 면접
  • Java
  • item7
  • 이펙티브 자바 item9
  • 토비의 스프링
  • Pre-rendering
  • 러스트
  • 도커공식문서
  • 메이븐 라이프사이클
  • 자바스크립트 인터뷰
  • MSSQL
  • 객체복사
  • 프로그래머의 뇌
  • 플라이웨이트패턴
  • 작업기억공간
  • 추상 팩터리 패턴
  • 이펙티브자바
  • 자료구조
  • 자바스크립트
  • rust
  • 빈 검증

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

자바스크립트/인터뷰

let 키워드를 var 와 비교하여 설명해보세요

2023. 1. 18. 00:01

let 키워드와 var 키워드

  • let 은 변수를 선언할 때 사용합니다.
    • 블록 스코프를 가집니다.
    • 호이스팅이 됩니다.
      • 단, 초기화 전까지는 Temporal Dead Zone 에 속합니다.
  • var 도 변수를 선언할 때 사용합니다.
    • 함수 스코프를 가집니다.
    • 호이스팅이 됩니다.
      • 초기화 전에도 참조가 가능하지만, undefined 라는 값을 가지고 있습니다.

함수 스코프의 특징

function foo() {
  for (var a = 0; a < 10; a++) {
    console.log(a);
  }

  console.log(`outside: ${a}`);
}
  • var 로 for 문을 작성하고 외부에서 a 를 참조해도 참조가 가능합니다.
  • 이는 함수 스코프라는 특성 때문입니다. 블록에 갇혀있더라도 함수 내에서는 변수를 계속 참조 가능합니다.
function foo() {
  for (let a = 0; a < 10; a++) {
    console.log(a);
  }

  console.log(`outside: ${a}`); // Uncaught ReferenceError: a is not defined
}
  • let 으로 for 문을 작성하면, 외부에서 a 를 참조할 수 없습니다.
  • 이는 블록 스코프라는 특성 때문입니다. 블록이 끝나면, 해당 변수를 참조할 수 없습니다.

var 의 클로저 문제

function bar() {
  for (var a = 0; a < 10; a++) {
    setTimeout(() => {
      console.log(a);
    });
  }
}
  • 위 함수의 결과는 10 만 10 번을 출력하게 됩니다.
  • 그 이유는 var 의 함수 스코프 특성과 setTimeout 내부에 있는 콜백 함수가 즉시 처리되지 않고 비동기 작업 큐 에 머무르다 동기 작업이 끝난 후 Event Loop 에 의해 처리된다는 점에 있습니다.
    • setTimeout() 내부의 콜백 함수는 비동기로 실행되고, 이는 자바스크립트 엔진의 특성상 비동기 작업 큐 에 넘겨져 콜스택에 있는 작업이 완료된 후 Event Loop 에 의해 처리됩니다.
    • var 로 선언된 변수가 for 바깥에서 유효하다는 특성으로 인해 자바스크립트 엔진은 console.log(a) 코드를 실행할 때, 당시 a 에 들어있던 값을 이용하지 않고, a 의 참조를 이용합니다.
  • a 는 유효하나, 비동기 작업 큐 에 있는 작업이 Event Loop 에 처리되는 시점에는 for 문이 모두 끝난 시점이라 10 이라는 값을 가지게 됩니다.
function bar() {
  for (let a = 0; a < 10; a++) {
    setTimeout(() => {
      console.log(a);
    });
  }
}
  • 위 코드는 let 의 블록스코프에 의해 아마 모두가 의도한대로 0~9 까지 숫자를 순차적으로 출력하게 됩니다.

var 의 호이스팅과 let 의 TDZ 특성

function foobar() {
  console.log(a); // undefined
  var a = 100;
}
  • var 는 자바스크립트 엔진에 의해 해석될 때, 호이스팅이라는 과정을 거칩니다.
  • 호이스팅은 코드에서 사용되는 변수나 함수의 이름을 보고, 해당 키워드를 맨 위로 끌어올리는 행위를 말합니다.
  • 그래서 위 코드에서 console.log(a) 시점에 a 가 존재하지 않음에도 에러를 내지 않고 undefined 를 출력합니다.
function foobar() {
  console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 100;
}
  • let 키워드도 동일하게 호이스팅 현상은 일어납니다.
  • 단, let 으로 선언된 변수는 초기화 전까지는 Temporal Dead Zone 이라는 영역에 있어 사용이 불가능합니다.
    • 만일 위처럼 사용한 경우에는 Uncaught ReferenceError 가 발생하게 됩니다.
  • 이렇게 명확하게 에러를 내주는 것은 프로그래머의 실수를 방지해줍니다.
반응형
저작자표시 비영리 (새창열림)

'자바스크립트 > 인터뷰' 카테고리의 다른 글

자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?  (0) 2023.01.18
switch 문에서 에러 없이 let 으로 변수를 재선언해보세요.  (0) 2023.01.18
pure function (순수 함수) 란 무엇인가요?  (0) 2023.01.18
Currying function (커링 함수) 이란 무엇인가요?  (0) 2023.01.18
unary function 이란 무엇인가요?  (0) 2023.01.17
    '자바스크립트/인터뷰' 카테고리의 다른 글
    • 자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?
    • switch 문에서 에러 없이 let 으로 변수를 재선언해보세요.
    • pure function (순수 함수) 란 무엇인가요?
    • Currying function (커링 함수) 이란 무엇인가요?
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바