JavaScript에서 중첩 배열(2차원 배열)을 다루다 보면 각 하위 배열의 첫 번째 요소를 기준으로 전체 배열을 정렬해야 하는 경우가 자주 발생합니다. 예를 들어 학생 점수 데이터를 내림차순으로 정렬하거나, 상품 가격순으로 목록을 재배치할 때 유용하게 활용됩니다.예제 데이터 살펴보기다음과 같이 점수와 이름으로 구성된 하위 배열을 포함하는 배열이 있다고 가정해 보겠습니다.var studentDetails = [ [89, John], [78, John], [94, John], [47, John],

웹 개발을 하다 보면 사용자가 입력한 데이터를 브라우저에 저장해 두었다가 나중에 다시 불러와야 하는 경우가 자주 있습니다. 이럴 때 가장 간편하게 활용할 수 있는 것이 바로 localStorage(로컬 스토리지)입니다. localStorage 기본 사용법 localStorage는 키(key)와 값(value)의 쌍으로 데이터를 저장하는 웹 스토리지 API입니다. 사용 방법은 매우 간단합니다. 값 저장하기: localStorage.setItem(키이름, 저장할값) 값 가져오기: localStorage.getItem(키이름) 세션

JavaScript에서 객체의 모든 키를 순회하면서 각 반복마다 하나의 키 값을 null로 설정해야 하는 경우가 있습니다. 이럴 때는 Object.keys() 메서드와 for...of 루프를 함께 사용하면 됩니다.핵심 개념Object.keys()는 객체가 가진 모든 키를 배열 형태로 반환합니다. 이 배열을 for...of 루프로 순회하면서, 전개 연산자(spread operator)를 활용해 원본 객체를 복사한 뒤 해당 반복의 키만 null로 덮어쓰면 됩니다. 이 방식은 원본 객체를 변경하지 않고 새로운 객체를 생성하기 때문에 불변

다음과 같이 같은 문자가 연속해서 반복되는 원본 문자열이 있다고 가정해 보겠습니다.var values = DDAAVIDMMMILLERRRRR;우리의 목표는 반복되는 문자를 제거하고, 각 문자 앞에 해당 문자가 반복된 횟수를 붙여 문자열을 압축하는 것입니다. 이를 위해 replace() 메서드와 정규표현식(Regular Expression)을 함께 사용하면 간단하게 해결할 수 있습니다.예제 코드다음은 전체 코드입니다.var values = DDAAVIDMMMILLERRRRR; var precedingNumbersInString = v

중첩 객체에도 기본 매개변수를 설정할 수 있을까?네, 가능합니다. ES6(ECMAScript 2015)의 구조 분해 할당(Destructuring Assignment)을 활용하면 함수 매개변수로 전달되는 중첩 객체의 각 속성에도 기본값을 손쉽게 지정할 수 있습니다. 이 방식은 호출자가 인자를 생략하거나 일부 속성만 전달했을 때 코드가 안전하게 동작하도록 보장해 줍니다.예제 코드다음 예제는 중첩 객체 cl 내부의 callFunctionName과 values 두 속성에 기본값을 설정하는 방법을 보여줍니다.function callBack

개요HTML 테이블에서 각 <tr> 태그에 부여된 id 속성 값을 읽어와, 같은 행의 맨 앞에 새로운 <td> 셀을 추가하고 그 안에 ID를 표시하는 방법을 알아보겠습니다. 이 작업에는 document.querySelectorAll()과 insertCell() 메서드를 활용합니다.먼저 예제로 사용할 테이블은 다음과 같습니다.<table>    <tr id=StudentDetails>       <th>

JavaScript로 개발을 하다 보면 객체 안에 값이 없는 빈 객체({})가 포함된 경우가 종종 있습니다. 이번 글에서는 이러한 빈 객체를 손쉽게 찾아 제거하는 방법을 알아보겠습니다.문제 상황다음과 같은 객체가 있다고 가정해 보겠습니다.const details = {     name: John,     age: {},     marks: { marks: {} } }위 객체에는 age와 marks 내부의 marks처럼 아무런

JavaScript에서 const 키워드로 선언된 변수는 상수(Constant)입니다. 즉, 한 번 값이 할당되면 프로그램 실행 중에 다른 값을 다시 할당할 수 없습니다. 만약 const 변수에 새로운 값을 재할당하려고 하면 TypeError 오류가 발생합니다.const 변수와 화살표 함수 예제다음과 같이 두 수를 곱하는 화살표 함수(arrow function)를 const 변수에 할당해 보겠습니다.const result = (first, second) => first * second;여기서 result는 상수이므로, 이 변수

JavaScript에서 현재 날짜와 시간을 다룰 때 가장 기본이 되는 것은 Date 객체입니다. 먼저 현재 날짜와 시간을 다음과 같이 가져올 수 있습니다.var currentDateTime = new Date();그런데 실제 개발에서는 밀리초 단위가 아닌 초 단위의 타임스탬프가 필요한 경우가 많습니다. 이럴 때는 getTime() 메서드를 사용한 뒤 1000으로 나누면 됩니다. getTime()은 1970년 1월 1일 00:00:00 UTC(유닉스 에포크)부터 경과한 시간을 밀리초 단위로 반환하기 때문에, 1000으로 나누면 초 단

Python에서는 if a in list 구문으로 리스트 안에 특정 값이 존재하는지 손쉽게 확인할 수 있습니다. 이 표현식은 값이 발견되면 True를, 없으면 False를 반환합니다.JavaScript 배열에서도 동일한 기능을 includes() 메서드를 통해 구현할 수 있습니다. 이 메서드는 배열에 해당 요소가 존재하면 true를, 존재하지 않으면 false를 반환하므로 Python의 in 연산자와 완전히 같은 역할을 합니다.예제 코드다음은 includes() 메서드의 사용 예시입니다.var nameList = [ John

자바스크립트(JavaScript)에서 비밀번호 생성기를 만들려면 Math.random() 메서드를 활용하면 됩니다. Math.random()은 0 이상 1 미만의 난수를 반환하기 때문에, 문자 집합에서 무작위로 글자를 선택하는 데 적합합니다.비밀번호 생성기의 기본 원리먼저 비밀번호에 사용할 문자들을 하나의 문자열로 정의합니다. 여기에는 대문자, 소문자, 숫자를 포함시키고, 반복문을 통해 지정한 길이만큼 무작위 문자를 추출하여 이어 붙이면 됩니다.예제 코드다음은 지정한 길이의 랜덤 비밀번호를 생성하는 전체 코드입니다.function

JavaScript를 활용하면 입력 필드에 값이 입력되었는지 여부에 따라 버튼의 색상을 실시간으로 변경할 수 있습니다. 이번 글에서는 onkeyup 이벤트와 조건문을 활용하여, 텍스트 입력 상태에 따라 버튼의 배경색을 동적으로 바꾸는 방법을 단계별로 알아보겠습니다.1. 기본 마크업 준비먼저 다음과 같은 버튼이 있다고 가정해 보겠습니다.<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</butt

여러 개의 태그가 있을 때, 문서상의 순서를 기준으로 각 태그의 내부 텍스트(innerHTML)를 순차적으로 변경하고 싶다면 document.querySelectorAll() 메서드를 활용하면 됩니다.핵심 원리querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 NodeList 형태로 반환합니다. 이 NodeList는 문서에 나타난 순서대로 정렬되어 있기 때문에, 반복문과 카운터 변수를 함께 사용하면 각 요소에 순번을 부여하듯 내용을 변경할 수 있습니다.예제 코드아래는 버튼을 클릭하면 세 개의 <p>

네, 가능합니다! 자바스크립트에서는 클래스(Class) 개념을 활용하면 사실상 새로운 데이터 유형을 정의할 수 있습니다. 그리고 생성된 객체의 실제 데이터 유형을 확인하고 싶다면 instanceof 연산자를 사용하면 됩니다. instanceof는 객체가 특정 클래스의 인스턴스인지 판별하여 데이터 유형 정보를 알려주는 연산자입니다. 아래 예제 코드는 새로운 데이터 유형(사용자 정의 클래스)을 만드는 방법과, 해당 객체의 데이터 유형을 확인하는 방법을 보여줍니다. 여기서는 기본 typeof만으로는 부족한 상황을 대비해, 데이터 유형을

예제 다음 코드는 JavaScript에서 날짜 값을 원하는 형식으로 변환하는 방법을 보여줍니다. function changeDateFormat(dateValues, addToFront = "") {    return typeof dateValues == "object" ? addToFront + dateValues.toLocaleDateString() : ""; } var currentDate = new Date(); console.log("The c

웹 애플리케이션을 개발하다 보면 사용자가 ESC(Escape) 키를 눌렀을 때 특정 동작을 수행해야 하는 경우가 자주 있습니다. 예를 들어 모달 창이나 팝업을 닫는 기능이 대표적입니다.JavaScript에서는 각 키마다 고유한 키코드(keyCode)가 할당되어 있으며, ESC 키의 키코드는 27입니다. 따라서 키코드 27을 조건으로 검사하면 ESC 키 입력을 손쉽게 처리할 수 있습니다.예제 코드다음은 jQuery를 활용해 문서 전체에 keydown 이벤트를 바인딩하고, 눌린 키가 ESC인지 판별하는 예제입니다.<!DOCTYPE

undefined가 포함된 배열 정렬하기실무에서는 문자열과 undefined가 뒤섞인 배열을 다뤄야 할 때가 종종 있습니다. 예를 들어 다음과 같이 학생 이름과 undefined 값이 함께 들어 있는 배열이 있다고 가정해 보겠습니다.var studentNames = [Mike, undefined, Adam, Bob, undefined, Carol];이 배열에는 네 개의 이름(Mike, Adam, Bob, Carol)과 두 개의 undefined 값이 포함되어 있습니다. 목표는 이름들은 알파벳 오름차순으로 정렬하고, undefined

개요 웹 개발을 하다 보면 여러 개의 div 요소가 있을 때, 사용자가 클릭한 지점이 div 내부인지 외부인지 판단해야 하는 경우가 자주 발생합니다. 예를 들어 모달을 닫거나, 드롭다운 메뉴를 숨기거나, 특정 영역만 선택을 카운트하는 기능 등이 대표적입니다. 이런 조건은 문서 전체에 클릭 이벤트 리스너를 등록한 뒤, DOM의 contains() 메서드를 활용하면 간단하게 구현할 수 있습니다. 핵심 원리 구현 방식은 다음 두 가지 요소로 구성됩니다. 문서 레벨 이벤트 리스너: document.addEventListener(clic

JavaScript에서 현재 날짜와 시간을 12시간제(AM/PM) 형식으로 표시하려면 getHours()와 getMinutes() 메서드로 시와 분을 추출한 뒤, 시간 값이 12 이상이면 PM, 그렇지 않으면 AM으로 판별하면 됩니다.구현 로직getHours()로 24시간제 기준의 시(hour) 값을 가져옵니다.시간이 12보다 크거나 같으면 PM, 미만이면 AM을 지정합니다.% 12 연산으로 12시간제로 변환합니다. 단, 나머지가 0이 되는 자정(0시)과 정오(12시)는 12로 표시해야 합니다.분이 10보다 작으면 앞에 0을 붙여

자바스크립트에서 배열의 length 속성은 단순히 배열의 크기를 확인하는 용도뿐만 아니라, 직접 값을 할당하여 배열을 조작할 수도 있습니다. 이번 글에서는 배열의 길이를 0으로 설정했을 때 어떤 일이 일어나는지 살펴보겠습니다.예제 배열 준비하기먼저 다음과 같은 배열 객체가 있다고 가정해 보겠습니다.var arrayObject = [ John, David, Mike ];length 속성으로 메모리 비우기배열의 length 속성에 0을 할당하면 배열의 모든 요소가 제거되고 해당 요소들이 차지하던 메모리까지 정리됩니