JavaScript의 unescape() 함수는 인코딩된 문자열을 원래 상태로 디코딩하는 데 사용됩니다. 이 함수는 JavaScript 버전 1.5부터 폐기(deprecated)되었습니다. 따라서 실제 프로젝트에서는 decodeURI() 또는 decodeURIComponent()와 같은 최신 대체 함수를 사용하는 것이 좋습니다.unescape() 함수란?unescape()는 escape() 함수로 인코딩된 문자열을 다시 원본 문자열로 되돌려주는 전역 함수입니다. URL에 포함된 특수 문자나 한글 등을 처리할 때 과거에 많이 사용되었
자바스크립트의 WeakSet은 객체 컬렉션을 저장하기 위한 특수한 자료구조입니다. 일반적인 Set과 마찬가지로 중복된 값을 저장하지 않는다는 공통점이 있지만, WeakSet은 오직 객체만 담을 수 있고 약한 참조(weak reference) 방식으로 값을 보관한다는 점에서 큰 차이가 있습니다. WeakSet의 주요 특징 객체 전용: 숫자나 문자열 같은 원시 값은 저장할 수 없으며, 객체만 추가할 수 있습니다. 약한 참조 유지: WeakSet에 저장된 객체에 대한 외부 참조가 모두 사라지면, 가비지 컬렉터가 해당 객체를 메모리에
자바스크립트에서 숫자는 Number라는 단일 타입으로 처리됩니다. 다른 프로그래밍 언어와 달리 정수와 부동소수점(실수)을 구분하지 않고 하나의 타입으로 표현할 수 있다는 점이 특징입니다. 아래 예제는 자바스크립트에서 숫자를 선언하고, 연산한 뒤 화면에 출력하는 기본적인 방법을 보여줍니다. 예제 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vi
JavaScript에서 객체 접근자(Object Accessor)는 get과 set 키워드를 사용해 객체의 속성에 접근하고 값을 제어하는 강력한 기능입니다.Getter(게터)는 객체의 속성에 접근할 때 자동으로 호출되어 값을 반환하며, Setter(세터)는 인수를 하나 받아 그 값으로 객체 내부의 속성 값을 설정하는 역할을 합니다. 이를 활용하면 속성에 직접 접근하지 않고도 유효성 검사나 가공 로직을 추가할 수 있어 코드의 안정성과 유지보수성이 크게 향상됩니다.JavaScript 객체 접근자 예제아래 예제는 사용자가 입력한 숫자를
자바스크립트 객체 메서드란?자바스크립트에서 객체 메서드(Object Method)는 객체에 대해 수행할 수 있는 동작(action)을 의미합니다. 쉽게 말해, 객체 속성(property)으로 저장된 함수가 바로 메서드입니다.메서드는 일반 함수와 달리 this 키워드를 통해 자신이 속한 객체의 다른 속성이나 메서드에 접근할 수 있다는 점이 큰 특징입니다. 예를 들어 this.name, this.age처럼 객체 내부 데이터를 직접 활용할 수 있습니다.객체 메서드의 기본 구조let person = { name: 홍길동, age:
자바스크립트 객체 속성이란?객체 속성(Object Property)은 자바스크립트에서 객체에 연결된 값들을 의미합니다. 쉽게 말해, 객체는 여러 데이터를 하나로 묶어 관리하는 컨테이너이며, 그 안에 담긴 각각의 이름(name)과 값(value)의 쌍이 바로 속성입니다.예를 들어 { name: Rohan, age: 23 }이라는 객체가 있다면, name과 age가 속성명(키)이 되고, Rohan과 23이 해당 속성의 값이 됩니다.속성에 접근하는 방법객체의 속성값을 읽거나 수정하려면 일반적으로 다음 두 가지 방법을 사용할 수 있습니다.
자바스크립트의 Promise(프로미스)는 생성 시점에 그 결과값이 아직 알려지지 않은 비동기 작업(asynchronous operation)을 처리하기 위해 사용되는 객체입니다. 서버에서 데이터를 요청하거나 시간이 오래 걸리는 작업을 수행할 때, 결과가 준비될 때까지 기다린 후 성공 또는 실패에 따라 후속 동작을 실행할 수 있도록 도와줍니다. Promise의 3가지 상태 Promise 객체는 다음 세 가지 상태 중 하나를 가집니다. Pending(대기) — 비동기 작업이 아직 완료되지 않은 초기 상태입니다. Fulfilled(이
JavaScript의 Proxy 객체는 대상 객체(target)나 함수를 감싸는(wrap) 특수한 객체입니다. 속성 접근, 함수 호출, 값 할당과 같은 기본적인 객체 연산의 동작을 가로채어(intercept), 개발자가 원하는 사용자 정의 로직을 실행할 수 있도록 해줍니다.Proxy는 두 가지 핵심 요소로 구성됩니다.Target(대상) : 프록시가 감쌀 원본 객체 또는 함수Handler(핸들러) : get, set, apply 등 트랩(trap)이라 불리는 메서드를 정의하여 각 연산을 가로채는 역할다음은 JavaScript에서 Pr
자바스크립트에서 무작위 숫자를 생성할 때 가장 많이 사용되는 것이 바로 Math.random() 함수입니다. 이 함수는 0 이상 1 미만 범위의 부동소수점(실수) 난수를 반환합니다. 즉, 0은 포함되지만 1은 포함되지 않습니다.Math.random() 기본 문법Math.random(); // 예: 0.23456789...반환값이 항상 0과 1 사이의 소수이기 때문에, 실무에서는 원하는 범위의 정수를 얻기 위해 곱셈과 Math.floor()를 함께 사용합니다.예제: 1부터 10 사이의 랜덤 숫자 생성다음은 버튼을 클릭하면 1부터 10
웹 개발에서 URL 리디렉션은 사용자를 현재 페이지에서 다른 페이지로 자동으로 이동시키는 기능입니다. JavaScript에서는 window.location.href 속성에 원하는 URL을 할당하는 것만으로 간단하게 리디렉션을 구현할 수 있습니다.아래 예제는 버튼을 클릭하면 www.google.com으로 이동하는 코드입니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport conten
정규 표현식이란?정규 표현식(Regular Expression, 줄여서 RegExp 또는 Regex)은 검색 패턴을 설명하는 일련의 문자입니다. 이 패턴을 활용하면 긴 텍스트 안에서 원하는 문자열을 손쉽게 찾거나, 특정 패턴에 맞는 내용을 다른 문자열로 치환할 수 있습니다.예를 들어 전화번호, 이메일 주소처럼 형식이 정해진 문자열을 검증하거나, 문장 속에서 특정 단어를 모두 찾아 바꾸는 작업에 정규 표현식이 널리 사용됩니다.자바스크립트 정규 표현식 예제다음은 자바스크립트에서 정규 표현식을 사용해 문장 속의 king이라는 단어를 qu
JavaScript의 removeEventListener() 메서드는 addEventListener() 메서드를 사용해 요소에 등록했던 이벤트 리스너를 제거할 때 사용됩니다.removeEventListener() 메서드란?이 메서드는 더 이상 필요하지 않은 이벤트 핸들러를 정리(해제)하여 불필요한 동작을 방지하고 성능을 최적화하는 데 유용합니다. 단, 제거하려면 addEventListener()로 등록할 때 사용한 것과 동일한 함수 참조를 인자로 전달해야 한다는 점에 유의하세요. 익명 함수로 등록한 리스너는 나중에 제거할 수 없습니
웹 개발을 하다 보면 URL에 포함된 GET 매개변수(쿼리 문자열)의 값을 JavaScript로 읽어와야 하는 경우가 자주 있습니다. 예를 들어 ?imageSize=440&color=blue처럼 전달된 값을 화면에 표시하거나 로직에 활용할 수 있습니다.JavaScript에서는 내장 객체인 URL과 URLSearchParams를 사용하면 별도의 라이브러리 없이 간단하게 매개변수 값을 가져올 수 있습니다.핵심 코드 설명new URL(urlString): 문자열 형태의 URL을 URL 객체로 변환합니다.url.searchParams: U
자바스크립트 lastIndex 속성이란?자바스크립트의 lastIndex 속성은 정규식(RegExp) 객체에서 매칭이 발생한 인덱스 위치를 반환합니다. 그리고 다음 매칭은 해당 위치부터 이어서 진행됩니다.중요한 점은 lastIndex 속성이 g(전역) 플래그가 설정된 경우에만 작동한다는 것입니다. g 플래그가 없으면 매칭 위치가 저장되지 않아 lastIndex 값이 갱신되지 않습니다.예제 코드다음은 자바스크립트 lastIndex 속성의 동작을 확인할 수 있는 예제입니다.<!DOCTYPE html> <html lang=
JavaScript에서 length 속성은 객체의 크기를 반환합니다. 배열 객체에 사용하면 요소의 개수를 알려주고, 문자열 객체에 사용하면 문자의 개수를 반환합니다. length 속성의 특징 length는 속성(property)이 아니라 메서드가 아니므로 뒤에 괄호 ()를 붙이지 않습니다. 배열의 마지막 요소는 항상 arr[arr.length - 1]로 접근할 수 있습니다. length 값은 읽기 전용처럼 보이지만 실제로는 값을 변경해 배열 크기를 늘리거나 줄일 수도 있습니다. 다음은 버튼을 클릭할 때 배열의 길이를 화면에 출력
자바스크립트 let 키워드란?2015년 ES6(ECMAScript 2015)에서 도입된 let 키워드는 자바스크립트에서 블록 스코프(block scope)를 가지는 변수를 선언할 수 있게 해주는 핵심 문법입니다. 기존의 var 키워드가 함수 단위 스코프를 따르는 것과 달리, let으로 선언한 변수는 중괄호({})로 묶인 코드 블록 안에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.let과 var의 주요 차이점스코프 : var는 함수 스코프, let은 블록 스코프를 따릅니다.호이스팅 : let은 TDZ(Temporal Dead
JavaScript의 location.protocol 속성은 현재 페이지 URL에서 사용 중인 프로토콜(예: http:, https:, file:)을 문자열 형태로 반환합니다. 웹 개발에서 보안 연결(HTTPS) 여부를 판단하거나, 프로토콜에 따라 서로 다른 동작을 처리해야 할 때 매우 유용하게 활용됩니다. location.protocol 속성이란? location 객체는 현재 문서의 URL 정보를 담고 있는 브라우저 내장 객체로, 그중 protocol 속성은 URL에서 콜론(:)까지의 프로토콜 부분만을 추출해 반환합니다. 대표적
자바스크립트 match() 메서드란? 자바스크립트의 match() 메서드는 문자열 안에서 지정한 정규 표현식(regular expression)과 일치하는 부분을 검색하고, 일치하는 결과를 배열 객체로 반환합니다. 만약 일치하는 결과가 하나도 없다면 null을 반환합니다. 정규 표현식과 함께 사용하면 단순 검색을 넘어 특정 패턴에 맞는 단어나 숫자를 손쉽게 추출할 수 있어, 문자열 처리 작업에서 매우 유용하게 활용됩니다. 기본 문법 str.match(regexp) regexp: 검색에 사용할 정규 표현식 객체입니다. 반환값의
JavaScript의 Math 객체는 숫자에 대한 다양한 수학 연산을 손쉽게 처리할 수 있도록 도와주는 내장 객체입니다. 원주율(π) 같은 수학 상수부터 반올림, 제곱근, 거듭제곱 등 자주 사용되는 수학 함수까지 속성과 메서드 형태로 제공합니다.Math 객체는 생성자(constructor)가 아니기 때문에 new 키워드 없이 Math.round(), Math.sqrt()처럼 바로 호출하면 됩니다.예제 코드다음은 JavaScript Math 객체의 대표적인 메서드를 활용한 예제입니다.<!DOCTYPE html> <ht
JavaScript의 multiline 속성은 정규 표현식 객체에서 m 수정자(modifier)가 설정되어 있는지 여부에 따라 true 또는 false를 반환하는 읽기 전용(read-only) 속성입니다.m 수정자는 여러 줄 모드(multi-line mode)를 활성화하는 역할을 합니다. 이 모드가 활성화되면 앵커 문자인 ^(문자열 시작)와 $(문자열 끝)가 전체 문자열의 시작과 끝뿐만 아니라 각 줄의 시작과 끝에서도 일치하게 됩니다.다음은 JavaScript multiline 속성의 사용 방법을 보여주는 코드입니다 −예