문제 소개다음과 같이 고객(customer)과 프로젝트(project) 정보를 담은 객체 배열이 있다고 가정해 보겠습니다.const arr = [ { "customer": "Customer 1", "project": "1" }, { "customer": "Customer 2", "project": "2" }, { "customer
JavaScript에서 객체 내부의 중첩된 키(nested key)에 접근하는 방법은 크게 두 가지가 있습니다.예를 들어 다음과 같은 객체가 있다고 가정해 보겠습니다.const obj = { object: { foo: { bar: { ya: 100 } } } };중첩된 프로퍼티 ya에 접근하거나 값을 수정하려면 아래 두 가지 방식을 사용할 수 있습니다.방법 1 — 대괄호 표기법obj[object][foo][bar][ya
두 개의 객체를 인수로 전달받아, 두 객체 모두에 존재하면서 값까지 서로 같은 공통 키(key)만 모아 배열로 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.구현 아이디어핵심 로직은 다음 세 단계로 정리할 수 있습니다.Object.keys()로 첫 번째 객체의 모든 키를 추출합니다.filter()를 사용해 각 키가 두 번째 객체에도 존재하는지(hasOwnProperty) 확인하고, 두 객체에서 해당 키의 값이 일치(===)하는지 검사합니다.조건을 통과한 키들만 모아 새로운 배열로 반환합니다.코드 예제const o
JavaScript 개발을 하다 보면 두 개의 배열을 비교해서 특정 조건에 맞는 요소만 추출해야 하는 경우가 자주 발생합니다. 이번 글에서는 숫자 리터럴 배열과 객체 배열이 주어졌을 때, 객체의 특정 키 값이 리터럴 배열에 존재하는 요소만 골라내는 방법을 예제와 함께 살펴보겠습니다. 문제 상황 다음과 같이 두 개의 배열이 있다고 가정해 보겠습니다. 하나는 단순한 숫자 값의 배열이고, 다른 하나는 city 키를 가진 객체들의 배열입니다. const source = [1, 2, 3, 4, 5]; const cities = [{ ci
문제 개요 첫 번째 인수로 숫자 배열을, 두 번째 인수로 목표 합계(target sum)를 받는 함수를 작성해야 합니다. 함수는 배열을 순회하면서 서로 다른 두 값의 합이 목표 합계와 일치하는 고유한 숫자 쌍을 모두 찾고, 마지막에는 해당 값들이 위치한 인덱스를 모두 더한 결과를 반환해야 합니다. 단, 자기 자신과 자신을 더하는 경우(예: 3 + 3)는 제외합니다. 여기서 고유한 쌍이라는 조건이 핵심입니다. 한 번 어떤 쌍에 사용된 값은 다른 쌍에 다시 사용될 수 없으며, 배열에 같은 값이 여러 개 있을 경우에는 아직 사용되지 않은
데이터를 다루다 보면 특정 키 값을 기준으로 JSON 배열을 재구성해야 하는 경우가 자주 발생합니다. 예를 들어, 다음과 같은 JSON 배열이 있다고 가정해 보겠습니다.const arr = [{ "data": [ { "W": 1, "A1": "123" }, { "W": 1, "A1": "456" },
다음과 같이 키가 모두 대문자로 작성된 객체가 있다고 가정해 보겠습니다.var details = { STUDENTNAME: John, STUDENTAGE: 21, STUDENTCOUNTRYNAME: US }위 객체를 보면 모든 키가 대문자로 되어 있는 것을 확인할 수 있습니다. 이 키들을 소문자로 일괄 변환하려면 toLowerCase() 메서드를 활용하면 됩니다.예제 코드다음은 Object.keys()와 toLowerCase()를 조합하여 객체의 모든 키를 소문자로 변환하는 코드입니다.var details =
HTML 입력 필드에서 가져온 값은 기본적으로 문자열(string)입니다. 따라서 이 값을 숫자로 활용하려면 반드시 형 변환이 필요합니다. 문자열을 정수로 변환할 때는 JavaScript의 parseInt() 함수를 사용하는 것이 가장 일반적이고 간단한 방법입니다.구현 예제다음은 사용자가 입력한 값을 받아 정수인지 검사한 후, 콘솔에 결과를 출력하는 전체 코드입니다.<!DOCTYPE html> <html lang="ko"> <head> <meta char
문자열 안에 있는 특정 텍스트들이 해시(#) 같은 특수 문자로 감싸져 있고, 이 부분을 실제 값으로 교체해야 하는 경우가 종종 있습니다. 이럴 때 정규식과 함께 replace()
문제 개요정수로 이루어진 배열이 주어졌을 때, 이 배열 안에서 홀수 번 나타나는 단 하나의 요소를 찾아 반환하는 함수를 작성해야 합니다. 문제의 전제 조건상, 홀수 번 등장하는 정수는 항상 하나만 존재한다고 가정합니다.예를 들어 대부분의 숫자는 짝수 번(두 번, 네 번 등) 등장하지만, 단 하나의 숫자만 세 번, 다섯 번처럼 홀수 번 나타나는 경우가 그 대표적인 예입니다.접근 방법이 문제는 배열을 먼저 오름차순으로 정렬한 뒤 해결할 수 있습니다. 정렬이 완료되면 같은 값들이 서로 인접하게 배치되므로, 배열을 한 번만 순회하면서 각
문제 정의문자열 하나와 임의 개수의 구분자(separator) 문자들을 인수로 받아, 지정된 모든 구분자를 기준으로 문자열을 나눈 배열을 반환하는 JavaScript 함수를 작성해야 합니다.예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.const str = rttt.trt/trfd/trtr,tr;구분자가 슬래시(/), 마침표(.), 콤마(,)라면,const sep = [/, ., ,];함수는 다음과 같은 배열을 반환해야 합니다.const output = [ rttt, trt, trfd, trtr, tr ];방법 1: 반복
이 글에서는 두 개의 2차원 숫자 배열(행렬)을 인자로 받아 행렬 곱셈 결과를 반환하는 JavaScript 함수를 작성하는 방법을 알아봅니다.행렬 곱셈의 기본 원리행렬 곱셈은 첫 번째 행렬의 열 개수와 두 번째 행렬의 행 개수가 같을 때만 가능합니다. 예를 들어 X×Z 크기의 행렬과 Z×Y 크기의 행렬을 곱하면 X×Y 크기의 결과 행렬이 만들어집니다.먼저 예제로 사용할 두 개의 행렬을 살펴보겠습니다.// 5 x 4 크기의 행렬 a let a = [ [1, 2, 3, 1], [4, 5, 6, 1], [7, 8,
get 키워드는 C#, Java 등 다른 프로그래밍 언어에서와 마찬가지로 JavaScript에서도 게터(getter) 함수로 사용할 수 있습니다. 게터는 객체의 속성 값을 읽을 때 자동으로 호출되는 특별한 메서드입니다. 클래스 내부에서 get 키워드를 활용하면 메서드를 일반 속성처럼 접근할 수 있어 코드가 더 직관적이고 깔끔해집니다. 즉, 괄호()를 붙여 함수를 호출하는 대신 변수에 접근하듯이 값을 가져올 수 있습니다. 기본 문법 클래스 안에서 get 키워드는 다음과 같이 정의합니다. class Employee { &n
날짜 데이터에서 연도가 19처럼 두 자리 숫자로만 표현되어 있을 때, 이것이 1900년대인지 2000년대인지 어떻게 판단할 수 있을까요? 이럴 때 삼항 연산자(ternary operator)를 사용하면 특정 조건에 따라 올바른 세기를 손쉽게 결정할 수 있습니다.예제 코드다음은 기준 연도 값을 정해두고, 그보다 큰 연도에는 2000년대 접두사를 붙이는 방식으로 세기를 판별하는 코드입니다. yearRangeValue ? 20 + year : 18 + year; return new Date(date + - + month + - +
개요JavaScript로 개발하다 보면 배열 안의 여러 요소를 특정 기준에 따라 하나로 병합해야 하는 경우가 종종 발생합니다. 예를 들어, 숫자들 사이에 구분자가 섞여 있는 배열을 그대로 두지 않고, 구분자 단위로 묶인 숫자들을 각각 하나의 값으로 합치고 싶을 수 있습니다.이번 글에서는 join(), split(), filter(), map() 메서드를 조합하여 배열 내부의 특정 요소를 손쉽게 병합하는 방법을 알아보겠습니다.문제 상황다음과 같은 배열이 있다고 가정해 보겠습니다.var values = [7,5,3,8,9,/,9,5,8
JavaScript에서 객체 내부의 문자열 타입 속성을 배열 형태로 감싸고 싶다면 Object.keys()와 reduce()를 함께 활용하면 됩니다. 여기에 결과를 이어 붙이기 위한 concat() 메서드까지 조합하면 깔끔하게 처리할 수 있습니다.동작 원리Object.keys()는 객체의 모든 키를 배열로 반환하고, reduce()는 각 키를 순회하며 새로운 객체를 만듭니다. 이 과정에서 [].concat(값)을 사용하면 값이 이미 배열인 경우 그대로 유지되고, 문자열처럼 배열이 아닌 경우에는 자동으로 배열로 감싸집니다.예제 코드다
JavaScript에는 다른 언어와 달리 별도의 연관 배열(associative array) 자료형이 존재하지 않습니다. 대신 객체(Object)를 활용하면 키와 값을 연결하는 연관 배열과 동일한 구조를 손쉽게 만들 수 있습니다.배열의 요소를 키로, 배열 인덱스를 값으로 사용하는 객체를 만들려면 forEach() 메서드와 대괄호 [] 계산된 속성명(computed property name)을 함께 사용하면 됩니다.예제 코드다음은 이름 배열을 순회하면서 각 이름을 키로, 해당 인덱스를 값으로 갖는 객체를 생성하는 코드입니다.var r
JavaScript에서 날짜와 시간을 다룰 때, 기존 시간 값에 특정 시간을 더해야 하는 경우가 자주 발생합니다. 이 글에서는 new Date() 객체와 setHours(), getHours() 메서드를 활용해 시간을 손쉽게 추가하는 방법을 알아보겠습니다.1단계: Date 객체 생성먼저 날짜 문자열을 사용하여 새로운 Date 객체를 생성합니다.var dateValue = new Date(2021-01-12 10:10:20);Date 생성자에 날짜/시간 형식의 문자열을 전달하면 해당 값을 가진 Date 객체가 만들어집니다.2단계: s
개요JavaScript에서 마우스 버튼을 누르는 순간 즉시 이벤트를 발생시키고 싶다면, addEventListener() 메서드와 함께 mousedown 이벤트를 사용하면 됩니다.일반적인 click 이벤트는 마우스 버튼을 눌렀다가 뗐을 때(mouseup) 발생하지만, mousedown 이벤트는 버튼을 누르는 즉시 트리거됩니다. 버튼 클릭에 대한 빠른 반응이 필요한 드래그 앤 드롭, 게임 컨트롤, 실시간 인터랙션 등에서 유용하게 활용할 수 있습니다.예제 코드다음은 mousedown 이벤트를 활용한 전체 코드입니다.<!DOCTYP
객체 배열을 다루다 보면 배열 내부의 속성 값에 중복된 데이터가 포함되어 있는 경우가 있습니다. 이번 글에서는 map()과 Set을 활용해 배열 안의 중복 속성 값을 손쉽게 제거하는 방법을 알아보겠습니다.문제 상황먼저 다음과 같은 학생 정보 배열이 있다고 가정해 보겠습니다.var details = [ { studentName: John, studentMarks: [78, 9