JavaScript에서 객체로 이루어진 배열이 있을 때, 특정 조건에 맞는 값만 골라서 가져와야 하는 경우가 자주 있습니다. 예를 들어 직원 목록에서 이름이 John인 사람만 찾고 싶다면 어떻게 해야 할까요? 이번 글에서는 for 반복문을 활용해 객체 배열에서 원하는 값을 추출하는 방법을 알아보겠습니다.예제 데이터: 객체 배열 만들기먼저 아래와 같이 직원 정보를 담은 객체 배열이 있다고 가정해 보겠습니다.const details = [ { employeeFirstName: John, employe
다음과 같은 두 개의 객체가 있다고 가정해 보겠습니다.var object1 = { firstName: David }; var object2 = { firstName: David };겉보기에는 두 객체가 완전히 동일해 보이지만, 비교 연산자(== 또는 ===)로 비교하면 false가 반환됩니다. 그 이유는 JavaScript에서 객체는 값을 직접 비교하는 것이 아니라 참조(reference), 즉 메모리 주소를 기준으로 비교하기 때문입니다. object1과 object2는 내용은 같지만 서로 다른 메모리 공간에 저장된 별개의 객체이므
JavaScript에서 const 키워드로 선언된 변수는 새로운 값으로 재할당할 수 없습니다. 따라서 한 번 정의된 객체에 다른 객체를 할당하려고 하면 에러가 발생하고, 원래 값은 그대로 유지됩니다.const로 객체 정의하기먼저 const 키워드를 사용해 다음과 같이 객체 변수를 정의해 보겠습니다.const details1 = { firstName: David, subjectDetails: { subjectName: JavaScript } }예제 코드아래 예제는 스프레드 연산자(...)를 사용해 기존 const 객체를
JavaScript에서 배열 안에 특정 단어가 포함되어 있는지 확인하려면 includes() 메서드를 사용하면 됩니다. 이 메서드는 문자열이나 배열에 특정 값이 존재하는지 검사한 후, 결과를 true 또는 false로 반환합니다.예제 데이터 준비먼저 검색 대상이 되는 문장을 담은 배열을 살펴보겠습니다.var sentence = [My Name is John Smith. My Favourite Subject is JavaScript. I live in US. I like Hockey];다음으로, 위 문장에서 찾고 싶은 키워드들을 담은
프롬프트(prompt)로 두 개의 값 입력받기 JavaScript에서는 prompt() 메서드를 사용해 사용자로부터 값을 입력받을 수 있습니다. 예를 들어 두 개의 값을 입력받는 코드는 다음과 같습니다. var firstvalue = parseInt(prompt(Enter the value1)); var secondvalue = parseInt(prompt(Enter the value2)); parseInt()는 prompt()로 입력받은 문자열을 정수로 변환하는 함수입니다. 이 함수를 생략하면 값이 문자열로 취급되어 곱셈과 같은
JavaScript에서 JSON 데이터를 다룰 때 불필요한 속성을 제거해야 하는 경우가 자주 발생합니다. 이때 delete 키워드를 사용하면 간단하게 해결할 수 있습니다.예제용 JSON 데이터 준비먼저 다음과 같은 JSON 배열이 있다고 가정해 보겠습니다. 고객 정보 네 개가 담겨 있는 배열입니다.var details = [ { customerName: Chris, customerAge: 32 }, { customerName: David, customerAge: 26
JavaScript에서 정수 배열을 문자열 배열로 변환하려면 map(String) 메서드를 사용하면 됩니다. map()은 배열의 각 요소에 지정된 함수를 적용한 결과로 새로운 배열을 반환하며, 여기에 내장 객체인 String을 전달하면 각 숫자가 손쉽게 문자열로 변환됩니다.먼저 다음과 같은 정수 배열이 있다고 가정해 보겠습니다.var integerValues = [101, 50, 70, 90, 110, 90, 94, 68];이 정수 배열을 문자열 배열로 변환하는 코드는 다음과 같습니다.var stringValues = integer
JavaScript에서 아주 큰 숫자를 안전하게 저장하려면 + 연산자 대신 BigInt()를 사용해야 합니다. + 연산자로 문자열을 숫자로 변환하면 Number 타입의 한계 때문에 정밀도 손실(precision loss)이 발생할 수 있습니다.JavaScript의 Number 타입은 IEEE 754 배정밀도 부동소수점 방식을 사용하며, 안전하게 표현할 수 있는 최대 정수는 2^53 − 1(약 9,007조)입니다. 이 범위를 초과하는 값은 뒤쪽 자릿수가 부정확해질 수 있습니다. 반면 BigInt는 임의의 크기를 가진 정수를 정확하게
JavaScript에서 어떤 값이 백분율(%) 형식인지 확인해야 하는 경우가 종종 있습니다. 예를 들어 다음과 같은 값이 있다고 가정해 보겠습니다.var value = 97%;이 값이 올바른 백분율 형식인지 확인하려면 정규 표현식(Regular Expression)을 사용하는 것이 가장 간단하고 효과적인 방법입니다.정규 표현식 패턴 설명여기서 사용할 정규 표현식은 /^\d+(\.\d+)?%$/입니다. 각 부분의 의미는 다음과 같습니다.^ : 문자열의 시작을 의미합니다.\d+ : 하나 이상의 숫자가 와야 함을 의미합니다.(\.\d+)
개요JavaScript에서 객체의 키 값을 기준으로 숫자를 반복 처리하고, 그 결과를 새로운 배열로 만들어야 하는 경우가 종종 있습니다. 예를 들어 다음과 같이 객체 값으로 구성된 숫자 데이터가 있다고 가정해 보겠습니다.var numberObject = { 2: 90, 6: 98 }이럴 때 Array.from() 메서드를 활용하면 아주 간단하게 해결할 수 있습니다.Array.from()을 활용한 해결 방법Array.from()은 유사 배열 객체(array-like object)를 기반으로 새로운 배열을 생성하는 메서드입니다. 두 번
웹 개발을 하다 보면 DOM(Document Object Model)과 관련된 변수의 값을 확인해야 할 때가 많습니다. 이럴 때 console.log()와 document.getElementById() 메서드를 함께 사용하면 간단하게 해결할 수 있습니다.콘솔에 변수를 표시하려면 document.getElementById()를 사용하여 해당 요소를 가져온 뒤 출력하면 됩니다.예제 코드다음은 전체 코드 예시입니다.<!DOCTYPE html> <html lang=ko> <head> <meta
JavaScript에서 생성자 함수 내부에 내부 함수(inner function)를 정의하면 어휘 범위(lexical scope) 때문에 예상치 못한 문제가 발생할 수 있습니다. 내부 함수 안에서 this를 그대로 참조하면, 호출 시점에 따라 의도했던 객체가 아닌 전역 객체(global object)나 undefined를 가리키게 됩니다.해결 방법: this 키워드와 별도 변수 활용이 문제를 해결하려면 this 키워드의 개념을 활용하면 됩니다. 핵심은 객체 자신의 값을 담아둘 별도의 변수를 선언하고, 내부 함수 안에서는 그 변수를
삼항 연산자(ternary operator) 대신 if-else 문을 사용하면 동일한 결과를 얻을 수 있습니다. 삼항 연산자는 간결하지만, 조건이 복잡해지면 가독성이 떨어질 수 있기 때문에 상황에 따라 if-else가 더 적합합니다.먼저 비교할 두 개의 숫자 변수가 있다고 가정해 보겠습니다.var number1=12;var number2=12;if-else 문으로 조건 비교하기두 값이 같은지 비교할 때, 삼항 연산자 대신 다음과 같이 if-else 문을 사용할 수 있습니다.if(number1==number2) &
JavaScript에서 어떤 값이 정수(Integer)인지 아니면 부동 소수점(Float)인지 판별해야 하는 경우가 자주 있습니다. 예를 들어 다음과 같은 변수가 있다고 가정해 보겠습니다.var value1 = 10; var value2 = 10.15;Number()를 활용한 float 여부 확인숫자가 부동 소수점인지 확인하려면 Number() 조건을 활용할 수 있습니다. 아래 조건식은 값이 실제 숫자 타입이면서 동시에 나눗셈의 나머지가 0이 아닌 경우, 즉 소수점 이하 값을 가지는지 검사합니다.function checkNumber
이 문제의 요구 사항은 매우 간단합니다. 숫자 배열을 인수로 받는 JavaScript 함수를 작성해야 하며, 만약 배열의 맨 앞에 0(선행 0)이 있다면 이를 제자리(in-place)에서 제거하고, 선행 0이 없다면 아무 작업도 수행하지 않으면 됩니다.문제 예시예를 들어, 입력 배열이 다음과 같다고 가정해 보겠습니다.const arr = [0, 0, 0, 14, 0, 63, 0];배열 앞에 연속된 세 개의 0이 있으므로, 함수 실행 후 기대되는 출력 결과는 다음과 같습니다.const output = [14, 0, 63, 0];주목할
두 객체 A와 B가 아래와 같이 있다고 가정해 보겠습니다.const A = { activity: purchased, count: undefined, time: 09:05:33 };const B = { activity: purchased, count: 51, time: undefined };여기서 요구사항은 이 두 객체를 병합하는 JavaScript 함수를 작성하는 것입니다. 중요한 조건은, 어떤 키가 참(truthy) 값을 가지고 있다면 그 값은 거짓(falsy) 값을 가진 키에 의해 덮어쓰여져서는 안 된다는 점입니다.왜 스프레드
JavaScript 개발 중에는 하나의 배열을 받아서, 원본 배열의 요소들을 정확히 길이가 2인 하위 배열(청크)로 묶어 새로운 배열을 반환해야 하는 경우가 자주 있습니다.이때 원본 배열의 길이가 2로 나누어 떨어지지 않는다면, 마지막 하위 배열에는 요소가 하나만 남겨져야 합니다.문제 이해하기예를 들어, 입력 배열이 다음과 같다고 가정해 보겠습니다.const arr = [1, 2, 3, 4, 5, 6, 7];그렇다면 기대하는 출력 결과는 다음과 같습니다.const output = [[1, 2], [3, 4], [5, 6], [7]]
자바스크립트에서 숫자로 이루어진 배열을 입력받아 그 배열의 가장 중간에 있는 요소를 반환하는 함수를 작성해야 하는 경우가 있습니다.배열의 길이가 홀수라면 정확히 하나의 중간 요소가 존재하지만, 길이가 짝수라면 중앙에 위치한 두 개의 요소를 함께 반환하는 것이 일반적입니다.문제 이해하기예를 들어 다음과 같은 배열이 있다고 가정해 보겠습니다.const arr = [1, 2, 3, 4, 5, 6, 7];이 배열의 길이는 7(홀수)이므로 중간 요소는 4입니다. 따라서 함수는 4를 반환해야 합니다.구현 예제다음은 Array.prototype
숫자, 문자열, 그리고 undefined, null, NaN 같은 falsy 값이 뒤섞여 있는 배열을 입력받아, 그중 가장 큰 숫자만 골라내는 자바스크립트 함수를 작성해야 하는 경우가 종종 있습니다.예를 들어 다음과 같은 배열이 있다고 가정해 보겠습니다.const arr = [23, hello, undefined, null, 21, 65, NaN, 1, undefined, hii];이 배열에는 유효한 숫자와 함께 문자열, undefined, null, NaN이 섞여 있지만, 함수는 이 중 실제 숫자들만 비교하여 65를 반환해야 합니
문제 이해정수로 이루어진 배열이 주어졌을 때, 홀수 번 등장하는 단 하나의 요소를 찾아 반환하는 함수를 작성해야 합니다. 문제의 전제 조건에 따르면 홀수 번 등장하는 정수는 항상 하나뿐이므로, 그 값을 찾기만 하면 됩니다.예를 들어 [1, 1, 2]라는 배열이 있다면 1은 두 번(짝수), 2는 한 번(홀수) 등장하므로 정답은 2입니다.접근 방법: 정렬 후 순회하기가장 직관적인 풀이는 배열을 먼저 오름차순으로 정렬하는 것입니다. 정렬을 수행하면 같은 값들이 서로 인접하게 모이기 때문에, 배열을 한 번만 순회하면서 각 값의 등장 횟수를