자바스크립트(JS) 언어 정리

윤슬·2025년 9월 22일
JavaScript

자바스크립트(JS) 기초 정리

HTML, CSS, JS 역할

  • HTML : 하이퍼 텍스트 마크업 언어 → 웹문서 뼈대
  • CSS : 캐스케이드 스타일 시트 언어 → 웹문서 디자인
  • JS : 자바스크립트 → 웹문서 동적, 프로그래밍 언어
    • HTML 안에 CSS와 JS 포함 가능

JS 사용처

  1. 웹프로그래밍
  2. 서버 개발
  3. 소프트웨어 개발

JS 라이브러리/프레임워크 종류

  1. REACT, ANGULAR, VUE, JQUERY : 프론트엔드
  2. NODE.JS : 2009년 이후 백엔드 역할
  3. REACT NATIVE : 앱 (지원 중단)
  4. REACT NATIVE WEB : 웹+앱
  5. NW.JS : 소프트웨어

JS 사용법

  • 주의 : HTML 없이 JS 파일만으로 실행 불가

방법1 (HTML 내 포함)
1. HTML 파일 <body> 마크업 안 가장 아래
2. <script> 마크업을 이용하여 JS 코드 작성

방법2 (외부 파일)
1. JS 파일 생성 후 코드 작성
2. HTML 파일 <body> 마크업 안 가장 아래
3. <script src="JS파일경로"></script>

JS 주석

  • HTML : <!-- 주석내용 -->
  • CSS : /* 주석내용 */
  • JS :
    • /* 여러 줄 주석 */
    • // 한 줄 주석

JS 실행 확인

  • 브라우저(F12 개발자 도구)
    • sources 탭 : .js 파일 확인
    • console 탭 : 출력 메시지 확인

기본 필수 용어

  1. 데이터(Data) : 사실이나 값을 나타낸 객관적 자료
    • 예) 사람 나이, 키, 이름 / 제품 가격, 제품명
  2. 리터럴 : 소스코드에 직접 표현한 값
    • 상수 = 수정 불가능 고정값
    • 자료형(type) 정해짐
  3. 자료형 : 데이터를 분류하는 방법

JS 자료형

  1. 숫자형(Number) : 10, 3.14
  2. 문자열(String) : "문자열" 또는 '문자열'
  3. 불리언(Boolean) : true, false
  4. 배열(Array) : [자료, 자료, 자료]
  5. 객체(Object) : {속성명: 자료, 속성명: 자료}
  6. 특수
    • undefined : 자료 미할당 상태
    • null : 자료 없음

예시 생각해보기

  • [10, 'A', "사과", 3.14] → 자료 5개 (10, 'A', "사과", 3.14, [])

  • [ { 이름: "이겨레" }, 'A', 3.14 ] → 자료 5개 ("이겨레", {}, 'A', 3.14, [])

  • 키워드 : [], {}, console, Number, String, if, for 등

변수와 상수

  • 변수 : let 변수명 = 자료; (수정 가능)
  • 상수 : const 변수명 = 자료; (수정 불가)

출력함수

  1. console.log(자료) : 브라우저 console 탭
  2. alert(자료) : 브라우저 알림 창

입력함수

  1. confirm("메시지") : 확인/취소 → true/false 반환
    • let 변수명 = confirm("메시지");
  2. prompt("메시지") : 텍스트 입력 → 입력값 반환
    • let 변수명 = prompt("메시지");

문자열

  • 템플릿 리터럴
    • "문자열" + 변수 + "문자열"
    • `문자열 ${변수} 문자열`
  • 이스케이프 문자
    • \\ : 백슬래시
    • \' : 작은따옴표
    • \" : 큰따옴표
    • \n : 줄바꿈
    • \t : 탭

배열

  • 여러 자료를 순서대로 저장
  • 인덱스 : 0부터 시작
  • 선언 : let/const 변수명 = [자료, 자료]
  • 호출 : 변수명 또는 변수명[인덱스]
  • 수정 : 변수명[인덱스] = 새로운값
  • 길이 : 변수명.length

자주 쓰는 배열 함수

  • push() : 요소 추가
  • splice(index, 개수) : 요소 삭제
  • indexOf(값) : 인덱스 반환, 없으면 -1

자료형 형변환

  1. 자동
    • "문자열" * 1 → 숫자형
    • "문자열" + 숫자형 → 문자열
  2. 수동
    • Number() : 문자열 → 숫자
    • parseInt() : 문자열 → 정수
    • parseFloat() : 문자열 → 실수
    • String() : 기타 → 문자열
    • Boolean() : 문자열 → 논리형

연산자

  1. 산술 : + - * / %
  2. 연결 : +
  3. 비교 : > < >= <= == != === !==
  4. 논리 : && || !
  5. 대입 : = += -= *= /= %=
  6. 증감 : ++, --
  7. 삼항 : 조건 ? 참 : 거짓

조건문

  • if, if-else, else if 중첩 가능

반복문

  • for(초기값; 조건; 증감)
  • 배열과 반복문 연계 : for(let i=0; i<배열.length; i++)
  • 중첩 : 상위 반복문 1회 반복 시 하위 반복문 전체 반복
  • 제어 키워드 : continue, break, 무한루프 for(;;)

프로그래밍 관점

  1. 절차지향(C언어) : 순차적 실행
  2. 객체지향(JAVA, JS, Python, C++) : 데이터와 기능 묶음, 재사용/확장 가능

객체

  • 객체(Object) : 데이터+기능을 하나로 묶음
  • 클래스 기반 : class / 클래스 없는 객체 : { }
  • 배열 vs 객체
    • 배열 [ ] : 인덱스, 순서 있음
    • 객체 { } : 속성명, 순서 없음
  • 선언 : let 변수명 = { 속성명: 자료 }
  • 호출 : 변수명.속성명 또는 변수명['속성명']
  • 주요 함수
    • Object.keys(), Object.values(), Object.entries()
  • 속성 다루기
    • 추가/수정 : 변수명.속성명 = 자료
    • 삭제 : delete 변수명.속성명
    • 확인 : '속성명' in 변수명

배열과 객체 활용

  • 배열 안 객체 : [ {}, {}, {} ]
  • 객체 속성 접근 : 변수명[인덱스].속성명
  • 지역변수 : { } 안에서만 사용 가능

함수

  • 정의 : { } 안에 코드 정의
  • 목적 : 재사용, 매개변수별 실행 결과, 지역변수 관리
  • 선언 : function 함수명(매개변수){ return 반환값; }
  • 호출 : 함수명(인자값); let 결과 = 함수명();
  • HTML 이벤트 호출 : <마크업 이벤트속성명="함수명()">

DOM 객체

  • document : HTML 문서 객체
  • 주요 메서드
    • querySelector(), querySelectorAll()
    • .innerHTML, .value, .style, .src, .remove()
    • .classList.add/remove/toggle/contains()
    • 파일 객체 : .files[0], URL.createObjectURL()

날짜/시간 객체

  • new Date()
  • getFullYear(), getMonth() +1, getDay(), getDate()

웹스토리지

  • 정의 : 브라우저 외부 저장소
  • 종류 : sessionStorage, localStorage
  • 사용법
    • .setItem('key', 값)
    • .getItem('key')
    • .removeItem('key')
    • .clear()

JSON

  • JSON.stringify(자료) : 객체→문자열
  • JSON.parse(자료) : 문자열→객체
  • 활용 : 웹스토리지, 비동기 통신

interval

  • setInterval(함수, 밀리초) : 반복 실행
  • clearInterval(interval객체) : 중지

라이브러리

profile
윤슬
우상향그래프
이전 포스트

CSS 언어 정리

다음 포스트

JAVA 언어 정리

0개의 댓글