자바스크립트에서 URL을 다루다 보면 인코딩(부호화)과 디코딩(복호화) 과정이 필요합니다. 이때 사용되는 대표적인 함수가 바로 decodeURI()와 decodeURIComponent()입니다. 두 함수는 이름이 비슷하지만 동작 범위와 용도가 분명히 다르므로, 상황에 맞게 선택해야 합니다. decodeURI()란? decodeURI() 메서드는 encodeURI()로 인코딩된 전체 URI(URL)를 원래 형태로 되돌리는 함수입니다. URL 구조에서 특수한 의미를 가지는 예약 문자(; / ? : @ & = + $ , # 등)는
웹 개발을 하다 보면 사용자가 특정 영역(예: 드롭다운 메뉴, 팝업, 알림창)의 바깥쪽을 클릭했을 때 해당 요소를 자동으로 닫아야 하는 경우가 매우 흔합니다. JavaScript를 활용하면 몇 줄의 코드만으로 이 기능을 간단하게 구현할 수 있습니다. 동작 원리 핵심 아이디어는 다음과 같습니다. 문서 전체(document)에 클릭 이벤트 핸들러를 등록합니다. 클릭 이벤트가 발생하면 e.target.id로 실제로 클릭된 요소를 확인합니다. 클릭된 요소의 id가 대상 div의 id와 다르면, 즉 div 바깥을 클릭했다면 display
JavaScript는 연관 배열을 지원하지 않습니다JavaScript에는 PHP 등 다른 언어에서 볼 수 있는 연관 배열(Associative Array)이 공식적으로 존재하지 않습니다. JavaScript의 배열(Array)은 오직 0부터 시작하는 숫자 인덱스를 기반으로 동작하며, 문자열 키로 요소를 직접 저장할 수 없습니다.다음 예제처럼 배열은 숫자 인덱스를 사용해 요소를 저장하고 접근합니다.예제: 숫자 인덱스 배열<!DOCTYPE html> <html> <body> &nbs
논리 OR 연산자(||)란 무엇인가?JavaScript에서 || 연산자는 논리 OR(logical OR) 연산자입니다. 두 피연산자 중 하나라도 참(0이 아닌 값, truthy한 값)이면 조건식 전체가 참(true)으로 평가됩니다. 반대로 두 피연산자가 모두 거짓(false)일 때만 결과가 false가 됩니다.진리표(Truth Table)피연산자 A피연산자 BA || Btruetruetruetruefalsetruefalsetruetruefalsefalsefalse기본 사용 예제다음은 JavaScript에서 || 연산자를 사용하는 간
자바스크립트에서 논리 AND 연산자(&&)는 두 개의 피연산자가 모두 참(truthy)일 때만 전체 표현식이 true를 반환하는 연산자입니다. 반대로 말하면, 두 피연산자 중 하나라도 거짓(falsy)이거나 0인 값이 있다면 조건은 거짓(false)이 됩니다. 논리 AND 연산자의 진리표 && 연산자의 결과는 피연산자의 조합에 따라 다음과 같이 결정됩니다. a b a && b truetruetrue true
setTimeout()으로 JavaScript 함수 호출 지연하기JavaScript에서 특정 함수의 실행을 일정 시간만큼 늦추고 싶다면 setTimeout() 함수를 사용하면 됩니다. 이 함수는 지정한 시간이 지난 후에 콜백 함수를 한 번 실행해 주는 내장 타이머 메서드입니다.기본 문법setTimeout(functionname, milliseconds, arg1, arg2, arg3...)각 매개변수의 의미는 다음과 같습니다.functionname − 지정된 시간이 지난 후 실행할 함수의 이름 또는 함수 참조입니다.mil
JavaScript에서 곱셈 할당 연산자(*=)는 왼쪽 피연산자에 오른쪽 피연산자를 곱한 후, 그 결과를 다시 왼쪽 피연산자에 할당하는 복합 할당 연산자입니다.즉, a *= b는 a = a * b와 완전히 동일하게 동작합니다. 코드를 더 간결하게 작성할 수 있어 실무에서 자주 활용됩니다.기본 문법x *= y; // x = x * y 와 동일사용 예제아래 코드를 실행하면 곱셈 할당 연산자가 어떻게 작동하는지 직접 확인할 수 있습니다.<html> <body> &nbs
JavaScript에서 선택적 함수 매개변수 선언하기JavaScript에서 선택적(optional) 함수 매개변수를 선언하려면 기본값(default) 매개변수를 사용하면 됩니다. ES6부터 도입된 기본 매개변수 문법은 함수를 호출할 때 해당 인자가 전달되지 않으면 미리 정의된 기본값이 자동으로 사용되도록 해줍니다.기본 매개변수의 동작 원리매개변수 이름 뒤에 등호(=)를 붙이고 기본값을 지정하면 됩니다. 호출 시 인자가 생략되거나 undefined가 전달되면 지정된 기본값이 적용됩니다.예제 코드다음 코드를 직접 실행해 보면서 선택적
JavaScript에서 함수에 개수에 제한 없이 여러 개의 인수를 전달하고 싶다면 arguments 객체를 사용하면 됩니다. arguments 객체란? arguments 객체는 모든 일반 함수 내부에서 자동으로 사용할 수 있는 배열 형태(array-like)의 객체입니다. 함수 호출 시 실제로 전달된 인수들이 순서대로 저장되며, arguments.length로 전달된 인수의 개수를 확인할 수 있습니다. 한 가지 주목할 점은 함수이름.length가 반환하는 값과 arguments.length가 다르다는 것입니다. 전자는 함수를 정의할
iframe 내부에서 부모 창(parent window)에 정의된 JavaScript 함수를 호출해야 하는 경우가 종종 있습니다. 이럴 때 가장 간단하게 사용할 수 있는 방법이 바로 window.top 객체입니다. window.top이란? window.top은 현재 창이 몇 겺의 iframe에 중첩되어 있더라도 항상 최상위 브라우저 창(window)을 참조하는 속성입니다. 따라서 window.top.함수명() 형태로 작성하면 부모 페이지에 정의된 함수를 그대로 실행할 수 있습니다. 기본 사용 예제 아래 코드는 iframe 안에서 링
JavaScript에서 함수 주석 처리의 표준은 무엇일까요?JavaScript에서 함수에 주석을 달 때 업계에서 널리 사용되는 표준은 바로 JSDoc입니다. JSDoc은 /**와 */로 감싸는 문서화 주석(Documentation Comment) 형식으로, 함수의 목적, 매개변수, 반환값 등을 구조적으로 설명할 수 있어 코드 가독성과 유지보수성을 크게 높여줍니다.특히 VS Code와 같은 대부분의 코드 에디터는 JSDoc 주석을 인식하여 자동 완성 기능과 타입 힌트를 제공하기 때문에, 실무 개발 환경에서 사실상의 표준으로 자리 잡았
JavaScript에서 return 문은 선택 사항(optional)입니다. 즉, 함수가 반드시 값을 반환할 필요는 없습니다. 하지만 값을 반환하고 싶다면, return 문은 함수 내부의 마지막 위치에 작성해야 합니다.return 문의 역할예를 들어, 두 개의 숫자를 함수에 전달한 뒤 해당 함수가 두 수의 곱셈 결과를 호출한 프로그램(caller)에 반환하도록 만들 수 있습니다. 이처럼 return 문은 함수 내부에서 계산된 결과를 외부로 전달하는 핵심 역할을 담당합니다.또한 return 문이 실행되면 함수의 실행이 즉시 종료되기
JavaScript에서 JSON 객체를 파싱하는 방법JavaScript에서 JSON 형식의 문자열을 실제 객체로 변환하려면 내장 메서드인 JSON.parse()를 사용합니다. 이 메서드는 JSON 문자열을 인자로 받아 해당 구조를 그대로 반영한 JavaScript 객체를 반환합니다.아래 예제는 JSON 문자열을 파싱한 뒤, 각 이벤트의 start와 end 값을 Date 객체로 변환하여 배열에 담고, 그 결과를 다시 JSON 문자열로 출력하는 코드입니다.예제 코드<!DOCTYPE html> <html>
JavaScript 동등 연산자의 두 가지 종류JavaScript에는 값의 일치 여부를 확인하는 두 가지 동등 연산자가 있습니다. 바로 이중 등호(==)와 삼중 등호(===)입니다. 두 연산자는 이름은 비슷하지만 동작 방식에 중요한 차이가 있으며, 이 차이를 이해하는 것은 버그 없는 코드를 작성하는 데 필수적입니다.이중 등호(==): 추상적 동등 비교이중 등호(==)는 추상적 동등 비교 연산자입니다. 비교를 수행하기 전에 피연산자들의 타입을 강제로 변환(타입 강제 변환, type coercion)하여 같은 타입으로 맞춘 뒤 값을 비
JavaScript에서 함수를 정의하는 방법은 크게 두 가지입니다. 바로 함수 선언문(Function Declaration)과 함수 표현식(Function Expression)인데요. 두 방식은 작성 문법부터 호이스팅(hoisting) 동작까지 여러 차이가 있어, 상황에 맞게 올바르게 사용하는 것이 중요합니다. 이번 글에서는 각 방식의 특징과 예제 코드를 통해 차이점을 자세히 살펴보겠습니다. 함수 선언문(Function Declaration) 함수 선언문은 function 키워드로 시작하여 함수를 선언하는 가장 기본적인 방식입니다.
JavaScript에서 날짜에 특정 개월 수를 더하려면 먼저 getMonth() 메서드로 현재 월 값을 가져온 뒤, 여기에 원하는 개월 수를 더하면 됩니다. 이 방법은 현재 날짜가 몇 월인지 확인하고 다음 달 또는 이후 달의 숫자를 계산할 때 유용합니다.기본 예제아래 코드를 실행하면 현재 날짜가 출력되고, 이어서 월 값에 1을 더한 결과를 확인할 수 있습니다.<!DOCTYPE html> <html> <body> <script> &
JavaScript에서 특정 값이 유효한 숫자인지 검사하려면 isNaN() 함수를 사용하면 됩니다. 이 함수는 전달된 값이 숫자인지 아닌지를 판별하며, 결과가 true라면 해당 값이 숫자가 아니라는 의미입니다.isNaN() 함수의 동작 원리isNaN()은 is Not a Number의 약자로, 이름 그대로 값이 숫자가 아닌지(NaN 여부)를 확인하는 함수입니다.반환값이 true → 값이 숫자가 아님반환값이 false → 값이 유효한 숫자임예제 코드아래 코드는 각 값에 대해 false를 반환합니다. 즉, 두 값 모두 유효한 숫자라는
JavaScript에서 문자열을 정수(숫자)로 변환하려면 parseInt() 메서드를 사용합니다. 이 메서드는 문자열의 시작 부분부터 숫자를 읽어 정수 형태로 반환하며, 만약 입력된 값이 숫자로 변환될 수 없는 경우 NaN(Not a Number)을 반환합니다.parseInt() 기본 문법parseInt(string, radix);string: 변환할 문자열입니다.radix (선택 사항): 진법을 나타내는 값으로, 2부터 36까지 지정할 수 있습니다. 예를 들어 10을 지정하면 십진수로 해석합니다.예제 코드아래 예제를 실행하면 버튼
JavaScript에서 URL을 디코딩하려면 decodeURI() 메서드를 사용하면 됩니다. 이 메서드는 encodeURI() 함수로 인코딩된 URI를 원래의 읽기 가능한 형태로 되돌려 주며, 공백(%20)처럼 퍼센트 인코딩으로 변환된 문자들을 다시 복원합니다.예제아래 예제에서는 먼저 encodeURI()로 URI를 인코딩한 뒤, decodeURI()로 다시 디코딩하여 두 결과를 화면에 출력합니다. 버튼을 클릭하면 결과를 바로 확인할 수 있습니다.<!DOCTYPE html> <html> &
JavaScript에서 증감 연산자(++, --)를 피해야 하는 이유JavaScript의 증가(++) 및 감소(--) 연산자는 코드를 짧게 작성할 수 있다는 장점이 있지만, 예상치 못한 결과를 초래할 수 있어 사용을 피하는 것이 좋습니다. 주요 이유를 살펴보겠습니다.1. 대입문에서 혼동을 일으킬 수 있음전위 연산자(++a)와 후위 연산자(a++)는 값이 대입되는 시점이 다르기 때문에, 대입문에서 사용하면 의도하지 않은 결과가 발생할 수 있습니다.예제<html> <body> <script> var a