자바스크립트의 큐(Queue) 데이터 구조란?큐(Queue)는 스택(Stack)과 어느 정도 유사한 추상 데이터 구조입니다. 하지만 스택과 달리 큐는 양쪽 끝이 모두 열려 있다는 점에서 차이가 있습니다. 한쪽 끝은 항상 데이터를 삽입하는 용도로 사용되고(인큐, enqueue), 반대쪽 끝은 데이터를 제거하는 용도로 사용됩니다(디큐, dequeue).큐는 FIFO(First-In-First-Out, 선입선출) 방식을 따릅니다. 즉, 가장 먼저 저장된 데이터 항목이 가장 먼저 접근·처리됩니다.실생활의 예를 들어보면, 일차선 일방통행 도

자바스크립트의 배열(Array)은 사실 큐(Queue)에 필요한 거의 모든 기능을 이미 제공하지만, 이번 글에서는 직접 나만의 Queue 클래스를 구현해 보겠습니다. 우리가 만들 클래스는 다음과 같은 메서드들을 가집니다.enqueue(element): 큐에 요소를 추가하는 함수dequeue(): 큐에서 요소를 제거하는 함수peek(): 큐 맨 앞(front)에 있는 요소를 반환하는 함수isFull(): 큐가 설정된 요소 개수 제한에 도달했는지 확인하는 함수isEmpty(): 큐가 비어 있는지 확인하는 함수clear(): 큐의 모든

큐(Queue)에 요소를 인큐(enqueue)한다는 것은 배열의 맨 끝에 요소를 추가하는 것을 의미합니다. 컨테이너 배열의 끝을 큐의 꼬리(tail)로 간주하고, 모든 삽입 연산은 이 위치를 기준으로 수행됩니다.enqueue 함수 구현배열의 끝에 요소를 추가하는 것이므로, 자바스크립트의 push() 메서드를 활용하면 간단하게 enqueue 기능을 구현할 수 있습니다. 아래 예제를 살펴보겠습니다.enqueue(element) {     // 큐가 가득 찼는지 확인    &

큐(Queue)에서 디큐(Dequeue)란 큐의 맨 앞(front/head)에 있는 요소를 제거하는 작업을 의미합니다. 큐는 FIFO(First In, First Out, 선입선출) 구조이기 때문에, 가장 먼저 들어온 데이터가 가장 먼저 나가야 하며, 이때 제거되는 위치가 바로 큐의 head입니다.이 글에서는 컨테이너 배열(container array)의 시작 부분을 큐의 head로 간주하고, 모든 연산을 이 기준으로 수행합니다.dequeue 함수 구현하기배열의 시작 부분이 곧 큐의 head이므로, 자바스크립트 배열이 기본 제공하는

큐(Queue)에서 peek란 큐의 맨 앞(head)에 있는 값을 조회하는 동작을 의미합니다. dequeue와 달리 요소를 제거하지 않고 값만 확인할 수 있어, 다음에 처리될 데이터를 미리 살펴봐야 할 때 유용하게 사용됩니다.peek 함수 구현하기peek 함수는 다음과 같이 구현할 수 있습니다.peek() {    if (isEmpty()) {       console.log("Queue Underflow!");       return; &nb

자바스크립트는 배열을 정렬할 수 있도록 강력한 내장 함수를 제공합니다. 기본적으로 sort() 메서드는 요소를 알파벳(문자열) 순서로 정렬합니다.예를 들어 다음과 같습니다.예제let arr1 = ["Zebra", "Bear", "Tiger"];arr1.sort();console.log(arr1);출력[ Bear, Tiger, Zebra ]이번에는 숫자 배열의 예를 살펴보겠습니다.예제let arr1 = [1, 8, 31, 21];arr1.sort();console.log(arr1)

자바스크립트는 배열에서 원하는 요소를 찾을 수 있도록 다양한 내장 함수를 제공합니다. 이번 글에서는 가장 기본적인 함수부터 시작해, 조건에 맞는 객체를 검색하는 고급 메서드까지 차근차근 살펴보겠습니다.1. indexOf() – 가장 기본적인 검색 방법indexOf() 함수는 배열 전체를 순회하면서 찾고자 하는 요소가 있으면 해당 요소의 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다.예제let people = [Harry, Martha, John, Sam]; console.log(people.indexOf(John)) consol

자바스크립트에서 다차원 배열(multidimensional array)은 배열 안에 또 다른 배열을 넣고 싶을 때 사용하는 자료 구조입니다. 복잡한 데이터를 체계적으로 관리할 수 있어 실무에서 매우 유용하게 활용됩니다.다차원 배열이 필요한 이유간단한 예시를 들어보겠습니다. 평일(월요일~금요일) 동안 하루에 네 번, 즉 6시간 간격으로 측정된 온도 데이터를 저장하고 싶다고 가정해 봅시다. 다차원 배열 없이 코드를 작성하면 다음과 같이 요일마다 별도의 변수를 만들어야 합니다.let monday = [35, 28, 29, 31]; let

자바스크립트에서 반복 작업을 처리할 때 가장 기본이 되는 문법이 바로 for 루프입니다. 자바스크립트의 for 루프는 크게 두 가지 형태로 나뉘는데, 하나는 초기화식·조건식·증감식을 사용하는 일반적인 for 루프이고, 다른 하나는 객체의 속성을 순회하는 for...in 루프입니다.1. 기본 for 루프 (초기화 · 조건 · 증감식)가장 널리 사용되는 형태는 for(초기화; 조건; 증감식) 구조입니다. 먼저 초기화문이 한 번 실행되고, 이후 매 반복마다 증감식이 실행된 뒤 조건식을 검사합니다. 조건이 참(true)인 동안 블록 내부의

while 루프란?자바스크립트에서 while 루프는 주어진 조건식(표현식)이 참(true)으로 평가되는 동안 특정 문장 또는 코드 블록을 반복해서 실행하는 제어문입니다. 조건식이 거짓(false)이 되는 순간 반복이 종료되고, 프로그램은 루프 바로 다음에 위치한 코드를 이어서 실행합니다.기본 문법while (조건식) {    // 조건식이 참인 동안 반복 실행될 코드}while 루프는 코드 블록을 실행하기 전에 먼저 조건식을 검사합니다. 따라서 처음부터 조건식이 거짓이라면 블록 내부의 코드는 단

do...while 루프는 while 루프와 거의 같지만, 결정적인 차이가 하나 있습니다. 바로 조건 검사가 루프의 시작이 아닌 마지막에 이루진다는 점입니다. 이 특성 덕분에 do...while 루프는 조건식이처음부터 false로 평가되더라도 루프 본문이 최소 한 번은 무조건 실행됩니다. 반면 일반 while 루프는 조건이 처음부터 false라면 본문이 단 한 번도 실행되지 않습니다. 기본 문법 do {     // 반복 실행할 코드 } while (조건식); 먼저 do 블록 안의 코드를 실행한

자바스크립트는 명시적인 반복문(for, while 등) 외에도 배열을 손쉽게 순회할 수 있는 다양한 반복자(Iterator) 함수를 제공합니다. 이러한 함수들을 잘 활용하면 코드가 더 간결하고 가독성이 높아지며, 버그 발생 가능성도 줄어듭니다. 지금부터 대표적인 반복자 함수들을 하나씩 살펴보겠습니다.1. forEach 함수forEach는 배열의 모든 요소에 대해 인자로 전달된 함수를 실행합니다. 별도의 반환값은 없으며, 단순히 각 요소에 대해 특정 작업을 수행할 때 유용합니다.예제 console.log(person.toUpperCa

스택(Stack)이란?스택은 대부분의 프로그래밍 언어에서 널리 활용되는 추상 자료형(Abstract Data Type, ADT)입니다. 이름 그대로 실제 세계의 쌓아 올린 물건처럼 동작하는데, 카드 한 벌이나 접시 더미를 떠올리면 쉽게 이해할 수 있습니다. 새 접시는 항상 맨 위에 올리고, 꺼낼 때도 맨 위에서부터 꺼내는 방식입니다.LIFO(후입선출) 구조스택은 한쪽 끝(top)에서만 삽입과 삭제가 이루어집니다. 이러한 특성 때문에 스택은 LIFO(Last-In-First-Out, 후입선출) 자료구조로 분류됩니다. 즉, 가장 나중에

자바스크립트의 배열(Array)은 사실 스택에 필요한 거의 모든 기능을 이미 제공합니다. 하지만 자료구조의 동작 원리를 깊이 이해하기 위해, 이번 글에서는 스택을 직접 구현한 Stack 클래스를 만들어 보겠습니다.우리가 만들 클래스는 다음과 같은 메서드를 가집니다.push(element): 스택의 맨 위(top)에 요소를 추가합니다.pop(): 스택 맨 위의 요소를 제거하고 반환합니다.peek(): 스택 맨 위의 요소를 제거하지 않고 반환합니다.isFull(): 스택이 최대 크기에 도달했는지 검사합니다.isEmpty(): 스택이 비

부트스트랩에서 접이식 목록 그룹(Collapsible List Group)을 만들려면 panel-collapse 속성과 list-group 속성을 함께 사용하면 됩니다. 이 조합을 활용하면 클릭 시 목록이 펼쳐지거나 접히는 인터랙티브한 UI를 손쉽게 구현할 수 있습니다.예제목록 항목은 list-group 클래스로 감싸고, 각 항목은 list-group-item 클래스를 사용해 표시합니다. 아래 예제는 패널 헤더의 링크를 클릭하면 기술 목록이 펼쳐지는 구조입니다.<!DOCTYPE html> <html>  

배열(array)은 고정된 개수의 항목을 담을 수 있는 컨테이너형 자료구조로, 일반적으로 동일한 타입의 데이터를 순차적으로 저장합니다. 배열은 여러 데이터를 한 곳에 모아 관리하는 도구이며, 실무에서는 같은 타입의 변수들이 모인 집합으로 이해하면 훨씬 직관적입니다.왜 배열이 필요할까?일주일 동안의 평균 기온을 기록해야 한다고 가정해 보겠습니다. 배열 없이 작성하면 다음과 같이 요일마다 별도의 변수를 만들어야 합니다.let avgTempMon = 35; let avgTempTue = 33; let avgTempWed = 31; let

JavaScript에서 배열(Array)을 생성하는 방법은 여러 가지가 있습니다. 이 글에서는 가장 기본적인 배열 생성 방법부터 실무에서 자주 사용되는 패턴까지 차근차근 살펴보겠습니다.빈 배열 생성하기먼저 빈 배열을 만드는 두 가지 방법입니다.let myArr = [];let myArr = new Array();위의 두 코드 모두 빈 배열을 생성합니다. 결과적으로 동일한 작업을 수행하지만, JavaScript 커뮤니티에서는 첫 번째 방식(배열 리터럴)을 선호합니다. 코드가 더 간결하고 읽기 쉬우며, 작성하기도 편리하기 때문입니다.초

push() 메서드로 배열 끝에 요소 추가하기자바스크립트에서 배열의 맨 끝에 새로운 요소를 추가하려면 push() 메서드를 사용하면 됩니다. push()는 원본 배열을 직접 수정하며, 추가된 후의 배열 길이를 반환합니다.기본 사용 예제다음은 기존 배열에 하나의 요소를 추가하는 간단한 예제입니다.let veggies = [Onion, Raddish]; veggies.push(Cabbage); console.log(veggies);위 코드를 실행하면 다음과 같은 결과가 출력됩니다.[Onion, Raddish, Cabbage]여러 개의

자바스크립트에서 배열의 시작 부분에 요소 추가하기자바스크립트에서 배열의 맨 앞(시작 부분)에 새로운 요소를 추가하려면 unshift() 메서드를 사용하면 됩니다. 이 메서드는 배열의 첫 번째 위치에 하나 이상의 요소를 삽입하고, 변경된 배열의 새로운 길이(length)를 반환합니다.기본 사용 예제다음은 기존 배열의 시작 부분에 Cabbage를 추가하는 간단한 예제입니다.let veggies = [Onion, Raddish]; veggies.unshift(Cabbage); console.log(veggies);실행 결과는 다음과 같습

배열의 원하는 위치에 요소를 추가해야 하는 경우가 종종 있습니다. 하지만 JavaScript는 이 기능을 기본적으로 제공하지 않기 때문에, 직접 함수를 만들어 사용해야 합니다. 이 함수를 Array 프로토타입에 추가하면 모든 배열 객체에서 바로 호출하여 사용할 수 있다는 장점이 있습니다.커스텀 insert 메서드 만들기아래 예제는 Array.prototype에 insert 메서드를 추가하는 코드입니다. 위치 값이 배열 길이보다 크면 맨 뒤에 추가하고, 0 이하이면 맨 앞에 추가하며, 그 외의 경우에는 해당 위치 뒤의 요소들을 한 칸