다음과 같은 두 개의 객체 배열이 있다고 가정해 보겠습니다. 이 두 배열을 하나로 병합하되, name 속성 값이 중복되는 객체는 제거해야 합니다.const first = [{ name: Rahul, age: 23 }, { name: Ramesh, age: 27 }, { name: Vikram, age: 35 }, { name: Harsh, age: 34 }, { name: Vijay, age: 21 }]; const second = [{ name: Vij

정수로 이루어진 배열이 주어졌을 때, 단 하나의 요소만 홀수 번 나타나고 나머지 모든 요소는 짝수 번 나타난다고 가정해 보겠습니다. 이때 우리의 목표는 단 한 번의 반복으로 해당 요소를 찾아내는 것입니다.예시 배열은 다음과 같습니다.[1, 4, 3, 4, 2, 3, 2, 7, 8, 8, 9, 7, 9]XOR(^) 연산자의 원리 이해하기이 문제를 해결하기 전에 먼저 비트 연산자인 XOR(^)에 대해 간단히 알아보겠습니다.XOR 연산자는 두 피연산자가 서로 다를 때 TRUE(1)를 반환하고, 두 피연산자가 같을 때 FALSE(0)를 반

문자열을 입력받아 각 단어의 첫 글자는 대문자로, 나머지 글자는 모두 소문자로 변환하는 함수를 작성해야 한다고 가정해 보겠습니다. 예를 들어, 입력 문자열이 다음과 같다면 − hello world coding is very interesting 출력 결과는 다음과 같아야 합니다 − Hello World Coding Is Very Interesting 이제 문자열을 인수로 받아 각 단어의 첫 글자를 대문자로 변환한 뒤 결과 문자열을 반환하는 capitaliseTitle() 함수를 정의해 보겠습니다 −

파일 경로가 담긴 문자열을 입력받아 해당 파일의 이름을 반환하는 함수가 필요한 경우가 종종 있습니다. 파일 이름은 일반적으로 경로의 맨 끝에 위치하므로, 정규표현식(regex)으로 해결할 수도 있지만, JavaScript의 split() 메서드를 활용하면 훨씬 간단하게 처리할 수 있습니다.예를 들어 다음과 같은 파일 경로가 있다고 가정해 보겠습니다./app/base/controllers/filename.jssplit() 메서드를 활용한 구현split() 메서드는 지정한 구분자를 기준으로 문자열을 나누어 배열로 반환합니다. 슬래시(/

JavaScript에서 배열과 루프로 div의 id 속성 설정하기배열을 인수로 받아, 특정 DOM에 존재하는 처음 n개의 div 요소의 id 속성을 배열의 값에 맞게 변경하는 함수를 작성해야 한다고 가정해 보겠습니다. 여기서 n은 배열의 길이입니다.이 문제를 해결하려면 먼저 DOM 내의 모든 div 요소를 선택한 뒤, 함수의 유일한 인수로 전달받은 배열을 순회하면서 각 div에 대응하는 id 값을 차례로 할당하면 됩니다.구현 코드const array = [navbar, sidebar, section1, section2, footer

자바스크립트에서 문자열의 각 문자를 숫자 배열로 바꿀 때 [...str].map(Number) 패턴을 자주 사용합니다. 그런데 다음 코드를 실행해 보면 공백 문자(" ")까지 0으로 변환되어 의도하지 않은 결과가 나오게 됩니다. { const parsedStr = [...str].map(Number); return parsedStr; }; console.log(digify(778 858 7577));출력 결과[ 7, 7, 8, 0, 8, 5, 8, 0, 7, 5, 7, 7 ]문자열 안에 실

JavaScript에서 문자열에 포함된 공백의 개수를 확인하는 방법은 한 가지가 아닙니다. split() 메서드를 활용하는 방법, for 반복문을 사용하는 방법, map과 filter를 조합하는 방법, 그리고 정규식(regex)을 활용하는 방법 등 다양한 접근 방식이 존재합니다.그중에서도 정규식을 활용한 방법은 다른 방법들보다 월등히 효율적이며 성능이 뛰어납니다. 특히 긴 텍스트를 처리할 때 그 차이更加 두드러지기 때문에, 이 문제 해결에는 정규식 방법을 사용하는 것이 가장 좋습니다.예제 코드다음 코드는 정규식을 사용해 문자열 내

웹 브라우저의 localStorage에 저장된 데이터를 JavaScript로 삭제해야 하는 경우가 종종 있습니다. 예를 들어 사용자 로그아웃 시 저장된 정보를 초기화하거나, 캐시된 데이터를 비워야 할 때 유용합니다. localStorage를 지우는 방법은 크게 두 가지가 있으며, 두 방법 모두 동일한 결과를 얻을 수 있습니다.방법 1 – clear() 메서드 사용가장 간단하고 권장되는 방법은 clear() 메서드를 호출하는 것입니다. 이 메서드는 해당 도메인(오리진)에 저장된 모든 키와 값을 한 번에 삭제합니다.localStorag

JavaScript로 개발을 하다 보면 여러 개의 객체를 하나로 합치거나, 불필요한 속성을 제거해야 하는 상황이 자주 발생합니다. 이번 글에서는 객체 배열을 단일 객체로 병합하는 방법과 특정 속성을 삭제하는 방법을 예제와 함께 살펴보겠습니다.문제 상황다음과 같이 두 개의 객체를 담고 있는 배열이 있다고 가정해 보겠습니다. 우리가 해야 할 작업은 이 두 객체를 하나로 합친 뒤, chk 속성을 완전히 제거하는 것입니다.const err = [ { chk : true, name: test },

바닐라 JavaScript(외부 라이브러리 없는 순수 JavaScript)만으로 버튼 클릭 시 배열의 항목들을 div 요소에 표시하는 방법을 알아보겠습니다. 핵심 원리는 아주 간단합니다. 배열을 반복(iterate)하면서 각 요소를 대상 div에 계속 추가(append)하는 것입니다. 핵심 코드 예제 다음은 forEach() 메서드를 활용한 기본 구현 방식입니다. const myArray = ["stone","paper","scissors"]; const embedElement

JavaScript 개발을 하다 보면 객체의 키 중에서 특정 문자열로 시작하는 항목만 골라내야 하는 경우가 종종 있습니다. 예를 들어 검색 기능을 구현할 때 사용자가 입력한 문자열과 일치하는 키만 남기고 싶은 상황이 그렇습니다.이번 글에서는 객체와 검색 문자열을 인자로 받아, 해당 문자열로 시작하는 키만 필터링해 새로운 객체를 반환하는 함수를 만드는 방법을 알아보겠습니다.예제 코드 { if(key.substr(0, str.length).toLowerCase() === str.toLowerCase()){

이번 글에서는 숫자로 이루어진 배열을 인수 하나로 받아, 입력 배열 중 짝수에 해당하는 값들만 담은 새로운 배열을 반환하는 함수를 작성해 보겠습니다.함수 이름은 직관적으로 returnEvenArray라고 지어보겠습니다. 핵심 아이디어는 JavaScript의 filter() 메서드를 활용하는 것입니다. filter()는 콜백 함수가 true를 반환하는 요소들만 모아 새로운 배열을 만들어 주기 때문에, 짝수 판별 조건만 넣어주면 간단히 해결됩니다.예제 코드 { return el % 2 === 0; }) }; con

이 글의 목표는 숫자를 입력받아 뒤집힌 숫자를 반환하는 JavaScript 함수를 작성하는 것입니다.예를 들어, 678을 뒤집으면 다음과 같은 결과가 나와야 합니다.876JavaScript에서 숫자를 뒤집는 코드는 아래와 같습니다.예제 코드const num = 124323; const reverse = (num) => parseInt(String(num) .split("") .reverse() .join(""), 10); console.log(reverse(num));실행 결과콘솔에 출력되는

문자열 배열 검색 개요문자열로 구성된 배열 하나와, 그 배열 안에서 찾고자 하는 문자열이 주어졌다고 가정해 보겠습니다. 이때 JavaScript의 filter() 메서드를 활용하면, 사용자가 입력한 값에 포함된 모든 키워드를 담고 있는 요소만 골라낼 수 있습니다.핵심 아이디어는 간단합니다. 배열의 각 요소를 순회하면서 사용자 입력이 해당 문자열에 존재하는지 확인하고, 조건을 만족하는 요소만 새로운 배열로 반환하는 것입니다.예제 1: split()으로 입력값을 나누어 검색하기첫 번째 방법은 입력 문자열을 공백 기준으로 분할한 뒤, 각

실무에서는 하나의 배열을 여러 기준으로 동시에 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 JavaScript의 sort() 메서드를 활용해 날짜(date)와 중요도(isImportant)라는 두 가지 기준을 적용하여 객체 배열을 정렬하는 방법을 알아보겠습니다.정렬 조건은 다음과 같습니다.isImportant가 true인 객체는 false인 어떤 객체보다도 항상 앞쪽에 위치합니다.각 그룹 내부에서는 date 속성 값을 기준으로 정렬합니다.정렬할 배열 준비하기먼저 아래와 같이 객체들을 담고 있는 배열이 있다고 가정해 보겠습니

여러 페이지로 구성된 웹사이트를 예로 들어 보겠습니다. 아래 샘플 배열의 각 객체는 웹사이트의 한 페이지를 나타내며, next 속성(마지막 페이지가 아닌 경우)은 다른 객체의 id를 가리키고, previous 속성(첫 번째 페이지가 아닌 경우)은 바로 앞 객체의 id를 가리킵니다.현재 이 객체들은 모두 무작위 순서로 뒤섞여 있습니다. 우리가 해야 할 일은 이 객체들을 원래의 올바른 순서대로 정렬하는 것입니다.let arr = [ { id: 1325asdfasdasd, next: 5345341fgdfgdd, previous:5

자바스크립트로 개발하다 보면 initValidation() 함수 내부에 정의된 validate() 함수를, 굳이 initValidation()을 호출하지 않고도 외부에서 직접 실행해야 하는 경우가 있습니다.그런데 일반적인 방식으로는 내부 함수에 접근할 수 없습니다. 다음은 문제가 되는 코드입니다.문제의 코드function initValidation(){    // 관련 없는 코드    function validate(_block){   

JavaScript 개발을 하다 보면 로컬에 저장된 JSON 파일의 데이터를 코드 안으로 불러와야 하는 경우가 자주 있습니다. 이 글에서는 같은 디렉터리에 위치한 JSON 파일의 내용을 JavaScript 변수로 가져오는 두 가지 대표적인 방법을 소개합니다.예제 파일 구성먼저 하나의 디렉터리 안에 employees.json 파일과 이를 읽어올 JavaScript 파일이 함께 있다고 가정해 보겠습니다.employees.json 파일 내용Employees : [ { userId:ravjy, jobTitleName:De

인도 크리켓 선수들의 평점 정보를 담고 있는 다음과 같은 객체의 객체(object of objects)가 있다고 가정해 보겠습니다. 이 데이터를 각 요소가 name과 rating이라는 두 개의 속성을 가지는 객체 배열 형태로 변환해야 합니다. 여기서 name은 선수 이름을, rating은 해당 선수의 평점 객체를 저장합니다.샘플 객체const playerRating = { V Kohli: { batting: 99, fielding: 99 }, R Sharma: { ba

사용자가 HTML 폼을 제출할 때 submit 이벤트를 클라이언트 측에서 직접 처리하고, 폼이 제출되는 즉시 브라우저가 페이지를 새로고침하지 않도록 만들어야 하는 상황을 생각해 보겠습니다.HTML 폼 예제먼저 다음과 같은 기본적인 연락처 폼이 있다고 가정합니다.<form name="formcontact1" action="#"> <input type=text name=email size="36" placeholder="Your