liminfo

JavaScript Reference

JavaScript 프로그래밍 레퍼런스

54개 결과

JavaScript Reference 소개

JavaScript 레퍼런스는 핵심 문법부터 ES2022 최신 기능까지 JavaScript 언어를 다루는 포괄적이고 검색 가능한 치트 시트입니다. 기본문법(let/const/var, console.log, typeof, 엄격 동등성 ===, 템플릿 리터럴, 옵셔널 체이닝 ?., 널 병합 ??), 자료형(Number, String 메서드, Boolean falsy 값, null/undefined 구분, Symbol, BigInt), 함수(함수 선언, 화살표 함수, 기본 매개변수, 나머지 매개변수, 구조분해 매개변수, 클로저, IIFE), 배열(Array.from 생성, push/pop/shift/unshift, map/filter/reduce, find/findIndex/includes, some/every, slice/splice, sort/reverse, flat/flatMap, 전개, 구조분해), 객체(단축 속성이 있는 객체 리터럴, Object.keys/values/entries, 구조분해, 전개 연산자, Object.assign, Object.freeze/seal, Map, Set), 비동기(Promise 생성, Promise.all/race, async/await, fetch API, setTimeout/setInterval), DOM(querySelector, addEventListener, classList, createElement/appendChild), ES6+(class, import/export, for...of/for...in, Proxy, structuredClone, at() 메서드)의 8개 카테고리로 구성됩니다.

이 레퍼런스는 브라우저 애플리케이션, Node.js 백엔드, 풀스택 프로젝트를 작업하는 JavaScript 개발자를 위한 것입니다. 8개 카테고리는 JavaScript 개발자가 가장 자주 찾는 주제를 반영합니다: var/let/const와 스코핑 규칙의 차이, 방대한 Array 프로토타입 메서드, Promise 기반 비동기 코드의 미묘함, 브라우저 스크립팅에서 사용되는 DOM API. 기본문법 카테고리는 typeof null 버그, == vs ===의 동작, falsy 값의 다른 의미 등 일반적인 JavaScript 함정을 구체적으로 다룹니다.

ES6+ 카테고리는 현대 코드베이스에서 JavaScript가 작성되는 방식을 바꾼 기능들을 강조합니다: 상속이 있는 ES6 클래스, import/export를 사용한 네이티브 모듈 구문, 메타프로그래밍을 위한 Proxy 객체, 깊은 복사를 위한 structuredClone(ES2022), 배열과 문자열의 음수 인덱스 접근을 위한 at() 메서드(ES2022). 비동기 카테고리의 async 패턴과 함께 이 레퍼런스는 오늘날 프로덕션에서 사용되는 언어의 완전한 그림을 제공합니다.

주요 기능

  • var 호이스팅 동작과 블록 스코프 예제가 있는 let/const/var 스코핑 규칙
  • 안전한 속성 접근과 기본값을 위한 옵셔널 체이닝 ?.와 널 병합 연산자 ??
  • 완전한 배열 메서드: map, filter, reduce, find, findIndex, some, every, flat, flatMap
  • 객체 유틸리티: 기본값이 있는 Object.keys/values/entries, 구조분해, 전개, Object.freeze/seal
  • has, size, delete, 전개 변환 예제가 있는 Map과 Set 자료 구조
  • Promise.all/race, try/catch가 있는 async/await, POST 본문이 있는 fetch API의 비동기 패턴
  • querySelector, classList.add/remove/toggle, createElement, once 옵션이 있는 addEventListener DOM 조작
  • extends가 있는 클래스, ES 모듈 import/export, structuredClone, at() 메서드 ES6+ 기능

자주 묻는 질문

JavaScript에서 let, const, var의 차이는 무엇인가요?

var는 함수 스코프이며 함수 상단으로 호이스팅됩니다(undefined로 초기화). let과 const는 블록 스코프이며 선언 전에 접근할 수 없습니다(일시적 사각지대). const는 초기값이 필요하며 재할당할 수 없지만, 가리키는 객체나 배열은 여전히 변경할 수 있습니다. 기본적으로 const를 사용하고, 재할당이 필요할 때 let을 사용하며, 현대 코드에서는 var를 피하세요.

옵셔널 체이닝(?.)이란 무엇이며 언제 사용해야 하나요?

옵셔널 체이닝 ?.은 앞의 값이 null이나 undefined이면 TypeError를 던지는 대신 단락 평가하여 undefined를 반환합니다. API 응답 데이터나 깊이 중첩된 설정 객체처럼 존재하지 않을 수 있는 객체의 속성에 접근할 때 유용합니다. user?.address?.city는 user나 address가 null이면 오류를 던지는 대신 undefined를 반환합니다.

JavaScript에서 ==와 ===의 차이는 무엇인가요?

===는 엄격한 동등성으로 타입 강제 없이 값과 타입을 모두 확인합니다. ==는 느슨한 동등성으로 비교 전에 타입 강제를 수행하여 1 == "1"이 true가 되는 놀라운 결과를 초래합니다. 암시적 타입 변환으로 인한 예상치 못한 동작을 피하려면 항상 ===를 사용하세요.

JavaScript의 클로저란 무엇인가요?

클로저는 외부(포함) 함수가 반환된 후에도 외부 스코프의 변수에 대한 접근을 유지하는 함수입니다. 레퍼런스의 counter 예제는 전형적인 클로저를 보여줍니다: 내부 inc와 get 함수는 포함 counter 함수의 count 변수에 접근하여 호출 간에 프라이빗 카운터를 유지합니다.

Promise.all과 Promise.race의 차이는 무엇인가요?

Promise.all은 promises 배열을 받아 모두 resolve되면 결과 배열을 반환하며 resolve됩니다. 하나라도 reject되면 즉시 reject됩니다. Promise.race는 배열의 첫 번째 promise가 처리되는 즉시 resolve되거나 reject됩니다. 모든 결과가 필요할 때는 Promise.all을, 타임아웃 패턴이나 가장 빠른 응답을 위해서는 Promise.race를 사용하세요.

JavaScript에서 null과 undefined의 차이는 무엇인가요?

undefined는 선언되었지만 할당되지 않은 변수, 전달되지 않은 함수 매개변수, 존재하지 않는 객체 속성의 기본값입니다. null은 "값 없음" 또는 "비어 있음"을 나타내기 위해 명시적으로 할당하는 값입니다. 둘 다 falsy입니다. typeof undefined는 "undefined"이고, typeof null은 "object"입니다(언어의 역사적 버그).

structuredClone은 어떻게 작동하며 전개 연산자 대신 왜 사용하나요?

structuredClone(ES2022)은 중첩된 모든 객체, 배열, Map, Set, Date 값을 재귀적으로 복사하여 객체의 깊은 복사본을 만듭니다. 전개(...)는 얕은 복사만 수행하므로 중첩된 객체는 여전히 같은 참조를 공유합니다. 공유 참조 없이 깊이 중첩된 데이터 구조를 복제해야 할 때 structuredClone을 사용하세요.

JavaScript의 Proxy 객체는 무엇에 사용하나요?

Proxy는 다른 객체를 감싸고 속성 접근, 할당, 함수 호출 등의 작업을 "트랩"을 사용하여 가로챕니다. 일반적인 사용 사례로는 유효성 검사(값을 검증하기 위해 set 가로채기), 로깅(접근을 기록하기 위해 get 가로채기), 기본값(속성이 존재하지 않으면 기본값 반환), 반응형 데이터 시스템 구축(Vue 3의 반응성 시스템처럼)이 있습니다.