shift()와 pop() 메서드란?자바스크립트 배열에서 요소를 제거할 때 가장 많이 사용되는 메서드가 바로 shift()와 pop()입니다. 두 메서드 모두 원본 배열을 직접 변경(mutation)한다는 공통점이 있지만, 제거하는 요소의 위치가 다르다는 핵심적인 차이가 있습니다.shift() 메서드shift()는 배열의 첫 번째 요소(인덱스 0)를 제거하고, 나머지 요소들을 한 칸씩 앞으로 이동시킨 후 제거된 값을 반환합니다. 만약 배열의 길이(length)가 0이라면 undefined를 반환합니다.pop() 메서드pop()은 배
자바스크립트에서 배열에 새로운 요소를 추가할 때 자주 사용되는 메소드가 바로 push()와 unshift()입니다. 두 메소드 모두 배열에 요소를 추가하지만, 추가되는 위치와 동작 방식에서 중요한 차이가 있습니다.push() 메소드란?push() 메소드는 배열의 맨 끝에 새로운 요소를 추가합니다. 요소를 추가한 후에는 변경된 배열의 길이(length)를 반환하며, 원본 배열을 직접 수정한다는 특징이 있습니다.unshift() 메소드란?unshift() 메소드는 배열의 맨 앞(0번째 인덱스)에 새로운 요소를 추가합니다. 새 요소가 맨
JavaScript에서 함수를 호출할 때는 원하는 만큼 자유롭게 인수를 전달할 수 있습니다. 함수 매개변수의 개수에는 제한이 없으며, 이러한 특성 때문에 JavaScript에서는 다른 언어에서 흔히 볼 수 있는 전통적인 방식의 함수 오버로딩(overloading)이 지원되지 않습니다.arguments 객체란?arguments 객체는 화살표 함수(arrow function)가 아닌 모든 함수 내부에서 사용할 수 있는 지역 변수입니다. 함수 내부에서 arguments 객체를 참조하면 해당 함수가 호출될 때 전달받은 인수들에 접근할 수
딥 복사(deep copy)란 복사 대상 객체 내부에 포함된 모든 중첩 객체까지 하나하나 새롭게 복제하는 것을 의미합니다. 이렇게 만들어진 복사본과 원본 객체는 아무것도 공유하지 않기 때문에, 복사본은 완전히 독립적인 새로운 객체가 됩니다.반면 얕은 복사(shallow copy)는 최상위 속성만 복사하고 내부의 중첩 객체는 원본과 참조를 공유하기 때문에, 한쪽을 수정하면 다른 쪽에도 영향을 미치게 됩니다.JSON을 활용한 가장 간단한 딥 복사 방법가장 손쉬운 방법은 객체를 JSON.stringify()로 문자열로 변환한 뒤, 다시
이벤트 버블링(Event Bubbling)이란?이벤트 버블링은 한 요소가 다른 요소 내부에 중첩되어 있고, 두 요소 모두 동일한 이벤트(예: 클릭)에 대한 리스너를 등록했을 때 이벤트 핸들러가 호출되는 순서를 의미합니다. 버블링 방식에서는 이벤트가 가장 안쪽(자식) 요소에서 먼저 감지되어 처리된 후, 바깥쪽(부모) 요소로 거품이 올라오듯 전파됩니다.이벤트 캡처링(Event Capturing)이란?반대로 캡처링 방식에서는 이벤트가 가장 바깥쪽(부모) 요소에서 먼저 감지되어, 안쪽(자식) 요소로 순차적으로 전파됩니다.그럼 두 방식의 차
JavaScript로 배열을 정렬할 때 자주 사용하는 Array.prototype.sort() 메서드. 그런데 이 함수가 내부적으로 어떤 정렬 알고리즘을 사용하는지 궁금해진 적이 있으신가요? 결론부터 말하자면, ECMAScript 명세는 특정 정렬 알고리즘을 규정하지 않습니다. 구현 방식은 각 JavaScript 엔진 개발자의 선택에 맡겨져 있으며, 그 결과 서로 다른 엔진은 서로 다른 알고리즘을 사용합니다.엔진별 정렬 알고리즘 차이Mozilla (SpiderMonkey)Firefox에 탑재된 SpiderMonkey 엔진은 병합 정
MDN에 따르면, 화살표 함수(arrow function)는 일반 함수 표현식보다 문법적으로 간결한 대안이지만, this, arguments, super, new.target 키워드에 대한 자체 바인딩을 갖지 않는 특징이 있습니다. 따라서 화살표 함수는 메서드로 사용하기에 적합하지 않으며, 생성자로도 사용할 수 없습니다.자바스크립트에서 일반 함수와 화살표 함수 사이에는 크게 세 가지 미묘한 차이가 존재합니다. 하나씩 자세히 살펴보겠습니다.1. 자체적인 this 바인딩이 없음화살표 함수는 자신만의 this 값을 가지지 않습니다. 화살
JavaScript에서 문자열을 정수로 변환할 때는 parseInt() 함수를 사용합니다. 이 함수는 문자열에 숫자가 포함되어 있지 않을 경우 NaN(Not a Number)을 반환합니다. 반대로 숫자가 포함된 문자열이 전달되면 그 숫자만 결과로 반환됩니다. 또한 parseInt()는 공백을 허용하지 않기 때문에, 공백이 포함된 문자열이 전달되면 공백 앞쪽에 있는 숫자 부분만 반환됩니다. 문법(Syntax) parseInt(value); 이 함수는 문자열을 인수로 받아 정수로 변환합니다. 만약 문자열 안에 정수가 존재하지 않는다
자바스크립트에서는 Object.create()라는 내장 메서드를 사용해 기존 객체를 프로토타입으로 삼는 새로운 객체를 만들 수 있습니다. 이 방식을 활용하면 기존 객체가 가진 속성들을 새로 생성된 객체에 그대로 상속할 수 있으며, 필요에 따라 상속받은 값을 덮어써 자신만의 속성을 정의할 수도 있습니다.문법Object.create(기존객체);이 메서드는 인수로 전달된 기존 객체를 프로토타입으로 설정한 새로운 객체를 반환합니다. 즉, 기존 객체의 속성들이 프로토타입 체인을 통해 새 객체로 상속됩니다.예제다음 예제에서는 먼저 person
대부분의 경우 for...in 루프보다 일반적인 for 루프를 사용하는 것이 더 안전합니다. 그 이유는 for...in 루프는 인덱스(index)를 반환하면서, 중간에 비어 있는 인덱스가 있어도 이를 건너뛰고 아무런 알림 없이 지나가기 때문입니다. 반면 일반 for 루프는 값(value)을 출력하고, 비어 있는 인덱스에는 undefined 값이 표시되므로 개발자가 코드를 작성할 때 데이터 구조를 정확히 파악할 수 있어 혼란을 겪지 않습니다.문법(Syntax)1. for...in 루프for (var x in array) { //
\w vs \W: 무엇이 다를까?JavaScript 정규식에서 \w와 \W는 서로 반대되는 역할을 합니다. \w는 영문자, 숫자, 밑줄(_)과 같은 단어 문자(word characters)를 찾는 데 사용되고, \W는 &, ^, % 등 단어 문자에 속하지 않는 비단어 문자(non-word characters)를 찾는 데 사용됩니다. 아래에서 두 패턴의 문법과 실제 활용 예제를 자세히 살펴보겠습니다.문법 1: 단어 문자 찾기new RegExp(\\w, g);위 코드는 JavaScript에서 단어 문자를 찾기 위한 기본 문법입니
\d vs \D: 무엇이 다를까?정규 표현식에서 \d와 \D는 서로 반대되는 역할을 하며 그 차이가 매우 큽니다. \d는 숫자(digit)를 찾아내고, \D는 숫자가 아닌 문자(non-digit), 즉 e, ^ 같은 문자들을 찾아냅니다. 참고로 \d는 [0-9]와, \D는 [^0-9]와 동일한 의미입니다. 이 두 패턴은 일반적으로 전역 플래그(global object)인 g와 함께 사용되어, 텍스트 전체에 걸쳐 일치하는 모든 숫자와 숫자가 아닌 문자를 한 번에 추출할 수 있습니다. 지금부터 자세히 살펴보겠습니다. 구문 1new R
일반 함수와 화살표 함수란?화살표 함수(Arrow Function)는 코드를 더 간결하게 작성할 수 있도록 ES6(ES2015)에서 도입된 문법입니다. 일반 함수와 화살표 함수는 기본적으로 비슷한 방식으로 동작하지만, 몇 가지 중요한 차이점이 존재합니다. 지금부터 그 차이점을 하나씩 살펴보겠습니다.화살표 함수 문법let x = (params) => {// 코드};일반 함수 문법let x = function functionName(params){// 코드};this 키워드의 동작 차이두 함수의 가장 큰 차이는 this의 바인딩
일반 HTML 폼의 동작 방식일반적인 HTML 폼에서는 input 요소가 자체적으로 값을 내부에 보관하며, 제출 버튼을 클릭하면 폼 데이터가 함께 전송됩니다.예제<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name=&quo
JavaScript는 기본적으로 값에 의한 전달(pass by value) 방식으로 동작하는 언어입니다. 다만 객체(Object)의 경우 그 값이 곧 참조(reference)라는 점이 특별합니다. 예를 들어, 함수에 숫자를 인자로 전달한 뒤 함수 내부에서 그 값을 증가시켜도, 호출자 쪽의 원본 값은 변경되지 않습니다.예제: 원시 타입의 값에 의한 전달let i = 0; function increment(x) { x = x + 1; console.log(x); } increment(i); console.log(i);출력
기수 정렬(Radix Sort)은 숫자의 자릿수, 즉 기수(radix)를 기준으로 정수들을 버킷(bucket)에 분배하여 정렬하는 알고리즘입니다. 비교 연산 없이 자릿수를 단계적으로 검사하며 정렬하기 때문에, 데이터가 특정 조건(정수 등)을 만족할 때 매우 효율적인 성능을 보여줍니다. 기수는 배열 값들이 사용하는 진법 체계(10진수라면 0~9)에 따라 결정됩니다.동작 원리기수 정렬은 다음과 같은 과정으로 동작합니다.1. 배열에서 최댓값을 찾아 정렬이 필요한 최대 자릿수를 파악합니다.2. 가장 낮은 자릿수(1의 자리)부터 시작하여 각
JavaScript에서 특정 노드의 첫 번째 자식 노드와 마지막 자식 노드를 가져오려면 각각 firstChild와 lastChild 속성을 사용하면 됩니다. 이 두 속성은 DOM 트리를 탐색할 때 가장 기본적이면서도 자주 쓰이는 도구입니다. 지금부터 각각의 문법과 실제 동작 예제를 통해 살펴보겠습니다.1. firstChild — 첫 번째 자식 노드 가져오기문법node.firstChild;예제아래 예제에는 세 개의 항목을 가진 리스트 노드가 있습니다. firstChild 속성을 사용하면 리스트의 첫 번째 요소를 찾아낼 수 있으며, 그
getElementById()란 무엇인가?getElementById()는 지정한 값과 일치하는 ID 속성을 가진 요소를 반환하는 DOM 메서드입니다. 이 메서드는 HTML DOM에서 가장 널리 사용되는 메서드 중 하나로, 문서 내 요소를 조작하고자 할 때 거의 항상 활용됩니다.만약 지정된 ID를 가진 요소가 존재하지 않으면 null을 반환합니다. 원칙적으로 ID는 페이지 내에서 고유해야 하지만, 만약 동일한 ID를 가진 요소가 여러 개 존재한다면 JavaScript 코드 기준으로 마지막에 등장하는 요소를 반환합니다.예제 1: 요소의
JavaScript 배열의 첫 번째 요소와 마지막 요소 접근하기자바스크립트 배열은 0부터 인덱싱(0-indexed)됩니다. 즉, 첫 번째 요소는 인덱스 0의 위치에 있고, 마지막 요소는 배열 길이 - 1 위치에 있습니다. 따라서 아래와 같이 간단하게 해당 요소들에 접근할 수 있습니다.arr[0] // 첫 번째 요소 arr[arr.length - 1] // 마지막 요소예제let arr = [1, test, {}, hello]; console.log(arr[0]); console.log(arr[arr.length - 1]);출력 결과1
배열(Array)은 여러 개의 요소가 모인 자료구조로, 각 요소는 고유한 인덱스(index) 값을 가지고 있습니다. 이 인덱스를 활용하면 배열 안의 어떤 요소든 자유롭게 접근할 수 있습니다. 다만 마지막 요소의 경우, 배열에 담긴 요소의 총개수를 알기 전까지는 정확한 인덱스를 알 수 없기 때문에 약간의 논리적 처리가 필요합니다. 이번 글에서는 JavaScript 배열의 첫 번째 요소와 마지막 요소를 가져오는 다양한 방법을 살펴보겠습니다.첫 번째 요소 접근하기배열의 인덱스는 항상 0부터 시작하므로, 첫 번째 요소의 인덱스는 이미 알려