반복문이나 배열을 이용해 버튼 목록을 동적으로 생성할 때, 사용자가 정확히 어떤 요소를 클릭했는지 알아내야 하는 경우가 자주 있습니다. 이럴 때 addEventListener() 메서드와 이벤트 객체의 target 속성을 활용하면 간단하게 해결할 수 있습니다.핵심 원리각 요소에 클릭(click) 이벤트 리스너를 등록하면, 콜백 함수로 전달되는 이벤트 객체(evnt)의 evnt.target을 통해 실제로 클릭된 요소를 확인할 수 있습니다. 나아가 dataset 속성으로 각 버튼에 고유한 데이터(예: 과목명)를 미리 저장해 두면, 어떤
JavaScript 문자열에서 두 글자마다 공백을 삽입하려면 replace() 메서드와 정규 표현식을 함께 사용하면 됩니다. 별도의 반복문 없이 한 줄의 코드로 간단하게 처리할 수 있습니다.정규 표현식 동작 원리여기서 사용되는 정규 표현식 /.{1,2}(?=(.{2})+$)/g는 임의의 1~2개 문자를 매칭한 뒤, 그 뒤에 오는 문자들이 2글자 단위로 끝나는지 전방 탐색(?=)으로 확인합니다. 이렇게 하면 문자열 끝부분에 불필요한 공백이 추가되는 것을 방지할 수 있습니다.예제 코드다음은 JavaScriptTutorial이라는 문자열
JavaScript에서 element.classList 지우기HTML 요소에 적용된 클래스를 제거하려면 JavaScript의 classList.remove() 메서드를 사용하면 됩니다. 이 메서드는 인자로 전달된 클래스 이름을 해당 요소에서 삭제하며, 클래스가 없어도 에러가 발생하지 않으므로 안전하게 사용할 수 있습니다.참고로 요소에 있는 모든 클래스를 한 번에 지우고 싶다면 element.className = ;처럼 className 속성을 빈 문자열로 설정하는 방법도 유용합니다.예제 코드다음은 classList.remove()를
JavaScript에서 함수에 매개변수가 제대로 전달되었는지 확인하려면 if 조건문을 사용하고 매개변수를 undefined와 비교하면 됩니다. JavaScript에서는 함수 호출 시 값이 전달되지 않은 매개변수가 자동으로 undefined가 되기 때문입니다.예제다음은 매개변수 전달 여부를 확인하는 코드입니다.function checkingParameter(parameter) { if (parameter !== undefined) { console.log(매개변수가 전달되었습니다.); } else {
JavaScript에서는 함수를 호출할 때 인자로 undefined가 전달되는 경우가 종종 발생합니다. 예를 들어 다음과 같은 두 가지 값이 함수로 전달된다고 가정해 보겠습니다.300undefined이처럼 undefined가 전달될 경우 프로그램이 비정상적으로 동작하는 것을 막기 위해, 함수 내부에서 기본값(default value)을 설정해 주는 것이 좋습니다.기본값 설정 예제다음 코드는 전달받은 값이 undefined인지 확인한 후, 그렇다면 기본값인 100000으로 대체하는 예제입니다.function showValue(valu
네, not not(!!) 연산자는 not(!) 연산자의 반대 과정이라고 할 수 있습니다. 어떤 값이 true일 때 단일 !(not)을 적용하면 false가 되고, 여기에 한 번 더 !(not)을 적용한 !!(not not)은 다시 원래 값인 true를 반환하게 됩니다.즉, !!(not not) 연산자는 값을 명시적으로 불리언(Boolean) 타입으로 변환하는 데 자주 사용되며, 원래 값의 진위 여부를 그대로 유지합니다.not(!) 연산자란?not 연산자는 값의 논리적 부정을 수행합니다. true를 false로, false를 tru
JavaScript에서 배열의 indexOf 기능을 직접 만들고 싶다면, 재귀(recursion)를 활용한 사용자 정의 함수를 작성할 수 있습니다. 검색하려는 값이 배열에 존재하면 해당 요소의 인덱스를 반환하고, 존재하지 않으면 -1을 반환하도록 구현합니다.구현 원리재귀 방식의 핵심 로직은 다음과 같습니다.현재 인덱스가 배열 길이 이상이면 값을 찾지 못한 것이므로 -1을 반환합니다.현재 인덱스의 요소가 찾으려는 값과 일치하면 그 인덱스를 반환합니다.일치하지 않으면 인덱스를 1 증가시켜 자기 자신을 다시 호출합니다.예제 코드다음은 위
원인: if 조건식에서 대입 연산자(=)를 사용하고 있습니다 if 조건 안에 등호(=) 하나만 쓰면 JavaScript는 이를 비교가 아닌 대입(assignment)으로 해석합니다. 즉, 조건을 검사하는 대신 오른쪽 값을 왼쪽 변수에 할당하게 되며, 할당된 값이 참(truthy)으로 평가되는 한 if 블록은 매번 실행됩니다. 두 값이 같은지 비교하려면 동등 연산자(==) 또는 일치 연산자(===)를 사용해야 합니다. 두 연산자의 차이는 다음과 같습니다. == (동등 연산자) : 비교하기 전에 양쪽 값의 자료형을 자동으로 변환한 뒤
HTML 테이블 내의 모든 셀(td) 요소에 IF 조건문을 적용하려면 document.querySelectorAll()과 forEach() 메서드를 함께 사용하면 됩니다. querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 NodeList 형태로 반환하며, forEach()를 통해 각 요소를 순회하면서 원하는 조건 로직을 실행할 수 있습니다.예제 코드다음은 테이블의 각 셀을 순회하면서 IF 조건문으로 텍스트를 변경하는 전체 코드입니다.<!DOCTYPE html> <html lang="e
JavaScript에서 문자열을 여러 번 반복해야 할 때는 Array() 생성자와 join() 메서드를 함께 사용하면 간단하게 해결할 수 있습니다.동작 원리new Array(n + 1)은 길이가 n+1인 빈 배열을 만들고, 이 배열에 join()으로 구분자를 연결하면 구분자가 n번 반복됩니다. 즉, 원하는 문자열을 구분자로 지정하면 해당 문자열이 정확히 n번 반복된 결과를 얻을 수 있습니다.예제다음은 전체 코드입니다 −<!DOCTYPE html> <html lang="ko"> <
JavaScript에서 특정 ID를 가진 요소를 제거하려면 remove() 메서드를 사용하면 됩니다. 이 메서드는 해당 요소를 DOM에서 완전히 삭제하며, 부모 노드를 따로 참조하지 않아도 되어 매우 간편하게 사용할 수 있습니다.예제다음은 ID가 demo인 h1 요소를 remove() 메서드로 제거하는 전체 코드입니다.<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &n
JavaScript에서 함수의 실행 결과를 HTML 페이지에 표시하려면 document.getElementById().innerHTML 속성을 활용할 수 있습니다. 이 방법은 특정 ID를 가진 HTML 요소를 찾아 그 내부에 원하는 텍스트나 결과값을 동적으로 삽입하는 가장 기본적이고 널리 사용되는 방식입니다.기본 문법document.getElementById().innerHTML예제 코드다음은 페이지 내의 텍스트 입력 상자(input type=text) 개수를 세어 그 결과를 화면에 출력하는 전체 코드입니다.<!DOCTYPE
개요H1 태그 안에 span 같은 자식 요소가 포함되어 있을 때, 자식 요소의 텍스트를 제외한 순수한 H1의 텍스트만 추출해야 하는 경우가 있습니다. 이럴 때는 childNodes와 textContent 속성을 함께 사용하면 간단하게 해결할 수 있습니다.textContent를 사용한 방법querySelector()로 h1 요소를 선택한 뒤, childNodes[0]으로 첫 번째 자식 노드(텍스트 노드)에 접근하고 textContent로 값을 읽어오면 됩니다. 이렇게 하면 span 등 다른 자식 요소의 텍스트는 포함되지 않습니다.ch
JavaScript에서 현재 열려 있는 전체 문서(document)의 HTML을 문자열로 가져오려면 innerHTML 속성을 활용하면 됩니다.가장 간단한 방법은 다음과 같습니다.document.documentElement.innerHTML;위 코드는 루트 요소인 <html> 태그를 기준으로 내부에 포함된 모든 HTML 콘텐츠를 문자열 형태로 반환합니다.예제 코드다음은 실제 동작을 확인할 수 있는 전체 예제입니다.<!DOCTYPE html> <html lang=en> <head> &l
HTML 폼에서 input type=submit 또는 button type=submit을 사용할 때 JavaScript 이벤트 핸들러가 제대로 작동하지 않는 경우가 있습니다. 이 문제를 해결하려면 onclick 속성과 함께 event.preventDefault()를 사용하여 폼의 기본 제출 동작을 막아야 합니다. 해결 방법: onclick 이벤트 활용 버튼의 onclick 속성에 이벤트 객체를 전달하는 함수를 연결하고, 함수 내부에서 preventDefault()를 호출하면 페이지 새로고침 없이 JavaScript 로직을 실행할
JavaScript에서 map() 함수는 원본 배열을 변경하지 않고 새로운 배열을 반환하는 특징이 있습니다. 따라서 map()의 실행 결과를 반드시 변수에 담거나 다른 배열에 추가해야 새 요소가 저장됩니다. 아래 예제를 통해 map()을 올바르게 활용하여 각 하위 배열의 요소에 인덱스 값을 더한 새 배열을 만드는 방법을 살펴보겠습니다.예제 코드다음은 전체 코드입니다 −const addIndexValueToArrayElement = function (arrObject) { const updatedAr
JavaScript에서 객체의 속성을 제거하려면 delete 키워드를 사용합니다. 배열에 포함된 모든 객체에서 동일한 속성을 한 번에 제거하려면 forEach() 메서드와 함께 delete 키워드를 활용하면 됩니다.예제 코드다음은 배열의 모든 객체에서 lastName 속성을 제거하는 예제입니다.var values = [ { firstName: John, lastName: Smith }, { firstName: David, lastName: Miller
기존 객체에 함수가 반환한 객체의 속성을 한 번에 할당하려면 스프레드 연산자(spread operator)를 활용하면 됩니다. 가장 짧고 간결한 구문은 다음과 같습니다.{...객체명1, ...객체명2}동작 원리...(스프레드 연산자)는 객체가 가진 모든 열거 가능한 속성을 새로운 객체 리터럴 안으로 펼쳐 넣는 역할을 합니다. 이를 활용하면 여러 객체의 속성을 별도의 반복문이나 병합 함수 없이 단 한 줄의 코드로 하나의 객체로 합칠 수 있습니다.예제다음은 함수가 반환한 객체의 속성을 기존 객체에 병합하는 전체 코드입니다.functio
JavaScript에서 배열이나 객체에 null 값이 포함되어 있는지 확인하려면 includes() 메서드를 활용하면 됩니다. 배열에는 이 메서드를 바로 적용할 수 있고, 객체의 경우 Object.values()로 값을 배열 형태로 추출한 뒤 확인하는 방식을 사용합니다.예제 코드다음은 배열 두 개와 객체 하나에 대해 null 값 존재 여부를 검사하는 전체 코드입니다.var nameArray1 = [John, David, Mike, Sam, null]; if (nameArray1.includes(null) == true) {
JavaScript에서 배열 안에서 특정 조건에 맞는 레코드 하나만 가져오고 싶다면 find() 메서드를 사용하는 것이 가장 간단한 방법입니다.find() 메서드란?find() 메서드는 배열의 각 요소를 순회하면서 콜백 함수의 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다. 전체 목록이 아닌 단일 레코드가 필요할 때 특히 유용합니다.예제 코드학생 객체 배열에서 studentId가 102인 학생을 찾는 코드입니다. { return o.studentId === 102; })