[2026.04.02]TIL - 4일차 JavaScript (DOM 이벤트, 객체, Number, 배열)

오늘은 JavaScript를 활용해서 사용자 입력을 처리하고 화면에 출력하는 방식부터,

객체와 Number, 배열까지 조금 더 JavaScript다운 개념들을 학습했다.

 

1. DOM + 이벤트 처리 (입력값 받아서 출력하기)

JavaScript를 이용하면 사용자가 입력한 값을 가져와 화면에 출력할 수 있다.

이번에는 구매자, 상품명, 가격을 입력받고 버튼 클릭 시 화면에 출력하는 기능을 구현했다.

핵심은 다음과 같다.

• input의 value 값을 가져온다
• 다양한 방식으로 요소를 선택한다 (tag, id, name)
• innerHTML로 결과를 출력한다
• 이벤트를 통해 동작을 실행한다

특히 window.onload를 사용하면 페이지가 모두 로드된 이후에 이벤트를 연결할 수 있다.

 

---

2. 객체 (Object)

JavaScript에서 객체는
데이터와 기능을 함께 묶은 구조이다.

객체를 만드는 방법은 여러 가지가 있다.

 

1. 생성자 함수 이용

생성자 함수는 new 키워드와 함께 호출하여 객체를 생성할 수 있다.
this를 사용해 객체의 속성과 기능을 정의할 수 있고, 생성된 객체는 속성값 변경이나 메서드 호출도 가능하다.

 

2. 객체 리터럴 방식

객체 리터럴 방식은 {}를 사용해 객체를 직접 만드는 방법이다.

속성은 key: value 형태로 작성하며, 문자열, 숫자, 배열, 객체, 함수 등 다양한 형태의 데이터를 하나의 객체 안에 넣을 수 있다.

이번 코드에서는 person 객체 안에 이름, 나이 같은 기본 정보뿐 아니라 취미 배열, 추가 정보 객체, 함수까지 함께 넣어 객체가 여러 데이터를 묶어 관리하는 구조라는 점을 확인할 수 있었다.

또한 일반적인 키뿐 아니라 공백이 있는 "like dog" 같은 속성도 사용할 수 있다는 점도 볼 수 있었다.

 

3. class 를 이용한 객체 생성

 

JavaScript에서는 class 문법을 사용해 객체를 조금 더 구조적으로 만들 수 있다.

 

constructor를 이용하면 객체를 생성할 때 필요한 값을 전달받아 속성을 초기화할 수 있다.

 

이번 코드에서는 Test2 클래스의 생성자를 통해 이름과 나이를 전달받아 객체를 만들었고, 생성된 객체의 속성에 바로 접근할 수 있었다.

 

또한 생성자 함수를 이용해 만든 객체도각 인스턴스마다 독립적으로 값을 가질 수 있다는 점을 함께 확인했다.

예를 들어 test1.name만 변경해도 test2.name에는 영향을 주지 않는다.

특징 정리

- this를 사용하면 객체의 속성에 접근할 수 있다
- 함수도 객체의 속성으로 넣을 수 있다
- 동적으로 속성 추가 / 수정 / 삭제가 가능하다

 

---

3. Number 객체

JavaScript에서는 숫자도 객체처럼 다룰 수 있다.

Number 객체를 이용하면 숫자를 다양한 방식으로 처리할 수 있다.

 

1) 문자열 변환과 소수점 처리

 

• toString()은 숫자를 문자열로 변환한다.
• toFixed(2)는 소수점 둘째 자리까지 표현하고 문자열로 반환한다.

2) 숫자인지 확인하는 함수

 

• isNaN()은 숫자로 바꿀 수 없는 값이면 true를 반환한다.
• Number.isNaN()은 값이 실제 NaN일 때만 true를 반환한다.
• 그래서 Number.isNaN()이 더 엄격하고 정확한 검사라고 볼 수 있다.

 

 

 

중요한 포인트

- isNaN()은 문자열도 검사해서 헷갈릴 수 있음
- Number.isNaN()이 더 정확하다

---

4. 배열 (Array)

배열은 여러 데이터를 하나로 묶어서 관리하는 구조이다.

JavaScript 배열은
서로 다른 타입의 데이터도 함께 저장할 수 있다.

 

1) 배열 생성 방법

• new Array()
• [] (리터럴 방식)

배열은 new Array()로 만들 수도 있고, [] 리터럴 방식으로도 만들 수 있다.
또한 길이만 지정해서 빈 배열을 만들거나, 값을 바로 넣어서 생성할 수도 있다.

2) 주요 특징

• length로 길이 확인 가능
• 인덱스로 접근
• 자동으로 길이 증가

3) 주요 메소드

• indexOf() : 배열에서 원하는 요소의 위치를 찾는 메소드이다. 값이 있으면 인덱스를 반환하고, 없으면 -1을 반환한다.
• concat() : 두 개 이상의 배열을 합쳐 새로운 배열을 만든다. 기존 배열은 변경되지 않는다.
• join() : 배열의 요소들을 하나의 문자열로 연결한다. 구분 문자를 직접 지정할 수도 있다.
• sort() : 배열의 요소를 정렬한다. 문자열은 기본 정렬이 가능하지만, 숫자는 비교 함수를 함께 써야 원하는 순서로 정렬할 수 있다.
• push / pop : push()는 배열의 맨 뒤에 요소를 추가하고, pop()은 배열의 맨 뒤 요소를 제거한다.
• shift / unshift : shift()는 배열의 맨 앞 요소를 제거하고, unshift()는 배열의 맨 앞에 요소를 추가한다.
• slice : 배열의 일부를 잘라 새로운 배열로 반환한다. 원본 배열은 변경되지 않는다.
• splice : 배열의 특정 위치에서 요소를 삭제하거나 추가할 수 있다. 원본 배열이 직접 변경된다.

---

5. 정리 및 느낀점

이번 학습을 통해 JavaScript가 단순한 문법이 아니라 사용자 입력을 처리하고 화면을 제어하는 역할을 한다는 걸 이해할 수 있었다.

특히 DOM을 통해 값을 가져오고 이벤트로 동작을 실행하며 innerHTML로 화면을 변경하는 흐름이 자연스럽게 이어졌다.

또한 객체와 배열을 통해 데이터를 구조적으로 다루는 방법도 익힐 수 있었다.

메소드들이 많지만 직접 사용하면서 익숙해질 수 있었다.