JavaScript의 인덱싱된 컬렉션이란?JavaScript에서 인덱싱된 컬렉션(Indexed Collection)이란 각 요소에 숫자 인덱스가 부여되어 있어, 인덱스 값을 통해 개별 요소에 직접 접근할 수 있는 자료구조를 말합니다.JavaScript에서 대표적인 인덱싱된 컬렉션은 바로 배열(Array)입니다. 배열은 0부터 시작하는 인덱스를 사용하며, arr[0], arr[1]처럼 대괄호 표기법으로 원하는 위치의 요소에 손쉽게 접근할 수 있습니다.배열의 주요 특징인덱스는 항상 0부터 시작합니다.length 속성으로 배열의 전체 길
키 컬렉션(Keyed Collections)은 인덱스가 아닌 키(key)를 기준으로 요소가 정렬되는 자료 구조입니다. 본질적으로 연관(associative) 방식으로 동작하며, JavaScript에서는 Map과 Set 객체가 대표적인 키 컬렉션에 해당합니다. 두 객체 모두 요소가 삽입된 순서대로 순회(iterate)할 수 있다는 공통점이 있습니다. Map과 Set의 특징 Map 객체 Map은 키-값 쌍을 저장하는 컬렉션입니다. 일반 객체와 달리 키로 문자열뿐 아니라 객체, 함수 등 어떤 타입의 값도 사용할 수 있으며, 저장된 요소의
웹 애플리케이션의 규모가 커질수록 필요한 시점에 모듈만 불러와 사용하는 동적 로딩(Dynamic Loading)이 중요해집니다. 이 글에서는 JavaScript 모듈을 동적으로 로드하는 기본적인 예제 코드를 소개합니다.참고 − 이 예제는 ES 모듈(ES Module)을 사용하므로, 정상적으로 실행하려면 반드시 localhost 환경의 웹 서버를 통해 페이지를 열어야 합니다. 파일을 직접 더블클릭하여 열면 CORS 정책으로 인해 모듈 로딩이 실패할 수 있습니다.예제 코드먼저 화면을 구성하는 HTML 코드입니다. IMPORT 버튼과 결
JavaScript에서 이벤트 핸들러 함수가 호출되면, 브라우저는 자동으로 이벤트 객체(event object)를 첫 번째 매개변수로 전달합니다. 이 객체 안에는 발생한 이벤트의 유형, 이벤트가 발생한 대상 요소(event.target) 등 유용한 정보가 담겨 있습니다.한 함수에서 받은 이벤트 객체를 다른 함수로 전달하는 방법은 매우 간단합니다. 새로운 함수를 호출할 때 인자(argument)로 이벤트 객체를 그대로 넘겨주면 됩니다. 아래 예제에서는 버튼 클릭 시 changeFont() 함수가 이벤트 객체를 받아 폰트 크기를 변경한
JavaScript에서 객체를 포함하는 배열의 배열(2차원 배열)을 순회하려면 forEach() 메서드를 중첩해서 사용하고, 내부 객체의 각 속성에 접근할 때는 for...in 문을 활용하면 됩니다.아래는 객체를 포함한 배열의 배열을 반복 처리하는 전체 예제 코드입니다.예제<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sca
스택(Stack)은 LIFO(Last In, First Out), 즉 나중에 들어간 요소가 먼저 나오는 방식으로 동작하는 대표적인 선형 자료구조입니다. 데이터의 삽입과 삭제가 한쪽 끝(꼭대기, top)에서만 이루어지며, 이를 JavaScript에서는 배열과 클래스를 활용해 손쉽게 구현할 수 있습니다.이번 글에서는 HTML과 JavaScript를 함께 사용해 스택을 직접 구현하고, 브라우저 화면에서 Push(삽입), Pop(삭제), Display(출력) 연산을 실습해 보겠습니다.전체 예제 코드아래 코드는 입력 필드와 버튼을 통해 스택
큐(Queue)는 FIFO(First In, First Out, 선입선출) 방식으로 동작하는 대표적인 자료구조입니다. 먼저 들어간 데이터가 먼저 나오는 구조로, 작업 대기열 처리나 이벤트 관리 등 다양한 분야에서 활용됩니다. 이번 글에서는 JavaScript의 클래스와 프로토타입을 활용하여 큐를 직접 구현하고, 브라우저에서 동작하는 인터랙티브 예제까지 살펴보겠습니다.JavaScript 큐 구현 예제아래 코드는 입력창에 값을 넣고 버튼을 클릭하면 큐 연산 결과를 화면에 표시하는 완전한 HTML 예제입니다.<!DOCTYPE htm
JavaScript에서 call()과 apply()로 함수 호출하기JavaScript에는 함수를 호출할 때 this 값을 명시적으로 지정할 수 있는 두 가지 강력한 메서드가 있습니다. 바로 call()과 apply()입니다.두 메서드의 핵심 차이점은 인수를 전달하는 방식에 있습니다.call() – 인수를 개별적으로(쉼표로 구분하여) 전달합니다.apply() – 인수를 배열 하나로 묶어서 전달합니다.아래 예제 코드는 call()과 apply()를 사용해 함수를 호출하는 방법을 보여줍니다.예제 코드<!DOCTYPE html>
JavaScript에서 콜백(Callback)으로 함수 전달하기 JavaScript에서 함수는 일급 객체(first-class citizen)로 취급되기 때문에, 변수에 저장하거나 다른 함수의 인자로 자유롭게 전달할 수 있습니다. 이처럼 다른 함수에 인자로 넘겨지는 함수를 콜백(callback)이라고 부르며, 이벤트 처리와 비동기 프로그래밍에서 핵심적인 역할을 담당합니다. 다음은 JavaScript에서 함수를 콜백으로 전달하는 코드입니다. 예제 <!DOCTYPE html> <html lang="en"
JavaScript에서 프로토타입으로 속성 공유하는 방법JavaScript에서는 객체의 prototype 속성에 값을 부착하여 여러 인스턴스가 동일한 속성을 공유하도록 만들 수 있습니다. 생성자 함수로 만든 모든 인스턴스는 프로토타입에 정의된 속성을 자동으로 상속받기 때문에, 공통 데이터를 반복해서 정의할 필요 없이 메모리를 효율적으로 사용할 수 있습니다.예를 들어 학생(Student) 객체마다 이름과 나이는 다르지만, 소속 학교는 모두 같다면 school 속성을 프로토타입에 한 번만 정의하면 됩니다.예제 코드다음은 JavaScri
JavaScript에서 메소드를 여러 객체가 함께 사용하도록 만들고 싶다면, 객체의 prototype 속성에 메소드를 연결하면 됩니다. 이렇게 정의된 메소드는 해당 생성자 함수로 생성된 모든 인스턴스가 공유하게 됩니다.prototype에 메소드를 등록하면 인스턴스마다 메소드가 복사되지 않고 하나의 메소드를 참조하기 때문에, 메모리 사용 측면에서도 효율적이라는 장점이 있습니다.JavaScript에서 메소드를 공유하는 예제 코드아래 코드에서는 Student 생성자 함수의 prototype에 displayInfo 메소드를 추가하여, 두
JavaScript에서 정적 속성(Static Property)은 클래스의 prototype 속성이 아닌, 클래스 함수 자체에 직접 할당되는 속성입니다. 이러한 속성은 객체를 인스턴스화하지 않고도 클래스 이름을 통해 직접 호출할 수 있다는 것이 가장 큰 특징입니다.정적 속성의 핵심 개념정적 속성은 클래스(생성자 함수) 자체에 귀속됩니다.인스턴스 객체에서는 접근할 수 없으며, 오직 클래스 이름으로만 참조 가능합니다.모든 인스턴스가 공유해야 하는 설정값이나 유틸리티 데이터를 저장할 때 유용합니다.예제 코드다음은 JavaScript에서
JavaScript에서 어떤 객체가 특정 클래스의 인스턴스인지 확인해야 하는 경우가 자주 있습니다. 이럴 때 instanceof 연산자를 사용하면 간단하게 확인할 수 있습니다.instanceof 연산자란?instanceof 연산자는 객체가 특정 생성자 함수나 클래스로 생성된 인스턴스인지 검사하고, 그 결과를 불리언 값(true 또는 false)으로 반환합니다. 상속 관계가 있는 경우에도 프로토타입 체인을 따라 올라가며 검사하기 때문에 부모 클래스의 인스턴스 여부도 정확하게 판별할 수 있습니다.예제다음은 Student 클래스의 인스턴
JavaScript에서 배열에 담긴 여러 요소를 하나의 문자열로 변환하고 싶다면 toString() 메서드를 활용할 수 있습니다. 이 메서드는 배열의 모든 요소를 쉼표(,)로 구분하여 하나의 문자열로 합쳐 반환하며, 별도의 인수 없이 간단하게 사용할 수 있다는 장점이 있습니다.예제 코드아래는 버튼 클릭 시 배열(arr)을 문자열로 변환하여 화면에 출력하는 전체 예제입니다.<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <me
JavaScript에서 문자열(string), 숫자(number), 불리언(boolean)과 같은 원시 타입(primitive)은 값(value)을 기준으로 비교됩니다. 반면 네이티브 객체든 사용자 정의 객체든 객체(object)는 참조(reference)를 기준으로 비교됩니다.여기서 참조로 비교한다는 것은 두 개 이상의 객체가 메모리상의 동일한 위치를 가리키고 있는지를 확인한다는 의미입니다. 즉, 객체 내부의 속성값이 완전히 같더라도 서로 다른 메모리 주소에 존재하면 두 객체는 같지 않다고 판단됩니다.JavaScript에서 객체
JavaScript에서 문자열을 객체로 변환하는 가장 일반적인 방법은 JSON.parse() 메서드를 사용하는 것입니다. 이 메서드는 JSON 형식으로 작성된 문자열을 해석(파싱)하여 실제 JavaScript 객체로 반환해 줍니다.단, JSON.parse()가 정상적으로 동작하려면 문자열이 유효한 JSON 형식이어야 합니다. 즉, 모든 키(key)는 반드시 큰따옴표()로 감싸야 하며, 작은따옴표나 키 없이 작성된 문자열은 오류를 발생시킵니다.예제 코드다음은 화면에 표시된 JSON 문자열을 버튼 클릭 한 번으로 JavaScript 객
웹 개발을 하다 보면 JSON 형식의 문자열로 저장된 데이터를 실제 자바스크립트 객체로 변환해야 하는 경우가 자주 발생합니다. 이번 글에서는 JSON.parse() 메서드를 활용하여 문자열 배열을 객체 배열로 손쉽게 변환하는 방법을 예제와 함께 살펴보겠습니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=
JavaScript에서 한 배열이 다른 배열의 모든 요소를 포함하고 있는지 확인해야 하는 경우가 종종 있습니다. 이럴 때 every() 메서드와 includes() 메서드를 함께 사용하면 아주 간단하게 해결할 수 있습니다.핵심 개념 정리Array.prototype.every() — 배열의 모든 요소가 주어진 콜백 함수의 조건을 만족하는지 검사하며, 모두 만족하면 true를 반환합니다.Array.prototype.includes() — 배열에 특정 값이 포함되어 있는지 확인하여 true 또는 false를 반환합니다.두 메서드를 조합하
JavaScript에서 객체 배열에 담긴 속성 이름을 다른 이름으로 바꾸고 싶다면 map() 메서드를 활용하면 됩니다. map()은 기존 배열의 각 요소를 순회하면서 새로운 형태의 객체를 반환할 수 있기 때문에, 속성 이름을 변경한 새로운 배열을 손쉽게 만들 수 있습니다.아래는 JavaScript에서 객체 배열의 속성 이름을 교체하는 예제 코드입니다.예제 코드<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <meta name
JavaScript에서 두 개의 객체를 하나로 합쳐야 하는 경우는 매우 흔합니다. 가장 간단하고 현대적인 방법은 전개 연산자(Spread Operator, ...)를 활용하는 것입니다. 전개 연산자를 사용하면 여러 객체의 속성을 새로운 객체에 손쉽게 복사하여 병합할 수 있습니다.예제 코드다음은 person 객체와 address 객체를 병합하는 전체 예제 코드입니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-