개요JavaScript 배열에서 특정 개수만큼의 항목을 무작위로 골라 다른 값으로 바꾸고 싶다면 Math.random()과 map() 메서드를 함께 사용하면 됩니다. 먼저 중복되지 않는 무작위 인덱스를 추출한 뒤, 해당 인덱스에 위치한 값만 새로운 값으로 교체하는 방식입니다.예제 코드아래 코드를 살펴보겠습니다.function substituteRandomValue(names, size) {    return function () {       const index = new Set();

다음과 같은 문자열이 있다고 가정해 보겠습니다.var sentence = My Name is John Smith. I live in UK. My Favourite Subject is JavaScript.위 문장에서 다음 단어들을 특정 값인 Not Available로 교체해야 하는 상황입니다.var values = [John, Smith, UK, JavaScript]따라서 최종적으로 원하는 출력 결과는 다음과 같습니다.My Name is Not Available Not Available. I live in Not Available.

다음과 같이 음수와 양수가 섞여 있고 아직 정렬되지 않은 배열이 있다고 가정해 보겠습니다.var arr = [10, -22, 54, 3, 4, 45, 6];버블 정렬이란?버블 정렬(Bubble Sort)은 인접한 두 요소를 반복적으로 비교하고, 순서가 잘못된 경우 서로 교환하는 방식으로 배열을 정렬하는 가장 기본적인 알고리즘입니다. 한 번의 순회(pass)가 끝날 때마다 가장 큰 값이 배열 끝으로 이동하며, 음수든 양수든 동일한 비교 로직으로 처리되기 때문에 별도의 조건 분기 없이 자연스럽게 오름차순 정렬됩니다.구현 예제다음은 Ja

JavaScript로 개발하다 보면 문자열로 이루어진 배열을 각 문자열이 객체의 키(key)가 되는 새로운 배열로 변환해야 하는 경우가 종종 있습니다. 예를 들어 학생 정보를 다루는 코드에서 다음과 같은 배열이 있다고 가정해 보겠습니다.var values = [studentNames, studentMarks];이 배열을 각 요소가 빈 배열([])을 값으로 가지는 객체 키 형태로 바꾸고 싶다면, map() 메서드와 ES6의 계산된 속성명(Computed Property Names) 문법을 함께 사용하면 아주 간단하게 해결할 수 있습니

웹 개발을 하다 보면 특정 조건에 따라 비디오 요소를 화면에서 숨겨야 하는 경우가 종종 있습니다. JavaScript의 style.display 속성을 활용하면 매우 간단하게 비디오 태그를 숨기거나 다시 표시할 수 있습니다.샘플 비디오 태그먼저 웹 페이지에 다음과 같은 비디오 태그가 있다고 가정해 보겠습니다.<video class="hideVideo" width="350" height="255" controls>   <source src

객체 배열에서 특정 값이 몇 번 반복되는지 세어야 하는 경우가 자주 있습니다. 이번 글에서는 JavaScript의 reduce() 메서드를 활용해 학생 배열에서 반복되는 이름의 등장 횟수를 계산하는 방법을 알아보겠습니다.예제 데이터다음과 같은 학생 정보 배열이 있다고 가정해 보겠습니다.var details = [ { studentName: John, studentAge: 23 }, { studentName: David, studentAge: 24

유니코드 번호에서 문자 가져오기JavaScript에서 유니코드 숫자에 해당하는 문자를 얻으려면 String.fromCharCode() 메서드를 사용하면 됩니다. 이 메서드는 하나 이상의 정수(유니코드 값)를 받아 해당하는 문자열로 변환해 반환합니다.문법은 다음과 같습니다.String.fromCharCode(yourIntegerValue)여기서 yourIntegerValue는 문자로 변환하고자 하는 유니코드 번호입니다. 예를 들어 65를 전달하면 A, 72를 전달하면 H가 반환됩니다.예제 코드다음은 문자열의 각 문자를 유니코드 번호로

웹 페이지에서 링크를 클릭했을 때 새 브라우저 창(팝업)을 열고 싶다면 window.open() 메서드를 사용하면 됩니다. 이 메서드는 지정한 URL을 새 창에서 열어주며, 창의 이름과 크기 등 다양한 옵션을 함께 설정할 수 있습니다.window.open() 기본 문법window.open(url, name, specs) 형태로 호출하며, 각 인자는 다음과 같은 역할을 합니다.url: 새 창에서 열고자 하는 페이지 주소name: 새 창의 이름(target 속성 값과 일치시키면 해당 창을 재사용)specs: width, height 등

JavaScript에서 URL 문자열이 절대 URL(absolute URL)인지 상대 URL(relative URL)인지 확인하려면 정규 표현식(Regular Expression)을 사용하는 것이 가장 간단하고 효과적인 방법입니다.절대 URL과 상대 URL의 차이절대 URL은 프로토콜(https:// 또는 https://)과 도메인을 포함한 전체 주소를 의미합니다. 반면 상대 URL은 현재 페이지 위치를 기준으로 한 경로만 포함하며, 프로토콜 정보가 없습니다.정규 표현식을 활용한 예제 코드다음은 정규 표현식을 사용하여 URL 문자열

스프레드 연산자(Spread Operator, ...)를 사용하면 하나의 표현식을 여러 개의 인수, 배열 요소 또는 객체 속성으로 확장할 수 있습니다. 특히 객체 리터럴에서 스프레드 연산자를 활용하면 여러 객체의 속성을 손쉽게 하나로 병합할 수 있습니다.병합된 자바스크립트 객체를 사람이 읽기 좋은 형태로 확인하려면 JSON.stringify() 메서드를 사용해 객체를 문자열로 변환하면 됩니다. 아래 예제에서는 details1과 details2라는 두 객체에 스프레드 연산자를 적용해 하나의 객체로 합친 뒤, 그 결과를 JSON 문자열

자바스크립트(JavaScript)에서 한 배열을 다른 배열에 포함된 값들을 기준으로 걸러내고 싶다면 filter() 메서드를 활용하면 됩니다.예제 데이터 살펴보기먼저, 첫 번째 배열의 요소가 다음과 같다고 가정해 보겠습니다.[100, 110, 150, 180, 190, 175]그리고 두 번째 배열의 요소는 다음과 같습니다.[100, 150, 175]여기서 목표는 첫 번째 배열 중 두 번째 배열에 포함되지 않은 요소들만 남기는 것입니다. 이를 위해 filter() 메서드와 thisArg 매개변수를 함께 사용합니다.코드 예제아래 코드를

JavaScript에서 무작위 문자열이나 문자를 생성하려면 Math.random() 메서드를 활용하면 됩니다. 이 메서드는 0 이상 1 미만의 난수를 반환하기 때문에, 문자열 인덱스와 조합하면 원하는 길이의 랜덤 문자열을 쉽게 만들 수 있습니다.사용할 문자 집합아래 예제에서는 다음 문자 집합으로부터 총 6개의 무작위 문자를 생성합니다.ABCDEFGHIJKLMNOabcdefghijklmnopqrstuvwxyzPQRSTUVWXYZ;예제 코드다음은 지정한 개수만큼 무작위 문자를 생성하는 함수입니다.function generateRando

문자열을 다룰 때 특정 특수 문자를 다른 문자나 공백으로 바꿔야 하는 경우가 자주 발생합니다. 이번 글에서는 JavaScript의 replace() 메서드와 정규식(Regex)을 활용해 문자열 안의 특수 문자를 손쉽게 교체하는 방법을 알아보겠습니다.예제 문자열 준비먼저 특수 문자가 포함된 다음과 같은 문자열이 있다고 가정해 보겠습니다.var sentence = <My<Name<is<John<Doe;이 문자열에는 <라는 특수 문자가 여러 개 포함되어 있습니다. 우리는 이 특수 문자 뒤에 공백을 추가하여

JavaScript에서 문자열의 모든 단어를 대문자로 변환하고, 단어 사이의 공백을 밑줄(_)로 바꾸려면 trim(), replace(), toLocaleUpperCase() 세 가지 메서드를 함께 사용하면 됩니다.사용되는 주요 메서드trim(): 문자열 양 끝의 불필요한 공백을 제거합니다.replace(/ /g, _): 정규 표현식을 활용해 문자열 내부의 모든 공백을 밑줄로 치환합니다.toLocaleUpperCase(): 문자열 전체를 대문자로 변환합니다.예제 코드다음은 실제 동작을 확인할 수 있는 코드입니다.var sentenc

JavaScript로 개발하다 보면 문자열 안에서 특정 구분자를 기준으로 원하는 부분만 추출해야 하는 경우가 자주 있습니다. 이번 글에서는 split() 메서드를 활용하여 두 개의 같은 문자(콜론) 사이에 있는 부분 문자열을 가져오는 방법을 알아보겠습니다.문제 상황예를 들어, 다음과 같이 콜론(:)이 여러 개 포함된 문자열이 있다고 가정해 보겠습니다.var values=This is:the first program in JavaScript:After that I will do Data Structure program;여기서 첫 번째

JavaScript에서 동일한 문자열을 여러 번 반복해 하나로 이어 붙여야 할 때가 있습니다. 이럴 때 join() 메서드를 활용하면 간단하게 해결할 수 있습니다. 핵심은 배열의 길이를 원하는 반복 횟수보다 1 크게 만드는 것입니다.join()으로 문자열 반복 연결하기배열의 join() 메서드는 배열의 각 요소 사이에 지정한 구분자를 삽입해 하나의 문자열로 합쳐 줍니다. 만약 빈 배열에 길이가 n+1인 배열을 만든 뒤 join(John)을 호출하면, 요소 사이사이에 John이 총 n번 삽입되므로 결과적으로 문자열이 n번 반복됩니다.

템플릿 문자열 안의 {{fullName}}, {{countryName}} 같은 플레이스홀더를 실제 데이터로 바꾸려면 JavaScript의 replace() 메서드와 정규식(RegEx)을 함께 활용하면 됩니다. 이 방식은 간단한 템플릿 엔진 없이도 동적인 문자열 생성이 가능해 매우 유용합니다. 예제 코드 다음은 전체 예제 코드입니다. var temp = `My name is {{fullName}} I live in {{countryName}}`; var details = {     "ful

JavaScript로 웹 페이지를 개발하다 보면 런타임 중에 동적으로 새로운 CSS 스타일 규칙을 추가해야 하는 경우가 종종 있습니다. 이럴 때 insertRule() 메서드와 sheet 객체를 함께 사용하면 간단하게 해결할 수 있습니다.insertRule() 메서드란?insertRule()은 CSSStyleSheet 인터페이스의 메서드로, 기존 스타일시트에 새로운 CSS 규칙을 삽입하는 역할을 합니다. 먼저 document.createElement(style)로 style 요소를 생성한 후 head에 추가하고, 해당 스타일시트에

JavaScript에서 객체 배열을 다루다 보면, 특정 조건을 만족하는 요소의 값만 곱하거나 수정해야 하는 경우가 자주 발생합니다. 이번 글에서는 amount(금액) 값이 500보다 클 때만 2배로 곱하는 방법을 알아보겠습니다.예시 데이터먼저 다음과 같은 직원 객체 배열이 있다고 가정해 보겠습니다.var employee = [ { name: John, amount: 800 }, { name: David, amount: 500 }, { name: Bob, amount: 450 } ]우리가 원하는 작업은 amoun

웹 개발을 하다 보면 URL 문자열에서 불필요한 경로 부분을 잘라내고, 마지막 파일명이나 값만 남겨야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 URL이 있다고 가정해 보겠습니다.https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp여기서 우리가 원하는 것은 마지막 값인 index.asp뿐입니다. 즉, 슬래시(/) 앞의 모든 텍스트를 삭제하고 아래와 같은 결과를 얻어야 합니다.index.asp해결 방법: replace()와 정규식 활용이