JavaScript 객체 생성 · 배열 완전 정리

 

 

Web Development · JavaScript

JavaScript 객체 생성 · 배열

book 객체 생성 방식, 문자열 배열, split, reverse 예제를 정리합니다.

시작 오늘 분석할 코드

이 장은 JavaScript의 기본 데이터 구조와 브라우저 출력 연습을 묶은 내용입니다. 객체를 만드는 방식, 배열을 순회하고 정렬하는 방식, Date와 색상 문자열을 화면에 반영하는 흐름을 구분합니다.

let book = new Object(); book.title = "HTML5"; book.author = "황기태"; book.price = 20000; let book2 = { title: "HTML5", author: "황기태", price: 20000 }; function Book() { this.title = "HTML5"; this.author = "황기태"; this.price = 20000; } let names = new Array("wonsun", "jaemoonlee", "kitae", "gracehwang"); names.sort();

Object속성을 가진 JavaScript 객체입니다.

literal중괄호로 객체를 직접 만드는 방식입니다.

constructornew와 함께 객체를 만드는 함수입니다.

Array여러 값을 순서대로 저장합니다.

split문자열을 배열로 나눕니다.

reverse배열 순서를 뒤집습니다.

---

1 book 객체를 만드는 세 방식

원문은 같은 book 데이터를 세 가지 방식으로 만듭니다. new Object, 객체 리터럴, 생성자 함수 방식입니다.

방식	코드	특징
new Object	let book = new Object()	빈 객체를 만든 뒤 속성 추가
객체 리터럴	{ title: "HTML5" }	가장 간단하고 많이 사용
생성자 함수	function Book()	같은 구조의 객체를 여러 개 만들 때 사용
new Book	let book = new Book()	this로 속성을 초기화

---

2 속성 접근

객체 속성은 점 표기법으로 읽습니다. book.title, book.author, book.price를 이어 출력하면 책 정보를 표시할 수 있습니다.

객체 생성

→

속성 저장

→

속성 읽기

---

3 생성자 함수와 this

생성자 함수 안의 this는 새로 만들어질 객체를 가리킵니다. 그래서 this.title에 값을 넣으면 생성된 book 객체가 그 속성을 갖습니다.

함수 선언

Book이라는 설계도를 만듭니다.

new Book()

설계도를 바탕으로 실제 객체를 만듭니다.

---

 

반응형

 

4 문자열 배열 출력

문자열 배열 예제는 이름 목록을 출력하고, 가장 긴 이름, 사전순으로 가장 앞선 이름, 정렬 결과를 구합니다.

작업	코드 흐름	결과
전체 출력	for 반복문	모든 이름 표시
가장 긴 이름	length 비교	jaemoonlee
가장 먼저 나오는 이름	문자열 비교	gracehwang
증가순 출력	sort()	사전식 정렬

---

5 문자열 비교

문자열은 문자 코드 순서로 비교됩니다. 원문 메모처럼 gracehwang이 먼저 나오는 이유는 g가 다른 이름의 첫 글자보다 앞서기 때문입니다.

JavaScript 문자열 비교는 사전식 비교처럼 동작하지만, 정확히는 유니코드 코드 포인트 기준이라고 이해하면 됩니다.

---

6 split으로 문자열 분할

split("&")은 입력 문자열을 & 기준으로 나누어 배열로 만듭니다. 예를 들어 사과&바나나&망고는 세 항목으로 나뉩니다.

입력	구분자	결과
a&b&c	&	a, b, c
red,blue	,	red, blue
hello	&	hello 하나
빈 입력	&	검사 필요

---

7 입력받고 역순 출력

정수 5개 입력 예제는 prompt로 숫자를 받고 배열에 저장한 뒤, reverse()로 순서를 뒤집어 출력합니다.

1

배열 준비values 빈 배열을 만듭니다.

2

prompt 입력반복문으로 5번 입력받습니다.

3

parseInt문자열을 정수로 바꿉니다.

4

reverse배열 순서를 뒤집습니다.

---

8 document.write의 역할

원문 예제들은 대부분 document.write로 결과를 바로 문서에 씁니다. 학습용으로 흐름이 단순하지만, 실제 페이지에서는 특정 DOM 요소에 출력하는 방식이 더 안정적입니다.

출력 방식	장점	주의
document.write	예제가 짧음	로드 후 사용하면 문서가 덮일 수 있음
innerHTML	HTML 출력 가능	입력값 보안 주의
textContent	안전한 텍스트 출력	HTML 태그 해석 안 함
appendChild	DOM 구조 유지	코드가 조금 길어짐

---

9 자주 하는 실수

실수	증상	해결
객체 방식 혼동	this와 리터럴을 섞어 생각합니다.	생성 방식별 목적을 구분합니다.
문자열 비교 오해	예상과 다른 이름이 앞에 옵니다.	문자 코드 기준을 이해합니다.
prompt 취소 처리 없음	null 처리 오류가 납니다.	null 검사 후 split/parseInt를 실행합니다.
parseInt 결과 확인 없음	NaN이 배열에 들어갑니다.	isNaN으로 검사합니다.
reverse 원본 변경 모름	원래 배열 순서가 사라집니다.	필요하면 복사본을 만듭니다.

---

10 복습 체크리스트

체크	통과 기준
Object	new Object 방식으로 속성을 추가할 수 있습니다.
literal	객체 리터럴 구조를 설명합니다.
constructor	this로 속성을 초기화하는 흐름을 압니다.
array	length와 반복문으로 배열을 처리합니다.
split	구분자로 문자열을 배열로 나눕니다.
reverse	배열 순서를 뒤집습니다.

---

11 디버깅 포인트

확인	콘솔 예시	의미
객체	console.log(book)	속성 구조 확인
배열	console.log(names)	현재 순서 확인
길이	console.log(names[i].length)	가장 긴 이름 비교
split 결과	console.log(array)	분할 결과 확인
NaN	console.log(isNaN(n))	정수 입력 확인

---

12 테스트 케이스

케이스	입력	예상
book 출력	세 방식 실행	같은 책 정보 출력
긴 이름	문자열 배열	가장 긴 이름 표시
split	a&b&c	세 줄 출력
정수 입력	1,2,3,4,5	역순 5,4,3,2,1
취소	prompt 취소	추가 검사 필요

---

12 객체 개선 연습

book 객체 예제는 속성만 가진 객체에서 시작합니다. 여기에 메서드나 여러 책 배열을 추가하면 객체와 배열을 함께 연습할 수 있습니다.

A

메서드 추가book.print = function() 형태로 출력 메서드를 추가합니다.

B

생성자 인자Book(title, author, price)처럼 값이 다른 책을 만들게 바꿉니다.

C

책 배열여러 book 객체를 배열에 넣고 반복문으로 출력합니다.

D

가격 비교가장 비싼 책을 찾는 반복문을 작성합니다.

연습	목표	힌트
속성 추가	publisher 추가	book.publisher
가격 변경	할인가 계산	book.price * 0.9
메서드 출력	객체 내부 함수 사용	this.title
객체 배열	여러 책 관리	books.push(book)
정렬	가격순 정렬	sort((a,b)=>a.price-b.price)

---

13 배열 개선 연습

문자열 배열과 정수 배열 예제는 기본 반복문을 익히기 좋습니다. 이후에는 map, filter 같은 배열 메서드로 같은 일을 다시 작성해 볼 수 있습니다.

작업	반복문 방식	배열 메서드 방식
전체 출력	for	forEach
길이 변환	새 배열에 push	map(name => name.length)
긴 이름 필터	if 조건	filter
정렬	sort	sort 비교 함수
역순	reverse	복사 후 reverse

reverse와 sort는 원본 배열을 직접 바꿉니다. 원본 순서가 필요하면 먼저 복사본을 만들어야 합니다.

---

14 추가 테스트

테스트	확인 내용
객체 속성 추가	book.year를 추가하고 출력되는지 확인합니다.
생성자 재사용	new Book()을 두 번 호출해 서로 다른 객체인지 봅니다.
문자열 정렬	대문자 이름을 섞으면 순서가 어떻게 바뀌는지 확인합니다.
split 구분자 없음	&가 없는 문자열을 넣으면 배열 길이가 1인지 봅니다.
숫자 입력 취소	prompt 취소 시 parseInt 결과를 확인합니다.
원본 보존	복사본 reverse 후 원본 배열이 유지되는지 봅니다.
배열 길이	push 후 length가 증가하는지 확인합니다.

마무리

핵심 기준객체는 속성 묶음, 배열은 순서 있는 값 묶음으로 이해하면 됩니다.

---

핵심 한 줄 요약

object객체는 new Object, 리터럴, 생성자 함수 방식으로 만들 수 있습니다.

array배열은 반복문, length, sort, reverse로 다룹니다.

stringsplit은 문자열을 구분자로 나누어 배열을 만듭니다.

Tags

#JavaScript#Object#Array#객체#배열#split#reverse#sort#prompt#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, Object, Array, 객체, 배열, split, reverse, sort, prompt, 티스토리