자바스크립트에서 배열에 담긴 값 중 두 번째로 큰 숫자를 찾아야 하는 경우가 종종 있습니다. 이번 글에서는 반복문과 조건문만으로 두 번째로 큰 요소를 효율적으로 찾는 방법을 단계별로 살펴보겠습니다.예제 배열먼저 다음과 같은 숫자 배열이 있다고 가정하겠습니다.var numbers = [10, 50, 80, 60, 89];이 배열에서 가장 큰 값은 89이므로, 우리가 찾아야 할 두 번째로 큰 값은 80입니다.두 번째로 큰 요소를 찾는 알고리즘 핵심 아이디어는 간단합니다. 배열을 한 번만 순회하면서 최댓값(firstLargerNumber
JavaScript에서 연속된 동일한 문자가 끝나고 새로운 값으로 변경되는 지점을 기준으로 문자열을 분할하고 싶다면, match() 메서드와 정규 표현식을 함께 사용하면 됩니다.핵심 아이디어: 정규 표현식 이해하기여기서 사용하는 정규 표현식은 다음과 같습니다./(.)\1*/g이 패턴의 구성 요소를 살펴보면 다음과 같습니다.(.) — 임의의 한 문자를 캡처 그룹으로 지정합니다.\1* — 앞에서 캡처한 문자와 동일한 문자가 0번 이상 반복되는 부분을 매칭합니다.g 플래그 — 문자열 전체에서 일치하는 모든 부분을 찾습니다.즉, 이 패턴은
JavaScript에서 한 객체를 다른 객체의 값으로 업데이트하되, 원본 객체에 이미 존재하는 키만 갱신하고 싶은 경우가 있습니다. 이럴 때는 hasOwnProperty() 메서드를 활용하면 됩니다.핵심 개념hasOwnProperty()는 객체가 특정 키를 직접 소유하고 있는지 확인하는 메서드입니다. 이를 활용하면 병합 대상 객체에 해당 키가 있을 때만 값을 교체하고, 없는 키는 무시하여 원본 객체의 구조를 그대로 유지할 수 있습니다.예제 코드var markDetails1 = { marks1: 78, marks2: 65 };
자바스크립트 배열 교집합이란?두 개 이상의 배열에 공통으로 포함된 요소들을 찾는 것을 배열 교집합(array intersection)이라고 합니다. 자바스크립트에서는 별도의 라이브러리 없이 기본 내장 메서드만으로 간단하게 구현할 수 있습니다.먼저 다음과 같은 두 개의 배열이 있다고 가정해 보겠습니다.var firstNamesArray=[John,David,Bob,Sam,Carol]; var secondNamesArray=[Mike,Carol,Adam,David];filter()와 includes()로 교집합 구하는 방법배열 교집합을
개요특정 클래스(class)를 가진 버튼을 클릭했을 때 경고창(alert)을 띄우려면 document.getElementsByClassName() 메서드를 사용하면 됩니다. 이 메서드는 지정한 클래스 이름을 가진 모든 요소를 HTMLCollection 형태로 반환하기 때문에, 반복문을 통해 각 요소에 이벤트 리스너를 등록하는 방식으로 처리합니다.예제 코드<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
JavaScript에서 현재 날짜(일)를 구하려면 new Date().getDate() 메서드를 활용해야 합니다. 이 메서드는 현재 월의 일(day)을 숫자로 반환하며, 반환된 값을 서로 빼주면 두 날짜 간의 차이를 계산할 수 있습니다.기본 문법var anyVariableName = yourCurrentDate - yourSubstractDateOfCurrentMonth;예제 코드var currentDate = new Date().getDate(); var substractDate = new Date(2020-07-01).getDa
JavaScript에서 문자열을 비교할 때 대소문자를 구분하지 않고 특정 값이 존재하는지 확인하려면 정규 표현식(Regular Expression)을 활용하면 됩니다. 정규 표현식 생성 시 두 번째 인자로 i 플래그를 전달하면 대소문자를 무시한 검사가 가능합니다.예제 코드아래 예제는 배열에 담긴 여러 이름들을 하나의 정규 표현식으로 결합한 뒤, 대상 문자열에 해당 값이 포함되어 있는지 검사하는 코드입니다.var allNames = [john,John,JOHN]; var makeRegularExpression = new RegExp(
아니요, 복사된 객체를 수정하더라도 원본(상위) 객체는 업데이트되지 않습니다. Object.assign()은 새로운 객체를 생성해 속성을 병합하기 때문에 원본 객체에는 영향을 주지 않습니다. 아래 예제 코드로 직접 확인해 보겠습니다. 예제 var firstObject = { name: John }; var secondObject = { name: Carol }; console.log(Before merging=); console.log(firstObject); var afterMerging = Object.assign({}, fir
JavaScript에서 문자열에 포함된 여러 개의 대괄호 값들을 꺼내야 할 때가 있습니다. 예를 들어 [John Smith][David Miller]처럼 대괄호로 감싸진 여러 값이 있을 때, 정규식(RegExp)을 활용하면 대괄호를 제외한 순수한 값만 손쉽게 추출할 수 있습니다.핵심 원리: 룩어헤드와 룩비하인드이 문제를 해결하는 핵심은 룩어헤드(Lookahead)와 룩비하인드(Lookbehind)입니다.(?<=\[) : 앞쪽이 여는 대괄호 [인 위치만 매칭합니다.(?=\]) : 뒤쪽이 닫는 대괄호 ]인 위치만 매칭합니다.이 두
JavaScript 객체의 내용을 문자열 형태로 웹 페이지에 표시하려면 document.getElementById() 메서드로 HTML 요소를 가져온 후, innerHTML 속성에 값을 할당하면 됩니다. 이때 객체를 문자열로 변환하기 위해 JSON.stringify()를 함께 사용합니다.동작 원리먼저 getElementById()로 특정 id를 가진 요소를 선택하고, JSON.stringify()로 객체를 문자열로 직렬화한 다음, innerHTML을 통해 해당 요소 안에 출력하는 방식입니다.예제 코드<!DOCTYPE html&
JavaScript로 개발하다 보면 쉼표와 공백이 과도하게 포함된 지저분한 문자열을 정리해야 하는 경우가 자주 있습니다. 예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.var sentence = My,,,,,,, Name,,,, is John ,,, Smith;이처럼 중복된 쉼표와 불필요한 공백이 섞여 있는 문자열을 깔끔하게 정리하려면 정규 표현식(Regular Expression)과 함께 split() 메서드와 join() 메서드를 조합하여 사용하면 됩니다.핵심 원리정규 표현식 [\s]+는 하나 이상의 공백 문자(\s)
JavaScript에서 나중에 동적으로 생성되는 요소에 이벤트를 연결하려면 document.addEventListener()를 사용하는 것이 가장 효과적인 방법입니다.동적 요소는 페이지가 처음 로드될 때 존재하지 않기 때문에, 일반적인 방식으로 해당 요소에 직접 이벤트 리스너를 등록하면 제대로 작동하지 않을 수 있습니다. 이때는 문서 전체(document)에 이벤트 리스너를 등록한 뒤, 실제 클릭된 대상(event.target)이 원하는 요소인지 확인하는 이벤트 위임(Event Delegation) 기법을 활용하면 됩니다.예제 코드
자바스크립트에서 new 키워드는 새로운 객체를 생성하는 데 사용되는 핵심 문법입니다. 생성된 객체의 속성(값)에 접근하려면 점 표기법(dot notation)을 활용하면 됩니다.new 키워드의 역할new 키워드를 함수 앞에 붙여 호출하면 해당 함수가 생성자 함수(constructor function)로 동작하며, 다음과 같은 과정이 자동으로 진행됩니다.1. 빈 객체가 새롭게 생성됩니다.2. 생성된 객체의 프로토타입이 설정됩니다.3. 함수 내부의 this가 새로 생성된 객체를 가리키게 됩니다.4. 함수 실행이 끝나면 명시적인 retu
JavaScript로 화면 해상도 감지하기웹 개발에서 반응형 디자인을 구현하거나 디바이스별 최적화 작업을 할 때, 사용자의 화면 해상도를 알아내야 하는 경우가 자주 있습니다. JavaScript에서는 window.screen 객체를 활용하면 간단하게 화면 해상도를 감지할 수 있습니다.1. 화면 너비(가로 해상도) 구하기사용 가능한 화면 너비는 다음 속성으로 확인할 수 있습니다.window.screen.availWidth2. 화면 높이(세로 해상도) 구하기마찬가지로 사용 가능한 화면 높이는 아래 속성으로 얻습니다.window.scre
개요JavaScript에서는 eval() 함수를 사용하여 변수에 담긴 클래스 객체를 동적으로 호출할 수 있습니다. 이번 글에서는 변수와 객체를 선언한 뒤, eval()을 통해 클래스 객체의 속성에 접근하는 방법을 예제와 함께 살펴보겠습니다.변수 및 객체 준비하기먼저 다음과 같이 문자열을 담은 변수를 하나 선언합니다.var message = This is the Class Demo;다음으로 이 변수를 생성자 인자로 전달하여 클래스 객체를 생성합니다.var object = new FirstClass(message)여기서 사용된 Firs
JSON 데이터를 특정 기준으로 그룹화하려면 객체의 모든 키를 순회하면서 그룹화 기준이 되는 값을 추출한 뒤, push() 메서드를 사용해 동일한 값을 가진 데이터를 하나의 배열에 담으면 됩니다. 아래 예제는 name 속성을 기준으로 데이터를 묶는 과정을 보여줍니다.예제 코드var details = { 1: { name: John }, 2: { name: John }, 3: { name: David } }; var objectWithGroupByName = {};
웹 개발을 하다 보면 HTML 테이블에 데이터가 몇 행(row) 있는지 확인해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 테이블이 있다고 가정해 보겠습니다.<table id="tblDemo" border="1"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr><td>John</td
웹 개발을 하다 보면 화면에 있는 특정 요소의 텍스트를 JavaScript로 동적으로 변경해야 하는 경우가 매우 자주 있습니다. 이번 글에서는 제이쿼리(jQuery)의 html() 메서드를 활용해 <strong> 태그의 텍스트를 설정하는 방법을 단계별로 살펴보겠습니다. 1단계: <strong> 요소 준비하기 먼저 텍스트를 교체할 대상이 되는 <strong> 요소를 작성합니다. 이때 나중에 요소를 쉽게 찾을 수 있도록 id 속성을 반드시 지정해 주세요. <strong id="strongD
JavaScript에서 문자열 형태의 데이터를 배열 객체로 변환해야 하는 경우가 자주 있습니다. 특히 API 응답이나 외부 파일에서 받아온 데이터는 대부분 문자열 형태로 전달되기 때문에, 이를 실제 배열로 변환해야만 속성에 접근하거나 반복 처리를 할 수 있습니다.이럴 때 사용하는 것이 바로 JSON.parse() 메서드입니다. JSON.parse()는 JSON 형식의 문자열을 JavaScript 객체 또는 배열로 파싱해 주는 표준 내장 메서드입니다. 아래 예제를 통해 구체적인 사용 방법을 살펴보겠습니다.예제 코드var custome
JavaScript로 작업하다 보면 파일 이름의 확장자 앞에 특정 단어를 삽입해야 하는 경우가 있습니다. 예를 들어 demo.js라는 파일 이름을 demo-programming.js처럼 변경하는 것이죠. 이번 글에서는 이를 간단하게 구현하는 방법을 알아보겠습니다.문제 상황먼저 다음과 같은 원본 파일 이름이 있다고 가정해 보겠습니다.var actualJavaScriptFileName = demo.js;그리고 확장자 앞에 삽입하고 싶은 단어는 다음과 같습니다.var addValueBetweenFileNameAndExtensions =