필요한 것은 자바스크립트 치트시트뿐입니다!-JS 튜토리얼-php.cn

Only Javascript cheatsheet you need !

var, let, const의 차이점

1. var, let 및 const 개요

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Re-declaration	Allowed within the same scope	Not allowed in the same scope	Not allowed in the same scope
Re-assignment	Allowed	Allowed	Not allowed after initialization
Initialization	Can be declared without initialization	Can be declared without initialization	Must be initialized at the time of declaration
Hoisting	Hoisted but initialized to undefined	Hoisted but not initialized	Hoisted but not initialized

특징

변수

하자 상수

Type	Function Scope	Block Scope
var	Variables are scoped to the enclosing function.	Does not support block scope. A var inside a block (if, for, etc.) leaks into the enclosing function or global scope.
let / const	Not function-scoped.	Variables are confined to the block they are declared in.

범위 함수 범위 블록 범위 블록 범위

재선언

동일한 범위 내에서 허용 동일한 범위에서는 허용되지 않습니다 동일한 범위에서는 허용되지 않습니다 재할당
허용 허용 초기화 후에는 허용되지 않습니다 초기화

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // 10 (accessible because of function scope)
console.log(y); // ReferenceError (block-scoped)
console.log(z); // ReferenceError (block-scoped)

로그인 후 복사

초기화 없이 선언 가능 초기화 없이 선언 가능 선언 시 초기화되어야 합니다

게양

호이스팅되었지만 정의되지 않은 상태로 초기화되었습니다. 호이스팅되었지만 초기화되지 않음 호이스팅되었지만 초기화되지 않음

2. 범위 차이

Feature	var	let	const
Re-declaration	Allowed	Not allowed	Not allowed
Re-assignment	Allowed	Allowed	Not allowed

유형 함수 범위 블록 범위 변수 변수의 범위는 바깥쪽 함수로 지정됩니다. 블록 범위를 지원하지 않습니다. 블록 내부의 변수(if, for 등)가 포함된 함수나 전역 범위로 누출됩니다. let / const 함수 범위가 아닙니다. 변수는 선언된 블록으로 제한됩니다. 예: 3. 재선언 및 재할당 특징 변수 하자 상수 재선언 허용 허용되지 않음 허용되지 않음 재할당 허용 허용 허용되지 않음

예:

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // 10 (accessible because of function scope)
console.log(y); // ReferenceError (block-scoped)
console.log(z); // ReferenceError (block-scoped)

로그인 후 복사

4. 호이스팅 동작

Type	Hoisting Behavior
var	Hoisted to the top of the scope but initialized as undefined.
let	Hoisted but not initialized. Accessing it before declaration causes a ReferenceError.
const	Hoisted but not initialized. Must be initialized at the time of declaration.

유형

호이스팅 동작

변수
스코프의 최상위로 끌어올려졌지만 정의되지 않은 상태로 초기화되었습니다. 하자

// Re-declaration
var a = 10;
var a = 20; // Allowed

let b = 30;
// let b = 40; // SyntaxError: Identifier 'b' has already been declared

const c = 50;
// const c = 60; // SyntaxError: Identifier 'c' has already been declared

// Re-assignment
a = 15; // Allowed
b = 35; // Allowed
// c = 55; // TypeError: Assignment to constant variable

로그인 후 복사

호이스팅되었지만 초기화되지 않았습니다. 선언하기 전에 액세스하면 ReferenceError가 발생합니다.

상수

호이스팅되었지만 초기화되지 않았습니다. 선언 시 초기화되어야 합니다. 예:

Feature	let and const
Block Scope	Both are confined to the block in which they are declared.
No Hoisting Initialization	Both are hoisted but cannot be accessed before initialization.
Better Practice	Preferred over var for predictable scoping.

5. let과 const의 유사점

Scenario	Recommended Keyword
Re-declare variables or use function scope	var (generally avoid unless necessary for legacy code).
Variables that may change	let (e.g., counters, flags, intermediate calculations).
Variables that should not change	const (e.g., configuration settings, fixed values).

특징 let 및 const 블록 범위 둘 다 선언된 블록으로 제한됩니다. 호이스팅 초기화 없음 둘 다 호이스팅되었지만 초기화 전에는 액세스할 수 없습니다. 더 나은 실천 예측 가능한 범위 지정을 위해 var보다 선호됩니다. 6. 언제 어느 것을 사용하나요? 시나리오 추천 키워드 변수를 다시 선언하거나 함수 범위를 사용하세요 var(레거시 코드에 필요한 경우가 아니면 일반적으로 피함). 변경될 수 있는 변수 let(예: 카운터, 플래그, 중간 계산). 변경하면 안되는 변수 const(예: 구성 설정, 고정 값).

7. 호이스팅 설명

호이스팅이란 무엇인가요?

호이스팅은 컴파일 단계에서 선언을 해당 범위의 맨 위로 이동하는 JavaScript의 기본 동작입니다.

var: 끌어올려지고 정의되지 않은 상태로 초기화됩니다.
let / const: 호이스팅되었지만 초기화되지 않았습니다. 이렇게 하면 블록 시작부터 선언이 나타날 때까지 TDZ(시간적 데드존)가 생성됩니다.

호이스팅이 이런 방식으로 작동하는 이유는 무엇입니까?

편집 단계: JavaScript는 먼저 코드를 스캔하여 변수 및 함수 선언을 위한 메모리 공간을 만듭니다. 이 단계에서는:

var 변수는 정의되지 않은 상태로 초기화됩니다.
let 및 const 변수는 "호이스팅"되지만 초기화되지 않은 상태로 유지되므로 TDZ가 됩니다.
함수 선언이 완전히 끌어올려졌습니다.

실행 단계: JavaScript는 코드를 한 줄씩 실행하기 시작합니다. 이 단계에서는 변수와 함수에 값이 할당됩니다.

8. 호이스팅 개요

Type	Hoisting	Access Before Declaration
var	Hoisted and initialized to undefined.	Allowed but value is undefined.
let	Hoisted but not initialized.	Causes a ReferenceError.
const	Hoisted but not initialized.	Causes a ReferenceError.

유형 게양 선언 전 접근 변수 호이스팅되고 정의되지 않은 상태로 초기화되었습니다. 허용되지만 값이 정의되지 않았습니다. 하자 호이스팅되었지만 초기화되지 않았습니다. ReferenceError가 발생합니다. 상수 호이스팅되었지만 초기화되지 않았습니다. ReferenceError가 발생합니다.

예:

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // 10 (accessible because of function scope)
console.log(y); // ReferenceError (block-scoped)
console.log(z); // ReferenceError (block-scoped)

로그인 후 복사

결론

재할당이 필요하지 않은 변수에는 가능하면 const를 사용하세요.
동일한 범위 내에서 재할당해야 하는 변수에는 let을 사용하세요.
레거시 코드로 작업하거나 함수 범위 동작이 필요한 경우가 아니면 var을 사용하지 마세요.

자바스크립트 데이터 유형

JavaScript에는 Primitive 유형과 Non-Primitive(Reference) 유형으로 분류되는 다양한 데이터 유형이 있습니다. 다음은 예와 차이점을 포함하여 각각에 대한 설명입니다.

1. 원시 데이터 유형

기본 유형은 변경할 수 없습니다. 즉, 해당 값이 생성된 후에는 변경될 수 없습니다. 메모리에 직접 저장됩니다.

Data Type	Example	Description
String	"hello", 'world'	Represents a sequence of characters (text). Enclosed in single (''), double (""), or backticks ().
Number	42, 3.14, NaN	Represents both integers and floating-point numbers. Includes NaN (Not-a-Number) and Infinity.
BigInt	123n, 9007199254740991n	Used for numbers larger than Number.MAX_SAFE_INTEGER (2^53 - 1). Add n to create a BigInt.
Boolean	true, false	Represents logical values, used in conditions to represent "yes/no" or "on/off".
Undefined	undefined	Indicates a variable has been declared but not assigned a value.
Null	null	Represents an intentional absence of value. Often used to reset or clear a variable.
Symbol	Symbol('id')	Represents a unique identifier, mainly used as property keys for objects to avoid collisions.

데이터 유형 예 설명 문자열 "안녕하세요", '세상' 문자열(텍스트)을 나타냅니다. 단일(''), 이중("") 또는 백틱()으로 묶습니다. 숫자 42, 3.14, NaN 정수와 부동 소수점 숫자를 모두 나타냅니다. NaN(Not-a-Number) 및 Infinity가 포함됩니다. 빅인트 123n, 9007199254740991n Number.MAX_SAFE_INTEGER(2^53 - 1)보다 큰 숫자에 사용됩니다. BigInt를 생성하려면 n을 추가하세요. 부울 사실, 거짓 "예/아니요" 또는 "켜기/끄기"를 나타내는 조건에 사용되는 논리값을 나타냅니다. 정의되지 않음 정의되지 않음 변수가 선언되었지만 값이 할당되지 않았음을 나타냅니다. 무효 널 의도적인 가치 부재를 나타냅니다. 변수를 재설정하거나 지우는 데 자주 사용됩니다. 기호 기호('id') 고유 식별자를 나타내며 주로 충돌을 피하기 위해 객체의 속성 키로 사용됩니다.

2. 비원시(참조) 데이터 유형

비원시 유형은 변경 가능하며 참조로 저장됩니다. 이는 데이터 컬렉션이나 더 복잡한 엔터티를 저장하는 데 사용됩니다.

Data Type	Example	Description
Object	{name: 'John', age: 30}	A collection of key-value pairs. Keys are strings (or Symbols), and values can be any type.
Array	[1, 2, 3, "apple"]	A list-like ordered collection of values. Access elements via index (e.g., array[0]).
Function	function greet() {}	A reusable block of code that can be executed. Functions are first-class citizens in JavaScript.
Date	new Date()	Represents date and time. Provides methods for manipulating dates and times.
RegExp	/pattern/	Represents regular expressions used for pattern matching and string searching.
Map	new Map()	A collection of key-value pairs where keys can be of any type, unlike plain objects.
Set	new Set([1, 2, 3])	A collection of unique values, preventing duplicates.
WeakMap	new WeakMap()	Similar to Map, but keys are weakly held, meaning they can be garbage-collected.
WeakSet	new WeakSet()	Similar to Set, but holds objects weakly to prevent memory leaks.

3. 기본 유형과 비기본 유형의 주요 차이점

Aspect	Primitive Types	Non-Primitive Types
Mutability	Immutable: Values cannot be changed.	Mutable: Values can be modified.
Storage	Stored directly in memory.	Stored as a reference to a memory location.
Copy Behavior	Copied by value (creates a new value).	Copied by reference (points to the same object).
Examples	string, number, boolean, etc.	object, array, function, etc.

4. 특별한 경우

연산자 유형

typeof null: JavaScript의 역사적인 버그로 인해 "객체"를 반환하지만 null은 객체가 아닙니다.
NaN 유형: "숫자가 아님"을 의미하더라도 "숫자"를 반환합니다.
typeof function: 객체의 하위 유형인 "function"을 반환합니다.

동적 타이핑

JavaScript에서는 변수가 런타임 시 다양한 유형의 값을 보유할 수 있습니다.

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // 10 (accessible because of function scope)
console.log(y); // ReferenceError (block-scoped)
console.log(z); // ReferenceError (block-scoped)

로그인 후 복사

5. 데이터 유형별 예시

기본 유형

// Re-declaration
var a = 10;
var a = 20; // Allowed

let b = 30;
// let b = 40; // SyntaxError: Identifier 'b' has already been declared

const c = 50;
// const c = 60; // SyntaxError: Identifier 'c' has already been declared

// Re-assignment
a = 15; // Allowed
b = 35; // Allowed
// c = 55; // TypeError: Assignment to constant variable

로그인 후 복사

비원시 유형

console.log(a); // undefined (hoisted)
var a = 10;

console.log(b); // ReferenceError (temporal dead zone)
let b = 20;

console.log(c); // ReferenceError (temporal dead zone)
const c = 30;

로그인 후 복사

6. 결과 유형 요약

Expression	Result
typeof "hello"	"string"
typeof 42	"number"
typeof 123n	"bigint"
typeof true	"boolean"
typeof undefined	"undefined"
typeof null	"object"
typeof Symbol()	"symbol"
typeof {}	"object"
typeof []	"object"
typeof function(){}	"function"