[JS] JavaScript 속성 및 메서드

JavaScript 속성 및 메서드

DOM 조작

요소 선택

// 요소 선택
const element = document.getElementById('id');
const elements = document.getElementsByClassName('class');
const elements = document.getElementsByTagName('div');
const element = document.querySelector('.class');
const elements = document.querySelectorAll('div.item');

요소 속성 조작

// 속성 가져오기
element.getAttribute('src');
element.id;
element.className;
element.classList; // DOMTokenList
 
// 속성 설정
element.setAttribute('alt', '이미지 설명');
element.id = 'newId';
element.className = 'newClass';
element.classList.add('active');
element.classList.remove('disabled');
element.classList.toggle('visible');
element.classList.contains('hidden');
 
// 스타일 조작
element.style.color = 'blue';
element.style.fontSize = '16px';

콘텐츠 조작

// 내용 가져오기/설정
element.textContent; // 텍스트만 반환
element.innerText; // 표시된 텍스트만 반환
element.innerHTML; // HTML 포함하여 반환
 
element.textContent = '새로운 텍스트';
element.innerHTML = '<span>HTML 내용</span>';
 
// 요소 생성 및 추가
const newElement = document.createElement('div');
element.appendChild(newElement);
element.insertBefore(newElement, referenceElement);
element.append(newElement, '텍스트', otherElement); // 여러 노드 추가 가능
element.prepend(newElement); // 첫 번째 자식으로 추가
 
// 요소 제거
element.removeChild(childElement);
childElement.remove(); // 자기 자신 제거

이벤트 처리

// 이벤트 리스너 추가
element.addEventListener('click', function(event) {
  console.log('클릭됨!', event.target);
});
 
// 이벤트 객체 속성
event.target; // 이벤트가 발생한 요소
event.currentTarget; // 이벤트 리스너가 연결된 요소
event.preventDefault(); // 기본 동작 방지
event.stopPropagation(); // 이벤트 버블링 중단
 
// 이벤트 삭제
element.removeEventListener('click', handlerFunction);

비동기 처리

Promise

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (success) {
    resolve('성공!');
  } else {
    reject('실패!');
  }
});
 
promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('완료'));

Async/Await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('데이터 가져오기 실패:', error);
  }
}

Fetch API

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답 오류');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('오류:', error));

배열 메서드

const array = [1, 2, 3, 4, 5];
 
// 반복 메서드
array.forEach(item => console.log(item));
const doubled = array.map(item => item * 2);
const evenNumbers = array.filter(item => item % 2 === 0);
const sum = array.reduce((acc, curr) => acc + curr, 0);
const hasThree = array.some(item => item === 3);
const allPositive = array.every(item => item > 0);
 
// 탐색 메서드
array.find(item => item > 3); // 첫 번째 일치 항목 (4)
array.findIndex(item => item > 3); // 첫 번째 일치 항목의 인덱스 (3)
array.indexOf(3); // 값의 인덱스 (2)
 
// 변형 메서드
array.push(6); // 끝에 추가
array.pop(); // 끝에서 제거하고 반환
array.unshift(0); // 앞에 추가
array.shift(); // 앞에서 제거하고 반환
array.splice(2, 1, 'a'); // 인덱스 2에서 1개 요소 제거하고 'a' 추가
array.slice(1, 3); // 범위의 요소 복사 (인덱스 1부터 3 전까지)
array.concat([6, 7]); // 배열 결합
array.sort((a, b) => a - b); // 오름차순 정렬
array.reverse(); // 배열 뒤집기

객체 조작

// 객체 생성 및 속성 접근
const person = {
  name: '홍길동',
  age: 30,
  greet() {
    return `안녕하세요, ${this.name}입니다!`;
  }
};
 
person.name; // 속성 접근
person['age']; // 대괄호 표기법
person.greet(); // 메서드 호출
 
// 객체 메서드
Object.keys(person); // ['name', 'age', 'greet']
Object.values(person); // ['홍길동', 30, function]
Object.entries(person); // [['name', '홍길동'], ['age', 30], ['greet', function]]
Object.assign({}, person, { job: '개발자' }); // 객체 병합
Object.freeze(person); // 객체 동결 (변경 불가)
Object.seal(person); // 객체 밀봉 (기존 속성만 수정 가능)
 
// ES6+ 문법
const { name, age } = person; // 구조 분해 할당
const newPerson = { ...person, job: '개발자' }; // 스프레드 연산자
 
// 속성 존재 확인
'name' in person; // true
person.hasOwnProperty('age'); // true

문자열 메서드

const str = 'Hello, World!';
 
// 기본 메서드
str.length; // 13
str.indexOf('World'); // 7
str.lastIndexOf('o'); // 8
str.includes('Hello'); // true
str.startsWith('Hell'); // true
str.endsWith('!'); // true
 
// 변환 메서드
str.toUpperCase(); // 'HELLO, WORLD!'
str.toLowerCase(); // 'hello, world!'
str.trim(); // 앞뒤 공백 제거
str.replace('World', 'JavaScript'); // 'Hello, JavaScript!'
str.split(', '); // ['Hello', 'World!']
 
// 추출 메서드
str.charAt(1); // 'e'
str.substring(7, 12); // 'World'
str.slice(-6, -1); // 'World'

날짜 및 시간

const now = new Date();
 
// 날짜 가져오기
now.getFullYear(); // 연도 (2025)
now.getMonth(); // 월 (0-11)
now.getDate(); // 일 (1-31)
now.getDay(); // 요일 (0-6, 0은 일요일)
 
// 시간 가져오기
now.getHours(); // 시간 (0-23)
now.getMinutes(); // 분 (0-59)
now.getSeconds(); // 초 (0-59)
now.getMilliseconds(); // 밀리초 (0-999)
 
// 타임스탬프
now.getTime(); // 1970년 1월 1일부터의 밀리초
Date.now(); // 현재 시간의 타임스탬프
 
// 날짜 설정
now.setFullYear(2026);
now.setMonth(0); // 1월 (0)
now.setDate(15);
 
<br/>
// 날짜 형식화
now.toDateString(); // 'Sun Apr 27 2025'
now.toTimeString(); // '12:34:56 GMT+0900 (한국 표준시)'
now.toLocaleDateString('ko-KR'); // '2025. 4. 27.'
now.toLocaleTimeString('ko-KR'); // '오후 12:34:56'
now.toISOString(); // '2025-04-27T03:34:56.789Z'

정규 표현식

// 정규식 생성
const regex1 = /pattern/flags;
const regex2 = new RegExp('pattern', 'flags');
 
<br/>
 
// 주요 플래그
// g: 전역 검색
// i: 대소문자 구분 없음
// m: 다중 행 모드
// s: .이 개행 문자와 일치하도록 허용
 
<br/>
 
// 메서드
const str = 'Hello, World!';
regex.test(str); // 문자열에 패턴이 있는지 확인 (true/false)
regex.exec(str); // 첫 번째 일치 항목 정보 반환 (배열)
str.match(regex); // 일치하는 모든 문자열 배열로 반환
str.matchAll(regex); // 모든 일치 항목 정보 반환 (이터레이터)
str.search(regex); // 첫 번째 일치 항목의 인덱스 반환
str.replace(regex, replacement); // 일치 항목 교체
str.split(regex); // 일치 항목을 기준으로 분할
 
<br/>
 
// 예시
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
emailRegex.test('user@example.com'); // true