자바스크립트의 필수적인 문법과 메서드 총정리

1. 기본 문법

• 변수 선언
  • let, const: 변수를 선언합니다. const는 재할당할 수 없는 상수입니다.
• 데이터 타입
  • Number, String, Boolean, Object, Array: 자바스크립트의 기본 데이터 타입들입니다.
• 조건문
  • if, else if, else: 조건에 따라 코드 블록을 실행합니다.
  • switch: 여러 가능한 경우에 대해 코드를 실행합니다.
• 반복문
  • for: 특정 횟수만큼 코드를 반복 실행합니다.
  • while, do...while: 조건이 참인 동안 코드를 반복 실행합니다.
  • for...of: 배열과 같은 반복 가능한 객체의 각 요소에 대해 반복합니다.
  • for...in: 객체의 열거 가능한 속성들을 반복합니다.
• 연산자
  • 산술 연산자: +, -, *, /, %, ++, --: 기본적인 수학 연산을 수행합니다.
  • 비교 연산자: ==, ===, !=, !==, >, <, >=, <=: 두 값을 비교합니다.
  • 논리 연산자: &&, ||, !: 논리 연산을 수행합니다.

2. 함수

• 함수 선언
  • function() {}: 함수의 이름과 내용을 정의합니다.
• 함수 표현식
  • const func = function() {};: 익명 함수로 변수를 초기화합니다.
• 화살표 함수
  • const func = () => {};: 짧은 구문의 익명 함수입니다.

3. 객체와 클래스

• 객체 리터럴
  • { key: value }: 키-값 쌍의 집합체를 정의합니다.
• 객체 메서드
  • Object.keys(): 객체의 모든 키를 배열로 반환합니다.
  • Object.values(): 객체의 모든 값을 배열로 반환합니다.
  • Object.assign(): 하나 이상의 객체를 결합해 새 객체를 만듭니다.
• 클래스 선언
  • class MyClass {}: 객체의 설계를 정의합니다.
• 클래스 상속
  • extends: 기존 클래스를 확장해 새로운 클래스를 정의합니다.

4. 배열 메서드

• push(): 배열 끝에 요소를 추가합니다.
• pop(): 배열 끝의 요소를 제거하고 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
• unshift(): 배열의 처음에 요소를 추가합니다.
• splice(): 배열에서 요소를 추가, 삭제, 또는 교체합니다.
• slice(): 배열의 일부분을 새 배열로 반환합니다.
• concat(): 두 개 이상의 배열을 결합합니다.
• forEach(): 배열의 각 요소에 대해 함수를 실행합니다.
• map(): 배열의 각 요소를 변환해 새 배열을 만듭니다.
• filter(): 조건을 만족하는 배열의 요소들로 새 배열을 만듭니다.
• reduce(): 배열을 누적해서 단일 값으로 만듭니다.
• find(): 조건을 만족하는 첫 번째 요소를 반환합니다.
• includes(): 배열이 특정 요소를 포함하는지 확인합니다.

5. 문자열 메서드

• charAt(): 문자열의 특정 인덱스의 문자를 반환합니다.
• concat(): 두 개 이상의 문자열을 결합합니다.
• includes(): 문자열이 특정 문자열을 포함하는지 확인합니다.
• indexOf(): 특정 문자가 처음 나타나는 위치를 반환합니다.
• slice(): 문자열의 일부분을 추출합니다.
• split(): 문자열을 배열로 분할합니다.
• replace(): 특정 문자열을 다른 문자열로 대체합니다.
• toLowerCase(): 문자열을 소문자로 변환합니다.
• toUpperCase(): 문자열을 대문자로 변환합니다.
• trim(): 문자열의 양쪽 공백을 제거합니다.

6. 비동기 프로그래밍

• Promise
  • Promise: 비동기 작업의 완료를 처리하는 객체입니다.
  • then(): Promise가 이행될 때 실행할 코드를 정의합니다.
  • catch(): Promise가 거부될 때 실행할 코드를 정의합니다.
  • finally(): Promise가 완료된 후 항상 실행할 코드를 정의합니다.
• async/await
  • async: 비동기 함수를 정의합니다.
  • await: Promise가 해결될 때까지 기다립니다.

7. 이벤트 핸들링

• addEventListener(): 이벤트를 감지하고 처리하는 함수를 연결합니다.
• removeEventListener(): 이벤트 핸들러를 제거합니다.
• preventDefault(): 기본 이벤트 동작을 막습니다.
• stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 막습니다.

8. DOM 조작

• 선택자
  • document.getElementById(): 특정 ID를 가진 요소를 선택합니다.
  • document.querySelector(): CSS 선택자를 사용해 첫 번째 요소를 선택합니다.
  • document.querySelectorAll(): CSS 선택자를 사용해 모든 일치하는 요소를 선택합니다.
• DOM 조작 메서드
  • innerHTML: 요소의 HTML 내용을 가져오거나 설정합니다.
  • style: 요소의 스타일을 변경합니다.
  • setAttribute(), getAttribute(), removeAttribute(): 요소의 속성을 조작합니다.
  • appendChild(), removeChild(): 요소를 추가하거나 제거합니다.