Number.MAX_VALUE와 Number.MIN_VALUE란?자바스크립트의 Number.MAX_VALUE와 Number.MIN_VALUE 속성은 각각 자바스크립트에서 표현할 수 있는 최댓값과 최솟값을 나타내는 정적 속성입니다.두 속성의 특징을 간단히 정리하면 다음과 같습니다.Number.MAX_VALUE: 자바스크립트가 표현할 수 있는 가장 큰 숫자로, 약 1.7976931348623157e+308입니다.Number.MIN_VALUE: 표현할 수 있는 가장 작은 양수 값으로, 약 5e-324입니다. 음수가 아니라는 점에 주의해야
자바스크립트의 Number() 함수는 인자로 전달된 객체 값을 해당하는 숫자 값으로 변환하는 전역 함수입니다. 문자열, 불리언(Boolean), Date 객체 등 다양한 타입의 값을 숫자로 변환할 때 유용하게 사용됩니다. Number() 함수의 변환 규칙 Number(true) → 1 Number(false) → 0 Number(149) → 149 (숫자 형태의 문자열은 그대로 숫자로 변환) Number(new Date()) → 1970년 1월 1일 이후 경과한 밀리초(ms) 변환할 수 없는 값(예: abc, undefined)
Object.getPrototypeOf() 메서드는 사용자가 생성한 객체의 프로토타입(prototype)을 확인할 때 사용됩니다. 특히 두 객체가 서로 같은 프로토타입을 공유하고 있는지 비교하는 용도로도 널리 활용됩니다. 이 메서드는 인자로 전달된 객체의 내부 슬롯인 [[Prototype]], 즉 객체가 상속받은 원형 객체를 반환합니다. 만약 객체가 아닌 값이 전달되면 해당 값은 강제로 객체로 변환되며, null 또는 undefined가 전달되면 TypeError가 발생합니다. 기본 문법 Object.getPrototypeOf(o
JavaScript의 getTime() 메서드는 1970년 1월 1일 00:00:00 UTC(유닉스 에포크, Unix Epoch)를 기준으로 현재까지 경과된 시간을 밀리초(millisecond) 단위의 숫자로 반환합니다. 날짜 비교, 시간 차이 계산, 타임스탬프 생성 등 날짜와 시간을 숫자로 다루어야 하는 다양한 상황에서 유용하게 활용됩니다.getTime() 메서드의 주요 특징반환값은 항상 정수형 숫자입니다.Date 객체가 유효하지 않은 경우 NaN을 반환합니다.두 날짜 객체의 getTime() 값을 빼면 두 시점 사이의 시간 차이
JavaScript의 global 속성은 정규 표현식(RegExp) 객체에 g(전역 검색) 수정자가 설정되어 있는지 여부에 따라 true 또는 false를 반환하는 읽기 전용 속성입니다. g 수정자가 설정되어 있으면 정규 표현식이 문자열 전체에서 일치하는 모든 항목을 찾고, 설정되어 있지 않으면 첫 번째 일치 항목만 찾은 후 검색을 중단합니다. 이 속성을 활용하면 코드 실행 중에 특정 정규 표현식이 전역 검색 모드로 동작하고 있는지 손쉽게 확인할 수 있습니다. 다음은 JavaScript global 속성의 사용 예제입니다. 예제
자바스크립트의 History 객체는 사용자가 방문한 URL 목록을 담고 있는 객체로, 이를 활용하면 브라우저의 방문 기록에서 앞으로 또는 뒤로 이동하거나, 목록에 있는 특정 URL을 불러올 수 있습니다.History 객체는 window.history 형태로 접근할 수 있으며, 대표적인 메서드와 속성은 다음과 같습니다.history.length: 현재 세션에서 방문한 페이지 수를 반환합니다.history.back(): 직전 페이지로 이동합니다.history.forward(): 다음 페이지로 이동합니다.history.go(n): 지정한
JavaScript 즉시 실행 함수 표현식(IIFE)이란?즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE)은 정의되는 순간 곧바로 실행되는 자바스크립트 함수입니다. 일반적인 함수와 달리 별도의 호출 과정 없이 선언과 동시에 자동으로 실행되기 때문에, 초기화 작업이나 한 번만 수행하면 되는 로직을 처리할 때 유용하게 사용됩니다.IIFE의 기본 문법IIFE는 함수 표현식을 괄호 ()로 감싸고, 그 뒤에 또 다른 괄호를 붙여 즉시 호출하는 형태로 작성합니다.(function ()
자바스크립트 Infinity 속성이란?자바스크립트의 Infinity(무한대) 속성은 부동 소수점 숫자가 표현할 수 있는 범위를 벗어났을 때 사용되는 특수한 값입니다. 숫자가 부동 소수점의 상한(최댓값)을 초과하면 양의 무한대인 Infinity가 표시되고, 반대로 하한(최솟값)을 벗어나면 음의 무한대인 -Infinity가 표시됩니다.참고로 자바스크립트에서 부동 소수점 숫자가 나타낼 수 있는 최댓값은 약 1.7976931348623157 × 10308입니다. 이 값을 초과하는 연산 결과는 모두 무한대로 처리됩니다.다음은 자바스크립트 I
JSON 배열은 자바스크립트의 배열과 매우 유사한 구조를 가지고 있습니다. JSON에서 배열은 대괄호([])로 표현되며, 문자열, 숫자, 불리언, 객체 등 다양한 타입의 값을 요소로 포함할 수 있습니다. 이 글에서는 자바스크립트 객체 내부에 JSON 배열을 정의하고, 실제로 접근하여 활용하는 방법을 예제와 함께 살펴보겠습니다.JSON 배열의 기본 구조다음은 자바스크립트 객체 안에 JSON 스타일의 배열을 담은 가장 기본적인 예시입니다. sports 속성에는 네 개의 운동 종목이 문자열 배열로 저장되어 있습니다.let obj = {
웹 개발에서 서버로부터 받은 JSON 데이터를 활용해 HTML을 동적으로 생성하는 작업은 매우 흔합니다. 이 글에서는 자바스크립트의 fetch() 메서드를 사용해 JSONPlaceholder API에서 사용자 목록을 가져온 뒤, 그 결과를 HTML 테이블에 렌더링하는 방법을 예제와 함께 살펴봅니다. 참고: JSONPlaceholder는 테스트 및 프로토타이핑 용도로 제공되는 가상의 무료 온라인 REST API입니다. 예제 코드 <!DOCTYPE html> <html lang="en"> <
JSON.parse() 메서드란? JSON.parse() 메서드는 JSON 형식의 문자열을 해석(파싱)하여 그에 대응하는 JavaScript 객체를 생성하는 데 사용됩니다. 서버에서 받아온 데이터나 저장된 JSON 데이터를 코드에서 실제로 다룰 수 있는 객체 형태로 변환할 때 반드시 필요한 메서드입니다. 기본 문법은 다음과 같습니다. JSON.parse(text[, reviver]) text : JSON 형식으로 작성된 문자열입니다. reviver (선택 사항) : 파싱 결과가 반환되기 전에 각 값을 원하는 형태로 변환할 수 있
JavaScript의 JSON.stringify() 메서드는 JavaScript 객체를 JSON 문자열로 변환하는 데 사용됩니다. 웹 서버로 데이터를 전송할 때는 객체를 그대로 보낼 수 없기 때문에, 객체를 문자열 형태로 직렬화하는 과정이 필요하며 이때 JSON.stringify()가 매우 유용하게 활용됩니다. JSON.stringify() 메서드는 다음과 같은 다양한 형태로 사용할 수 있습니다. JSON.stringify(value) : 변환할 객체를 지정합니다. JSON.stringify(value, replacer) : 배열
JavaScript를 사용하여 HTML 요소에서 클래스 이름을 제거하는 것은 매우 간단합니다. 가장 권장되는 방법은 classList.remove() 메서드를 활용하는 것입니다. 이 메서드는 특정 요소의 클래스 목록에서 원하는 클래스를 안전하게 삭제하며, 해당 클래스가 존재하지 않더라도 오류 없이 정상적으로 처리됩니다.classList.remove() 메서드란?classList는 요소의 클래스 속성(class attribute)을 조작하기 위한 편리한 인터페이스입니다. 그 중 remove() 메서드는 지정한 클래스 이름을 요소에서
웹 페이지에서 탭 메뉴나 버튼 그룹을 만들 때, 클릭된 요소만 시각적으로 강조하는 기능은 매우 자주 사용됩니다. JavaScript를 사용하면 클릭한 현재 요소에 활성(active) 클래스를 동적으로 추가하고, 기존에 활성 상태였던 요소에서는 해당 클래스를 제거할 수 있습니다.예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /
JavaScript 객체에서 속성 제거하기 JavaScript 객체에서 특정 속성(property)을 제거하려면 delete 연산자를 사용합니다. delete 연산자는 객체에서 지정한 속성과 해당 값이 함께 삭제되며, 삭제에 성공하면 true를 반환합니다. 기본 문법 delete object.property; 예제 아래 예제는 athlete 객체의 trophies 속성을 delete 연산자로 제거하기 전과 후의 차이를 보여줍니다. <!DOCTYPE html> <html> <body> <h1&
웹 애플리케이션을 개발하다 보면 사용자의 브라우저가 현재 인터넷에 연결되어 있는지 확인해야 하는 경우가 자주 있습니다. 예를 들어 네트워크 연결이 끊겼을 때 사용자에게 알림을 표시하거나, 오프라인 상태에서 데이터를 임시 저장하는 기능을 구현할 수 있습니다.navigator.onLine 속성JavaScript에서는 navigator.onLine 속성을 사용하여 브라우저의 네트워크 연결 상태를 간단하게 확인할 수 있습니다. 이 속성은 불리언(Boolean) 값을 반환합니다.인터넷에 연결되어 있으면 true를 반환합니다.연결이 끊어져 있
JavaScript로 요소 숨김 여부 확인하기웹 개발을 하다 보면 특정 요소가 현재 화면에 표시되고 있는지, 아니면 숨겨져 있는지 확인해야 하는 경우가 자주 발생합니다. 이럴 때 window.getComputedStyle() 메서드를 활용하면 아주 간단하게 확인할 수 있습니다.핵심 원리window.getComputedStyle() 메서드는 해당 요소에 실제로 적용된 모든 CSS 스타일 값을 계산하여 반환합니다. 이 결과에서 display 속성 값이 none이라면 그 요소가 현재 숨겨져 있다는 것을 의미합니다.예제 코드다음은 버튼을
JavaScript의 Symbol.toStringTag는 가장 널리 알려진 내장 심볼(well-known symbol) 중 하나입니다. 이 심볼은 문자열 값을 가지는 프로퍼티로, 객체가 생성되는 시점에 해당 객체에 대한 설명(문자열 태그)을 지정하는 역할을 합니다. Object.prototype.toString() 메서드는 내부적으로 이 심볼의 값을 참조하여 “[object 태그명]” 형태의 문자열을 반환합니다. 일반 객체는 기본적으로 “[object Object]”를 반환하지만, 클래스나 객체에 Symbol.toStringTag
자바스크립트의 Symbol.valueOf() 메서드는 심볼(Symbol) 객체가 감싸고 있는 원시값(primitive value)을 반환합니다. 심볼은 ES6에서 도입된 원시 타입으로, 주로 객체의 고유한 프로퍼티 키를 만들 때 사용됩니다.Symbol.valueOf() 메서드란?Symbol.valueOf()는 자바스크립트 엔진이 객체를 원시값으로 변환할 때 내부적으로 호출하는 메서드입니다. 개발자가 직접 호출하는 경우는 드물지만, 심볼의 원시값에 접근해야 할 때 유용하게 활용할 수 있습니다.다음은 Symbol.valueOf() 메서
웹 애플리케이션에서 자동완성(Auto Complete) 또는 추천(Suggestion) 기능은 사용자 경험을 크게 향상시키는 중요한 요소입니다. 자바스크립트를 활용하면 별도의 외부 라이브러리 없이도 간단하게 이 기능을 구현할 수 있습니다. 아래 예제에서는 HTML의 <datalist> 요소와 자바스크립트의 keyup 이벤트를 조합하여, 사용자가 입력한 값에 따라 옵션 목록을 실시간으로 필터링하는 자동완성 기능을 만들어 보겠습니다. 예제 코드 <!DOCTYPE html> <html> <head&g