JavaScript에서 객체(Object)는 흔히 해시(hash) 또는 연관 배열이라고 불리며, 키(key)와 값(value)의 쌍으로 데이터를 저장합니다. 객체에 담긴 모든 키를 한눈에 확인하고 싶다면 Object.keys() 메서드를 사용하는 것이 가장 간단하고 효율적인 방법입니다. Object.keys()는 인자로 전달받은 객체의 고유 열거 가능 속성 이름들을 문자열 배열 형태로 반환합니다. 별도의 반복문 없이도 객체의 전체 키 목록을 즉시 얻을 수 있어 매우 유용합니다. 예제 코드 <!DOCTYPE html> &l
자바스크립트에서 날짜를 하루 줄이려면 Date 객체의 setDate()와 getDate() 메서드를 함께 사용하면 됩니다. 먼저 getDate()로 현재 일(day) 값을 가져온 뒤 1을 빼고, 그 결과를 setDate()에 전달하면 날짜가 갱신됩니다.이 방식의 장점은 월이나 연도가 바뀌는 경우에도 자동으로 처리된다는 점입니다. 예를 들어 3월 1일에서 하루를 빼면 윤년 여부까지 고려해 2월 28일 또는 2월 29일로 정확하게 계산됩니다.예제<!DOCTYPE html> <html lang=en> <head
HTML 요소에 이벤트를 추가하는 가장 좋고 권장되는 방법은 바로 addEventListener() 메서드를 사용하는 것입니다. 인라인 이벤트 속성(예: onclick)이나 DOM 프로퍼티 방식과 달리, addEventListener()는 하나의 요소에 여러 개의 이벤트 핸들러를 중복 없이 등록할 수 있으며, 이벤트 캡처링과 버블링 단계도 세밀하게 제어할 수 있습니다.addEventListener() 기본 문법element.addEventListener(event, function, useCapture);event: 클릭, 키 입력
자바스크립트(JavaScript)에서는 내장된 URL 생성자를 사용하여 문자열 형태의 웹 주소를 구조화된 객체로 변환할 수 있습니다. 이렇게 만든 URL 객체는 프로토콜(protocol), 호스트(host), 경로(pathname) 등 각 구성 요소에 개별적으로 접근할 수 있어, 복잡한 문자열 파싱 없이도 URL을 손쉽게 분석하고 조작할 수 있습니다.URL 객체 생성 방법URL 객체는 new URL() 문법으로 생성합니다. 생성자의 인자로 분석하려는 전체 URL 문자열을 전달하면 됩니다.let url = new URL(https:/
화살표 함수(arrow function)는 ES2015(ES6)에서 도입된 JavaScript의 약식 함수 표기법입니다. 기존의 function 키워드를 사용하는 일반 함수보다 훨씬 짧은 문법으로 함수를 정의할 수 있어, 코드를 더 간결하고 읽기 쉽게 만들어 줍니다. 화살표 함수의 주요 특징 간결한 문법: function 키워드 없이 => 기호만으로 함수를 선언할 수 있습니다. 자체 this 바인딩이 없음: 화살표 함수는 자신만의 this를 갖지 않고, 정의된 위치를 둘러싼 렉시컬 스코프(주변 컨텍스트)의 this를 그대로
HTML 문서에서 JavaScript를 사용하려면 <script> 태그를 활용해야 합니다. JavaScript를 HTML에 포함하는 방식은 크게 두 가지입니다. 하나는 HTML 문서 안에 코드를 직접 작성하는 내부(인라인) 스크립트 방식이고, 다른 하나는 별도의 .js 파일로 분리한 후 불러오는 외부 스크립트 방식입니다. JavaScript 포함 방식 비교 내부(인라인) 스크립트: <script> 태그 사이에 코드를 직접 작성합니다. 간단한 기능 구현에 적합합니다. 외부 스크립트: <script src=
JavaScript는 Enum(열거형)을 기본적으로 지원하지 않습니다. Java나 C# 같은 언어와 달리 별도의 enum 키워드가 없기 때문에, JavaScript에서 열거형을 사용하려면 객체(Object)를 활용해 직접 구현해야 합니다.객체의 속성과 값을 이용하면 간단하게 열거형처럼 동작하는 구조를 만들 수 있으며, 관련된 상수들을 하나로 묶어 코드의 가독성과 유지보수성을 높일 수 있습니다.JavaScript에서 열거형 구현 예제다음은 객체를 사용하여 색상 열거형을 정의하고, 버튼 클릭 시 각 색상에 대응되는 값을 화면에 출력하는
JavaScript에서는 History 객체(window.history)를 사용하여 브라우저의 방문 기록에 접근할 수 있습니다. 이 객체를 활용하면 현재 세션에서 쌓인 페이지 수를 확인하거나, 이전 페이지와 다음 페이지 사이를 자유롭게 이동할 수 있습니다.주요 메서드 살펴보기window.history.length – 현재 브라우저 세션에 저장된 방문 기록의 개수를 반환합니다.window.history.forward() – 방문 기록상 다음 페이지로 이동합니다.window.history.back() – 방문 기록상 이전 페이지로 이동
네이티브 프로토타입이란?프로토타입(prototype) 속성은 자바스크립트의 핵심 개념입니다. 자바스크립트가 프로토타입 기반 언어이기 때문입니다. 프로토타입은 자바스크립트에서 상속(inheritance)을 구현하는 핵심 메커니즘으로 작동합니다.개발자가 직접 생성한 커스텀 객체뿐만 아니라 String, Array, Object 등 모든 내장 네이티브 객체 역시 prototype 속성을 가지고 있습니다. 이 속성에 새로운 속성이나 메서드를 추가하면 기존 객체의 기능을 손쉽게 확장할 수 있습니다.다만 네이티브 프로토타입은 수정하거나 새롭게
JavaScript에서는 내장된 Error 객체를 상속받아 자신만의 사용자 정의 오류(Custom Error)를 만들 수 있습니다. 이를 통해 오류의 이름과 메시지를 명확하게 정의하고, 애플리케이션의 디버깅과 예외 처리를 더욱 체계적으로 관리할 수 있습니다.사용자 정의 오류란?기본적으로 JavaScript는 TypeError, RangeError, SyntaxError 등 다양한 내장 오류 타입을 제공합니다. 하지만 실제 개발 환경에서는 프로젝트에 특화된 오류 유형이 필요할 때가 많습니다. 이때 Error 클래스를 확장(extend
JavaScript에서는 Error 클래스를 상속하여 기본 에러 객체를 확장할 수 있습니다. 가장 권장되는 방법은 내장된 Error 클래스를 상속받는 새로운 커스텀 에러 클래스(Custom Error Class)를 정의하는 것입니다. 커스텀 에러가 필요한 이유 기본 Error 객체만으로는 애플리케이션에서 발생하는 다양한 오류 상황을 세분화하기 어렵습니다. 커스텀 에러 클래스를 사용하면 다음과 같은 장점이 있습니다. 에러의 종류를 name 속성으로 명확하게 구분할 수 있습니다. instanceof 연산자를 통해 특정 에러 타입만 골
웹 개발을 하다 보면 특정 요소에 대해 클릭이나 호버 같은 마우스 이벤트를 일시적으로 막아야 하는 경우가 있습니다. 이럴 때 pointer-events 속성을 활용하면 간단하게 해결할 수 있습니다.pointer-events 속성이란?pointer-events는 CSS 속성으로, 요소가 마우스 포인터 이벤트(클릭, 더블클릭, 호버 등)에 반응할지 여부를 결정합니다. JavaScript에서는 이 값을 동적으로 변경하여 원하는 시점에 마우스 이벤트를 켜고 끌 수 있습니다.none : 해당 요소가 마우스 이벤트를 받지 않도록 비활성화합니다
JavaScript에서는 reduce() 메서드를 활용하면 객체 배열을 특정 키(id, age 등)를 기준으로 손쉽게 그룹화할 수 있습니다. 이 글에서는 실제 예제 코드와 함께 그룹화 과정을 단계별로 살펴보겠습니다.groupBy 함수의 작동 원리그룹화의 핵심은 reduce()입니다. reduce()는 배열의 각 요소를 순회하면서 누적 결과값(accumulator)을 만들어내는 메서드로, 여기서는 빈 객체({})를 초기값으로 사용해 키별로 객체들을 분류합니다.핵심 로직인 (result[obj[key]] = result[obj[key]
JavaScript에서 예외(Exception)는 try...catch 블록으로 한 번 잡은(catch) 후에도, catch 블록 안에서 다시 throw 문을 사용하여 재발생(re-throw)시킬 수 있습니다.오류를 다시 던지는 이유잡은 오류를 다시 던지는 기법은 실무에서 다음과 같은 상황에서 유용하게 활용됩니다.부분적인 오류 처리: 오류를 로깅하거나 일부만 처리한 뒤, 나머지 처리를 상위 호출자에게 위임하는 경우오류 전파: 하위 함수에서 발생한 오류를 상위 레벨의 통합 에러 핸들러로 전달하는 경우조건부 처리: 특정 조건에 해당하는
JavaScript에서 함수 매개변수 구조 분해(Destructuring)란? JavaScript의 구조 분해 할당(Destructuring)은 ES6(ES2015)에서 도입된 문법으로, 객체나 배열의 값을 간결하게 추출하여 변수에 담을 수 있게 해줍니다. 특히 함수 매개변수에 이 문법을 적용하면, 인자로 전달된 객체에서 필요한 속성만 곧바로 꺼내 사용할 수 있어 코드가 훨씬 깔끔하고 가독성이 높아집니다. 또한 구조 분해 시 기본값(default value)을 지정할 수 있어, 객체에 해당 속성이 없거나 undefined로 전달되더
TextEncoder란? 자바스크립트의 TextEncoder는 주어진 문자열을 UTF-8 표준 인코딩으로 변환하는 데 사용되는 내장 객체입니다. encode() 메서드에 문자열을 전달하면 해당 문자열을 UTF-8 바이트 시퀀스로 변환한 Uint8Array 객체를 반환합니다. 참고로 TextEncoder는 UTF-8 인코딩만 지원한다는 점을 기억해 두면 좋습니다. TextDecoder란? TextDecoder는 TextEncoder와 반대로, 바이트 스트림을 코드 포인트(code points) 스트림, 즉 사람이 읽을 수 있는 문자
JavaScript에서 배열의 평균값을 구하는 것은 매우 간단합니다. 기본 원리는 배열의 모든 요소를 더한 뒤, 그 합을 요소 개수로 나누는 것입니다. forEach() 메서드를 사용하면 반복문 없이도 깔끔하게 합계를 구할 수 있습니다.아래는 JavaScript로 배열의 평균값을 계산하는 예제 코드입니다.예제 코드<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&
JavaScript에서 배열의 중앙값이란?중앙값(median)은 배열의 요소들을 크기순으로 정렬했을 때 정확히 가운데 위치하는 값을 의미합니다. 통계 분석에서 평균보다 이상치(outlier)의 영향을 덜 받기 때문에 데이터의 중심 경향을 파악하는 데 자주 활용됩니다.배열의 중앙값을 구하는 절차는 다음과 같습니다.1. 배열을 오름차순으로 정렬합니다.2. 요소 개수가 홀수라면 → 정렬된 배열의 가운데 값을 그대로 반환합니다.3. 요소 개수가 짝수라면 → 가운데 두 값의 산술 평균을 중앙값으로 반환합니다.예제 코드다음은 JavaScrip
웹 개발을 하다 보면 이미지 파일을 Blob(Binary Large Object) 형태로 변환해야 하는 경우가 많습니다. 이미지 업로드, 캔버스 처리, 서버 전송 등 다양한 작업에서 Blob 데이터가 활용되는데요. 이 글에서는 JavaScript의 fetch API와 Response.blob() 메서드를 사용해 이미지를 Blob 객체로 변환하는 방법을 예제와 함께 자세히 살펴보겠습니다. Blob이란 무엇인가? Blob은 Binary Large Object의 약자로, 이미지·오디오·비디오처럼 이진 데이터를 그대로 담는 불변(immut
JavaScript에서 객체의 속성(property)에 접근하는 방법은 크게 세 가지가 있습니다.점 표기법(Dot Notation): object.property대괄호 표기법(Bracket Notation): object[property]객체 구조 분해 할당(Object Destructuring): let {property} = object세 가지 방법의 특징점 표기법은 가장 간결하고 직관적이지만, 속성 이름에 공백이나 특수문자가 포함된 경우에는 사용할 수 없습니다. 대괄호 표기법은 문자열이나 변수를 이용해 동적으로 속성에 접근할