문자열에서 모음 개수 세기영어의 모음은 a, e, i, o, u 다섯 개입니다. 문자열을 처리할 때는 이 모음들이 소문자 또는 대문자 어느 쪽으로든 나타날 수 있다는 점을 반드시 고려해야 합니다.동작 원리다음 예제는 사용자 정의 함수 noOfVowels()를 사용하여 입력 문자열을 읽고, 모음만 담고 있는 문자열(aAeEiIoOuU)과 한 글자씩 비교합니다. 이 과정에서 indexOf() 메서드가 핵심 역할을 합니다.indexOf() 메서드는 찾으려는 문자가 대상 문자열에 존재하면 해당 문자의 인덱스를 반환하고, 존재하지 않으면 -

디바운싱(Debouncing)이란?디바운싱은 불필요하게 시간을 소모하는 연산을 줄여 브라우저 성능을 향상시키는 대표적인 최적화 기법입니다. 어떤 기능은 특정 작업을 수행하는 데 비교적 많은 시간이 걸리는데, 대표적인 예로 이커머스 웹사이트의 검색창을 들 수 있습니다.왜 디바운싱이 필요한가?사용자가 Tutorix 스터디 키트라는 제품을 검색한다고 가정해 보겠습니다. 사용자는 검색창에 제품명을 한 글자씩 입력할 것이고, 글자를 입력할 때마다 브라우저에서 서버로 API 호출이 발생해 필요한 제품 정보를 요청하게 됩니다.Tutorix st

함수 체이닝(Function Chaining)이란?함수 체이닝은 점 표기법(dot notation)을 사용해 여러 함수를 한 줄로 연결해 호출하는 기법입니다. 이 방식은 코드를 훨씬 간결하게 만들어 가독성을 높일 뿐만 아니라, 성능 면에서도 이점을 제공합니다. 이번 글에서는 일반 객체를 활용해 함수 체이닝을 구현하는 방법을 단계별로 살펴보겠습니다.1) 함수 체이닝 없이 작성한 경우아래 예제에서는 먼저 객체 obj를 생성하고, 그 안에서 this 키워드로 i라는 공개 프로퍼티를 선언한 뒤 초기값 0을 할당했습니다. 이어서 같은 객체

JavaScript에서 문자열의 일부를 추출하려면 string.substring() 메서드를 사용합니다. 이 메서드를 활용하면 특정 문자를 기준으로 그 앞이나 뒤에 위치한 문자열의 원하는 부분을 손쉽게 가져올 수 있습니다.str.substring() 메서드란?substring() 메서드는 시작 인덱스(포함)부터 종료 인덱스(제외)까지의 문자열을 잘라내어 반환합니다. 만약 인덱스를 하나만 전달하면 해당 인덱스부터 문자열 끝까지 전체를 잘라냅니다.구문 1: 특정 문자 뒤의 문자열 추출아래 코드를 사용하면 특정 문자 뒤에 있는 문자열 부

객체 리터럴 vs 생성자 함수, 무엇이 다를까? 자바스크립트에서 객체 리터럴(object literal)로 생성된 객체는 싱글톤(singleton)입니다. 이는 해당 객체에 변경이 일어나면 그 변경 사항이 스크립트 전체에 영향을 미친다는 의미입니다. 반면 생성자 함수(constructor function)로 생성된 객체는 여러 개의 독립적인 인스턴스를 가질 수 있어서, 한 인스턴스에서 발생한 변경이 다른 인스턴스에는 영향을 주지 않습니다. 아래에서 각각의 방식을 예제와 함께 자세히 살펴보겠습니다. 1) 객체 리터럴로 생성한 객체 객

전역 네임스페이스 오염(Global Namespace Pollution)전역 네임스페이스를 오염시키면 이름 충돌(name collision)이 발생합니다. 이름 충돌은 여러 JavaScript 라이브러리를 함께 사용하는 대규모 프로젝트에서 매우 흔하게 나타나는 문제입니다. 그렇다면 이름 충돌이 정확히 무엇인지, 왜 위험한지 자세히 살펴보겠습니다.두 팀 A1과 A2가 하나의 프로젝트에 함께 참여하는 상황을 가정해 보겠습니다. 두 팀은 각자 자신만의 JavaScript 파일, 즉 TeamA1.js와 TeamA2.js를 작성했습니다.Te

이벤트 버블링(Event Bubbling)이란?이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, DOM 계층 구조를 따라 상위(포함하는) 요소들로 차례대로 전파되는 현상입니다. 물속에서 거품이 아래에서 위로 떠오르듯 이벤트가 가장 안쪽 요소에서 바깥쪽 요소로 올라가기 때문에 버블링(bubbling)이라는 이름이 붙었습니다.동작 원리 살펴보기다음 예제에는 div, span, button 세 가지 요소가 사용됩니다.계층 구조를 유지하기 위해 button 요소는 span 요소 안에, span 요소는 div 요소 안에 중첩시켜야 합니다.

배열 평면화(Flattening)란? 배열 평면화란 하나의 배열 안에 중첩되어 있는 여러 하위 배열들을 하나의 단일 배열로 병합하는 과정을 말합니다. 예를 들어 [1, 2, [3, 4, [5, 6]], 9]처럼 여러 겹으로 중첩된 구조를 [1, 2, 3, 4, 5, 6, 9]와 같이 평평한 형태로 바꾸는 것이죠. JavaScript에서 배열을 평면화하는 방법은 크게 두 가지로 나눌 수 있습니다. 1) concat.apply() concat() 메서드와 apply()를 조합하면 중첩 배열을 간단하게 병합할 수 있습니다. 다음 예제

이벤트 캡처(Event Capturing)란?이벤트 캡처는 이벤트가 DOM 트리의 최상위 요소에서 시작해 실제 이벤트가 발생한 대상(target) 요소까지 순차적으로 내려오며 전달되는 이벤트 전파 방식입니다. 이는 반대로 대상 요소에서 최상위 요소 방향으로 이벤트가 올라가는 이벤트 버블링(Event Bubbling)과 정반대되는 개념입니다.참고로 DOM의 이벤트 전파는 ① 캡처 단계(최상위 → 대상), ② 타깃 단계(대상 요소 도달), ③ 버블링 단계(대상 → 최상위)의 세 단계로 구성되며, 이벤트 캡처는 그중 첫 번째 단계에 해당

회문(Palindrome)이란?회문(팰린드롬)은 앞에서 읽어도 뒤에서 읽어도 동일하게 읽히는 단어, 문장 또는 숫자를 의미합니다. 예를 들어 말라얄람(Malayalam), madam, nurses run 등이 대표적인 예입니다.여기서는 정규 표현식(Regular Expression)을 활용해 영숫자(alphanumeric) 문자만 허용하도록 구현합니다. 내장 정규식인 \W를 사용하면 이 작업을 손쉽게 처리할 수 있습니다. 참고로 \W는 밑줄(_)을 포함하지 않으므로, 실제 코드에서는 [\W_]처럼 밑줄까지 함께 처리해 주는 것이 좋

JavaScript로 문장의 제목 대소문자 처리하기타이틀 케이스(Title Case)란 문장 내 모든 단어의 첫 글자를 대문자로 변환하고, 나머지 글자는 소문자로 유지하는 방식입니다. 입력된 문자열(문장)은 대문자와 소문자가 뒤섞여 있을 수 있으므로, 이를 일관되게 타이틀 케이스로 바꾸기 위한 알고리즘이 필요합니다.알고리즘문장을 개별 단어로 분리합니다. 이 작업은 string.split() 메서드를 사용하여 수행할 수 있습니다.각 단어의 모든 글자를 string.toLowerCase() 메서드를 사용하여 소문자로 변환합니다.for

삽입 정렬(Insertion Sort)란?삽입 정렬은 배열을 정렬하기 위한 매우 단순한 비교 정렬(comparison sort) 방식입니다. 비교 정렬은 현재 정렬하려는 값을 배열 내 다른 값들과 비교하여 적절한 위치를 찾는 방식으로 동작합니다. 삽입 정렬은 한 번에 한 개의 항목씩 처리하며, 각 항목을 반복적으로 올바른 자리에 배치해 나가므로써 최종적으로 정렬된 배열을 얻습니다.사실 삽입 정렬은 힙 정렬(heap sort)이나 병합 정렬(merge sort) 같은 고급 알고리즘만큼 효율적이지 않으며, 대규모 데이터를 다룰 때는 최

JavaScript에서 긴 문자열을 일정한 크기(n 크기)의 하위 문자열로 나누어야 하는 경우는 생각보다 자주 발생합니다. 예를 들어 데이터를 페이지 단위로 표시하거나, API 요청 시 문자열 길이를 제한해야 할 때 유용합니다. 이를 구현하는 대표적인 방법은 두 가지가 있습니다. 1) 일반적인 방법 (Conventional Method) 이 방법은 for 루프, concat(), 나머지 연산자(%) 등 기본적인 문법만으로 순수하게 로직을 구성하는 방식입니다. 다만 정규식 방법에 비해 유연성이 떨어지는데, 그 이유는 코드를 작성하기

ECMAScript 5는 객체의 수정을 방지할 수 있는 여러 가지 메서드를 도입했습니다. 이러한 예방 조치를 사용하면 실수든 의도든 누구도 객체의 기능을 변경할 수 없도록 보장할 수 있습니다.객체 수정을 막는 3가지 수준의 메서드1) 확장 금지 — Object.preventExtensions()이 단계에서는 새로운 속성이나 메서드를 추가할 수 없지만, 기존 속성이나 메서드에는 접근할 수 있습니다. 또한 해당 객체를 삭제하는 것도 가능합니다. Object.preventExtensions() 메서드가 이 작업을 수행하며, 객체에 새로운

열거 불가능한(Non-enumerable) 속성이란?JavaScript 객체에는 Object.keys() 메서드나 for...in 반복문으로 객체를 순회할 때 나타나지 않는 속성이 존재할 수 있습니다. 이처럼 객체를 열거(순회)할 때 목록에 포함되지 않는 속성을 열거 불가능한(non-enumerable) 속성이라고 부릅니다.열거 불가능한 속성을 만드는 방법열거 불가능한 속성을 생성하려면 Object.defineProperty() 메서드를 사용해야 합니다. 이 메서드는 객체에 새로운 속성을 정의하거나 기존 속성의 동작 방식을 세밀하게

JavaScript에서 두 개 이상의 객체 속성을 동적으로 병합해야 하는 경우는 매우 흔합니다. 대표적인 방법으로 Object.assign() 메서드와 전개 연산자(Spread Operator)를 사용하는 방식이 있으며, 각각의 특징과 주의할 점을 예제와 함께 살펴보겠습니다.1) Object.assign() 메서드Object.assign()은 하나 이상의 소스(source) 객체로부터 모든 열거 가능한 속성 값을 대상(target) 객체로 복사하는 메서드입니다. 병합된 결과인 대상 객체를 반환하며, 원본 대상 객체 자체도 변경(mu

잊어버린 타이머와 콜백(Forgotten Timers/Callbacks)JavaScript에는 두 가지 타이밍 이벤트가 있습니다. 바로 setTimeout()과 setInterval()입니다. 전자는 지정된 밀리초만큼 기다린 후 함수를 한 번 실행하고, 후자는 정해진 시간 간격마다 함수를 주기적으로 반복 실행합니다.객체가 타이머 콜백에 연결되면, 해당 타임아웃이 완료되기 전까지는 객체가 메모리에서 해제되지 않습니다. 특히 setInterval()처럼 스스로를 재설정하며 무한히 반복 실행되는 타이머의 경우, 원본 객체에 대한 외부 참

Set(집합)이란?Set은 ES6(ECMAScript 2015)에서 새롭게 도입된 객체 타입입니다. Set은 중복을 허용하지 않는 고유한 값들의 모음(collection)으로, 문자열이나 숫자 같은 원시 타입(primitive)뿐만 아니라 객체 리터럴이나 배열처럼 복잡한 객체 타입의 값도 저장할 수 있습니다.문법new Set([iterable]);매개변수iterableiterable은 반복 가능한(iterable) 객체로, 이 객체의 요소들이 새로운 Set에 추가됩니다. 만약 iterable이 전달되지 않거나 null 값이 전달되면

퀵 정렬(Quick Sort)이란?퀵 정렬(Quick Sort)은 JavaScript에서 가장 중요하고 널리 사용되는 정렬 알고리즘 중 하나입니다. 평균 시간 복잡도가 O(n log n)으로 매우 효율적이며, 분할 정복(Divide and Conquer) 전략에 기반해 동작합니다.퀵 정렬은 배열에서 임의의 값인 피벗(pivot)을 하나 선택하는 것부터 시작합니다. 그런 다음 배열의 나머지 요소들을 피벗보다 작은 값과 큰 값, 두 그룹으로 나눕니다.이후 피벗보다 작은 그룹과 큰 그룹 각각에 대해 동일한 절차를 반복 적용합니다. 즉,

클로저(Closure)란?클로저는 자바스크립트의 강력한 기능 중 하나입니다. 자바스크립트에서는 함수 안에 또 다른 함수를 정의하는 중첩 함수(nested function)가 허용되며, 내부 함수는 외부(부모) 함수의 변수에 접근할 수 있습니다. 이처럼 내부 함수가 외부 함수의 변수에 접근할 수 있는 현상을 클로저라고 부릅니다.그런데 여기서 문제가 발생합니다. 선언된 변수가 내부 중첩 함수에서 실제로 참조되지 않더라도, 클로저 구조로 인해 해당 변수는 메모리에 계속 남아 있게 됩니다. 이렇게 불필요하게 메모리에 상주하는 변수는 가비지