현재 날짜와 시간을 사무실의 영업 시간과 비교해야 하는 상황을 가정해 보겠습니다. 현재 시간을 기준으로 사무실이 지금 영업 중인지 아니면 영업 종료 상태인지 화면에 표시해야 합니다.이럴 때 Date 객체에서 현재 시간(hour) 값을 가져온 뒤, 삼항 연산자(ternary operator)를 사용하면 아주 간단하게 처리할 수 있습니다.삼항 연산자는 조건 ? 참일 때 값 : 거짓일 때 값 형태로 작성되며, 짧은 조건 분기를 한 줄로 표현할 수 있어 이런 경우에 유용합니다.예제 코드<!DOCTYPE html> <html
JavaScript에서 배열을 복사할 때 원본 배열의 값이 변경되지 않도록 독립적인 새 배열을 만들어야 하는 경우가 자주 있습니다. 이번 글에서는 기존 배열에 영향을 주지 않고 새 배열을 생성하는 방법을 예제와 함께 살펴보겠습니다.현재 배열 예시다음과 같은 배열이 있다고 가정해 보겠습니다.var listOfNames=[John,Mike,Sam,Carol];새 배열을 만드는 방법JSON.parse(JSON.stringify())를 사용하면 배열을 문자열로 변환한 뒤 다시 파싱하여 완전히 새로운 복사본을 만들 수 있습니다. 또한 sli
JavaScript에서 새 줄 추가 및 테이블 형식 텍스트 서식 지정하기JavaScript에서 배열 데이터를 표(table) 형태의 텍스트로 변환하면서 각 행을 새 줄로 구분하려면 map() 메서드와 join(\n)을 함께 사용하면 됩니다. 여기서 \n은 새 줄(줄바꿈 문자)을 나타냅니다.map() 메서드는 배열의 각 요소에 대해 지정된 함수를 실행한 결과로 새로운 배열을 반환합니다. 이를 활용하면 각 학생 정보 배열을 파이프(|) 문자로 구분된 하나의 문자열로 변환할 수 있고, 이후 join(\n)으로 각 행을 새 줄로 연결하여
JavaScript에서 객체를 키-값(key-value) 형태의 배열로 변환하려면 Object.entries() 메서드와 map() 메서드를 함께 사용하면 됩니다. Object.entries()는 객체의 각 속성을 [키, 값] 형태의 배열로 변환해 주고, map()을 이용하면 이를 원하는 객체 구조로 자유롭게 재구성할 수 있습니다.예제 코드다음은 학생 정보 객체를 studentId와 studentName 속성을 가진 객체 배열로 변환하는 예제입니다.var studentObject={ 101:
JavaScript 객체 배열 업데이트 개요JavaScript에서 이미 생성된 객체 배열에 새로운 객체를 추가하거나 기존 객체를 교체해야 하는 경우가 자주 있습니다. 이번 글에서는 for 루프를 활용해 특정 조건에 일치하는 객체가 있으면 해당 객체를 교체하고, 일치하는 객체가 없으면 배열 끝에 새 객체를 추가하는 방법을 알아보겠습니다.예제 데이터 준비먼저 다음과 같은 학생 정보 객체 배열이 있다고 가정해 보겠습니다.var studentDetails = [ { firstName: John, listOfSubject: [MySQ
문자열로 표현된 숫자에서 불필요한 선행 0(leading zeros)을 제거해야 하는 경우가 종종 있습니다. 예를 들어 0006456 같은 값은 실제 사용 시 6456으로 변환하는 것이 자연스럽습니다. 이럴 때 JavaScript의 replace() 메서드와 정규식(Regex)을 함께 사용하면 간단하게 해결할 수 있습니다.정규식 패턴 설명선행 0을 제거하는 기본 문법은 다음과 같습니다.yourStringValue.replace(/\D|^0+/g, )이 정규식 패턴은 두 가지 역할을 합니다.\D: 숫자가 아닌 모든 문자를 찾아 제거합
개요HTML 문서에서 특정 div 영역 안에 있는 여러 개의 텍스트 요소(span 등)를 다른 요소의 텍스트 값으로 한 번에 교체하고 싶다면, JavaScript의 document.querySelectorAll()과 getElementsByClassName() 메서드를 함께 활용하면 간단하게 해결할 수 있습니다.querySelectorAll()은 CSS 선택자와 일치하는 모든 요소를 NodeList 형태로 반환하며, getElementsByClassName()은 지정한 클래스 이름을 가진 요소들을 가져옵니다. 이 두 가지를 조합하면
다음과 같은 HTML 요소들이 있다고 가정해 보겠습니다.<p>My Name is John</p> <p>My Name is David</p> <p>My Name is Bob</p> <p>My Name is Mike</p> <p>My Name is Carol</p> <footer>END</footer>이 문서에서는 시작 지점인 <nav>(START) 태그와 끝 지점인 <footer>(EN
JavaScript의 Object.assign() 메서드는 하나 이상의 소스(source) 객체를 대상(target) 객체로 복사할 때 사용합니다. 이 메서드는 소스 객체에는 get을, 대상 객체에는 set을 활용하기 때문에 getter와 setter 역시 함께 호출됩니다.문법Object.assign(target, ...sourceObjects);첫 번째 인자인 target은 복사된 속성을 받을 대상 객체이며, 그 뒤에 오는 하나 이상의 source 객체가 복사의 원본이 됩니다. 만약 여러 소스 객체에 동일한 키가 존재한다면, 나중
따옴표가 중복으로 포함된 문자열을 정상적인 JSON 객체로 변환하려면 JavaScript의 replace() 메서드와 JSON.parse() 메서드를 함께 사용하면 됩니다. 전체 과정은 세 단계로 진행됩니다. 먼저 substring()으로 문자열 양 끝의 따옴표를 제거하고, replace()로 겹쳐진 따옴표를 하나로 치환한 뒤, 마지막에 JSON.parse()로 객체를 생성합니다. 예제 코드 var studentDetails = `{name: John,subjectName: Introduction To JavaScript}`; co
웹 페이지에 현재 연도만 간단하게 표시하고 싶다면 JavaScript의 getFullYear() 메서드를 사용하면 됩니다. 이 메서드는 Date 객체에서 연도 정보만 추출하여 네 자리 숫자 형태(예: 2024)로 반환합니다.핵심 코드 예제아래는 HTML과 JavaScript를 활용해 현재 연도를 화면에 출력하는 전체 코드입니다.<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8> <meta name=viewport content=wi
카멜 케이스(camelCase)는 여러 단어로 이루어진 문자열에서 첫 번째 단어의 첫 글자만 소문자로 표기하고, 나머지 단어들의 첫 글자는 대문자로 표기하며 모든 공백을 제거하는 명명 규칙입니다. 예를 들어 Add two variables라는 문장은 addTwoVariables로 변환됩니다.JavaScript에서는 정규식과 replace() 메서드를 조합하면 어떤 문자열이든 간단하게 카멜 케이스로 변환할 수 있습니다.변환 코드 예제function convertStringToCamelCase(sentence) { return
개요웹 개발을 하다 보면 버튼을 클릭했을 때 입력 필드(input)에 특정 텍스트를 자동으로 추가해야 하는 경우가 종종 있습니다. 이 글에서는 JavaScript의 document.getElementById() 메서드와 클릭 이벤트 리스너를 활용하여, 버튼 클릭 시 HTML <input> 요소에 텍스트를 추가하는 방법을 단계별로 알아보겠습니다.HTML 버튼 예시먼저 아래와 같은 HTML 버튼이 있다고 가정해 보겠습니다.<button id="clickButton">아래 텍스트 상자에 값을 추가하
JavaScript에서 return 문은 함수의 실행을 즉시 종료하고 값을 반환하는 역할을 합니다. 이 특성을 활용하면 중첩 루프(바깥쪽 루프와 안쪽 루프) 안에서도 특정 조건이 충족되는 순간 전체 반복 작업을 한 번에 벗어날 수 있습니다.아래는 바깥쪽 루프와 안쪽 루프, 두 개의 루프를 사용한 예제입니다.예제let demoForLoop = ()=>{ for(var outer=1;outer<100;outer++){ &n
자바스크립트에서 문자열에 포함된 불필요한 공백을 제거하려면 trim() 메서드와 정규 표현식을 함께 사용해야 합니다. trim()은 문자열의 앞뒤 공백만 제거하고, 정규 표현식을 활용하면 문자열 중간의 공백까지 한 번에 처리할 수 있습니다. 공백이 포함된 원본 문자열 먼저 trim() 적용 전, 공백이 포함된 문자열은 다음과 같습니다. var sentence = My name is John Smith ; 예제 코드 아래 코드는 정규식 /\s+/g를 이용해 문자열 내 모든 공백을 제거한 뒤, trim()으로 남아 있는 공백까지 정리하
JavaScript에서 객체에 담긴 여러 값 중 최댓값을 구하려면 Math.max() 메서드를 사용하면 됩니다. 이때 객체의 값들을 배열 형태로 변환해주는 Object.values()를 함께 활용하면 편리합니다.구현 예제아래 예제는 학생의 과목별 점수가 담긴 객체에서 가장 높은 점수와 해당 과목(키)을 찾는 코드입니다.const studentMarksDetails = { marks1: 78, marks2: 69, marks3: 79, marks4: 74 } const maximumMarks = Math
객체 배열에 중첩된 속성을 해제(un-nest)하려면 map() 메서드를 활용하면 됩니다. map()은 배열의 각 요소를 순회하면서 새로운 배열을 반환하는 자바스크립트의 대표적인 고차 함수로, 데이터 구조를 변환할 때 가장 널리 사용됩니다.다음과 같이 학생 정보가 담긴 객체 배열이 있다고 가정해 보겠습니다.const studentDetails = [ { studentId: 101, studentName: John, subjectDetails: { subjectN
JavaScript에서 하나의 문자열에 포함된 특정 문자들을 다른 문자열에서 제거하고 싶은 경우가 있습니다. 예를 들어, 다음과 같은 두 개의 문자열이 있다고 가정해 보겠습니다.var originalName = JOHNDOE; var removalName = JOHN여기서 우리가 해야 할 작업은 첫 번째 문자열(JOHNDOE)에서 두 번째 문자열(JOHN)에 해당하는 문자들을 제거하는 것입니다.해결 방법: replace()와 reduce() 활용하기이 문제는 replace() 메서드와 reduce() 메서드를 함께 사용하면 간단하게
중첩된 배열에서 각 하위 배열의 최댓값을 한 번에 구하고 싶다면 reduce() 메서드와 Math.max() 함수를 함께 사용하면 됩니다. reduce()는 배열을 순회하면서 누적값(accumulator)을 만들어가는 메서드입니다. 여기에 스프레드 연산자(...)로 펼친 각 하위 배열을 Math.max()에 전달해 최댓값을 계산하고, 그 값을 결과 배열에 차례대로 담으면 됩니다. 코드 예시 const getBiggestNumberFromArraysPassed = allArrays => allArrays.reduce((ac
JavaScript에서 특정 작업 사이에 일시적인 대기(sleep), 즉 지연(delay)을 주고 싶다면 setTimeout() 함수를 사용하면 됩니다. 이 함수는 시간 값을 밀리초(millisecond) 단위로 받습니다.밀리초 단위 이해하기1000밀리초 = 1초2000밀리초 = 2초5000밀리초 = 5초예제: 5초 지연 후 두 값 더하기아래 예제에서는 두 개의 값을 더하는 연산에 5초, 즉 5000밀리초의 지연을 적용해 보겠습니다.var firstValue = 10;var secondValue = 20;var result = fi