JavaScript 객체 배열 · eval 수식 완전 정리

 

 

Web Development · JavaScript

JavaScript 객체 배열 · eval

prompt/eval 수식 계산과 책 객체 배열 생성, 최고가 찾기를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 JavaScript 기초 문법과 객체 배열 실습을 모은 장입니다. 함수, 조건문, 반복문, switch, break, prompt, eval, 객체 배열을 작은 예제로 나누어 확인합니다.

let str = prompt("수식 입력", ""); if (str == null) document.write("입력된 식이 없습니다."); else document.write(str + " = " + eval(str)); let bookArray = new Array(); for (let i = 0; i < 5; i++) { let input = prompt("콤마로 책제목 저자 가격 순으로 입력", "HTML5,황기태,20000"); let ar = input.split(","); let book = new Object(); book.title = ar[0]; book.author = ar[1]; book.price = ar[2]; bookArray[i] = book; }

eval문자열을 코드처럼 실행합니다.

prompt사용자 입력을 문자열로 받습니다.

split문자열을 구분자로 나눕니다.

Object속성 묶음 객체입니다.

bookArraybook 객체들을 담는 배열입니다.

price가격 비교에 쓰이는 속성입니다.

---

1 eval 수식 계산

prompt로 받은 문자열을 eval에 넣어 수식 결과를 출력합니다. 취소한 경우에는 계산하지 않고 안내 문장을 출력합니다.

입력	처리	결과
1+2	eval	3
4*5	eval	20
취소	null 검사	입력된 식이 없습니다.
잘못된 식	오류 가능	try/catch 필요

eval은 사용자 입력을 코드로 실행하므로 실제 서비스에서는 검증이나 수식 파서를 사용해야 합니다.

---

2 책 객체 배열 만들기

책 객체 배열 예제는 prompt로 5번 입력을 받고, 콤마로 분리한 뒤 객체 속성에 저장합니다.

prompt

→

split

→

book 객체

→

bookArray

---

3 split으로 책 정보 분리

input.split(",")은 책제목, 저자, 가격을 배열로 나눕니다. 순서가 정해져 있으므로 ar[0], ar[1], ar[2]를 각각 title, author, price에 넣습니다.

입력 조각	배열 위치	객체 속성
HTML5	ar[0]	book.title
황기태	ar[1]	book.author
20000	ar[2]	book.price
book	bookArray[i]	배열에 저장

---

 

반응형

 

4 객체 출력

객체 배열을 다시 반복하면서 각 책의 title, author, price를 출력합니다. 배열 안에는 문자열이 아니라 book 객체들이 들어 있습니다.

1

배열 순회i가 0부터 bookArray.length 전까지 돕니다.

2

객체 접근bookArray[i]로 i번째 책을 가져옵니다.

3

속성 출력title, author, price를 차례로 출력합니다.

---

5 가장 비싼 책 찾기

가장 비싼 책은 첫 번째 책을 기준값으로 잡고, 나머지 책과 price를 비교하면서 갱신합니다.

단계	코드	의미
초기값	most = bookArray[0]	첫 책을 임시 최고가로 둠
반복	i=1부터	나머지 책 비교
비교	bookArray[i].price > most.price	더 비싼지 확인
갱신	most = bookArray[i]	최고가 책 변경

---

6 price 숫자 변환 주의

원문은 price를 문자열 그대로 저장합니다. 비교가 대체로 동작할 수 있지만, 정확한 숫자 비교를 위해서는 parseInt(ar[2])로 저장하는 편이 낫습니다.

문자열 price

입력값이 그대로 저장되어 비교가 헷갈릴 수 있습니다.

숫자 price

parseInt 후 저장하면 가격 비교가 명확합니다.

---

7 입력 검증

책 정보 입력은 콤마 2개로 세 항목이 들어온다는 전제가 있습니다. 실제로는 취소, 빈 입력, 콤마 부족, 가격 NaN을 검사해야 합니다.

검사	문제	처리
input == null	취소	반복 중단 또는 재입력
input == ""	빈 입력	무시
ar.length < 3	항목 부족	재입력 요청
isNaN(price)	가격 오류	숫자 입력 요청

---

8 자주 하는 실수

실수	증상	해결
eval 입력 검증 없음	잘못된 식에서 오류가 납니다.	try/catch를 사용합니다.
split 결과 길이 확인 안 함	undefined 속성이 생깁니다.	ar.length를 검사합니다.
price 문자열 저장	가격 비교가 불안정합니다.	parseInt로 숫자화합니다.
취소 처리 없음	null.split 오류가 납니다.	input null을 먼저 확인합니다.
객체와 배열 혼동	bookArray.title처럼 접근합니다.	bookArray[i].title로 접근합니다.

---

9 복습 체크리스트

체크	통과 기준
eval	수식 문자열 계산과 위험성을 압니다.
prompt	null 검사를 먼저 합니다.
split	콤마 기준으로 책 정보를 나눕니다.
Object	책 객체에 속성을 저장합니다.
Array	객체를 배열에 저장하고 순회합니다.
max	반복 비교로 가장 비싼 책을 찾습니다.

---

10 디버깅 포인트

확인	콘솔 예시	의미
수식	console.log(str)	eval 입력 확인
split 결과	console.log(ar)	항목 분리 확인
책 객체	console.log(book)	속성 저장 확인
배열	console.log(bookArray)	객체 배열 확인
최고가	console.log(most)	비교 결과 확인

---

11 테스트 케이스

케이스	입력	예상
수식	1+2*3	7
수식 취소	취소	입력 없음 메시지
책 입력	HTML5,황기태,20000	객체 생성
콤마 부족	HTML5,황기태	검증 필요
가격 비교	여러 책	가장 비싼 책 출력

---

11 객체 배열 개선 연습

책 객체 배열은 입력 검증과 정렬, 검색을 붙이기 좋은 예제입니다. 객체 하나를 잘 만들고 배열에 담는 흐름을 유지하면서 기능을 확장합니다.

A

가격 숫자화book.price = parseInt(ar[2])로 저장합니다.

B

저자 검색특정 저자의 책만 출력합니다.

C

가격순 정렬bookArray.sort로 가격 오름차순을 만듭니다.

D

입력 취소 처리prompt가 null이면 반복을 중단하거나 재입력합니다.

기능	코드 힌트	확인
가격 정렬	sort((a,b)=>a.price-b.price)	싼 책부터 출력
최고가	Math.max 또는 반복문	most 객체 확인
평균가	sum / bookArray.length	숫자 price 필요
검색	filter(book => ...)	조건에 맞는 책만 표시
출력 개선	table 생성	가독성 향상

---

12 eval 대체 방향

수식 계산 예제는 eval을 보여주기 위한 코드입니다. 실제 페이지에서는 입력 가능한 문자를 제한하거나, 수식 파서를 따로 두는 편이 안전합니다.

방법	장점	주의
eval	예제가 짧음	사용자 입력 실행 위험
정규식 검증	허용 문자 제한	완전한 파서는 아님
직접 파서	안전한 계산 가능	구현량 증가
라이브러리	검증된 계산	외부 의존성
서버 계산	통제 가능	요청/응답 필요

입문 단계에서는 eval 동작을 이해하되, 사용자 입력을 실행한다는 위험성을 같이 기억해야 합니다.

---

13 추가 테스트

테스트	확인 내용
소수 계산	1/2 같은 수식이 계산되는지 봅니다.
잘못된 수식	try/catch 필요성을 확인합니다.
가격 문자열	"900"과 "1000" 비교가 안전한지 확인합니다.
콤마 포함 제목	split 방식의 한계를 확인합니다.
입력 취소	null 처리 없이 split하면 오류가 나는지 봅니다.
책 0권	빈 배열에서 most를 잡을 때의 문제를 확인합니다.
가격 문자	가격에 abc를 입력했을 때 NaN 검사가 필요한지 봅니다.
동일 가격	가격이 같을 때 첫 번째 책이 유지되는지 확인합니다.
공백 포함	콤마 뒤 공백을 trim해야 하는지 확인합니다.
배열 길이	입력 횟수와 bookArray.length가 같은지 봅니다.
최고가 갱신	더 비싼 책을 뒤에 입력했을 때 most가 바뀌는지 봅니다.
출력 순서	입력한 순서대로 책 목록이 출력되는지 확인합니다.
수식 공백	1 + 2처럼 공백이 있어도 계산되는지 확인합니다.
소수 가격	parseInt와 parseFloat 결과 차이를 비교합니다.
객체 속성 누락	author가 없을 때 출력이 어떻게 되는지 확인합니다.

마무리

핵심 기준eval 입력과 prompt 결과는 항상 검증한 뒤 계산하거나 객체로 변환합니다.

---

핵심 한 줄 요약

evalprompt 수식을 계산할 수 있지만 입력 검증이 필요합니다.

objectsplit 결과를 book 객체 속성으로 저장합니다.

arraybook 객체 배열을 순회하며 가장 비싼 책을 찾습니다.

Tags

#JavaScript#eval#prompt#split#Object#Array#bookArray#price#DOM#티스토리

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

JavaScript, eval, prompt, split, Object, Array, bookArray, price, DOM, 티스토리