배열과 객체 — 데이터를 담고 다루기

1.배열 — 순서가 있는 목록

지금까지는 변수 하나에 값 하나를 담았습니다. 그런데 학생 30명의 점수를 변수 30개에 담을 수는 없습니다. 배열은 여러 값을 순서대로 한 이름 아래 담는 자료형입니다. 대괄호 안에 쉼표로 값을 늘어놓아 [70, 85, 90]처럼 만듭니다. 4강에서 for...of로 하나씩 꺼낸 그 목록이 배열입니다.

배열의 값은 위치 번호인 인덱스로 꺼냅니다. 인덱스는 1이 아니라 0부터 시작하므로 첫 값은 arr[0], 두 번째 값은 arr[1]입니다. 값의 개수는 arr.length이고, 마지막 값의 인덱스는 언제나 arr.length - 1입니다. 4강에서 본 off-by-one 실수가 바로 여기서 생깁니다.

없는 인덱스를 읽어도 오류가 나지 않고 undefined가 나옵니다. 길이가 3인 배열에서 arr[3]이나 arr[-1]을 읽으면 둘 다 undefined입니다. 뒤에서부터 세고 싶다면 arr.at(-1)을 쓰면 마지막 값이 나옵니다. 배열에는 숫자·문자열·불리언을 섞어 담을 수도 있지만, 실제로는 같은 종류의 값을 담아야 다루기 쉽습니다.

const fruits = ['사과', '배', '귤'];
console.log(fruits[0], fruits[2]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);
console.log(fruits[3]);
console.log(fruits.at(-1));

사과 귤
3
귤
undefined
귤

2.배열 바꾸기와 찾기 — `push`, `pop`, `includes`, `indexOf`

push는 배열 끝에 값을 더하고, pop은 끝의 값을 꺼내 돌려주면서 배열에서 뺍니다. arr[1] = '포도'처럼 인덱스에 직접 넣어 값을 바꿀 수도 있습니다. 여기서 헷갈리기 쉬운 점이 있습니다. const로 만든 배열도 내용은 바꿀 수 있습니다. const가 막는 것은 '그 이름에 다른 배열을 다시 넣는 것'이지 배열 속 칸을 바꾸는 것이 아닙니다.

값이 들어 있는지 확인할 때는 includes가 참·거짓을, indexOf가 위치를 돌려줍니다. indexOf는 찾지 못하면 -1을 돌려줍니다. 4강에서 '못 찾음'을 -1로 표시한 것과 같은 약속입니다. 그래서 if (arr.indexOf(x))처럼 쓰면 첫 칸(0)에 있을 때 거짓이 되고, 못 찾은 경우(-1)는 참이 되어 버립니다(3강의 truthy·falsy). 있는지만 알고 싶다면 includes를 쓰세요.

배열을 다른 변수에 넣으면 복사가 아니라 '같은 배열을 가리키는 이름'이 하나 더 생깁니다. 아래 코드에서 b에 push하면 a도 바뀝니다. 같은 집의 주소를 두 사람이 나눠 가진 것과 같습니다. 정말 따로 된 사본이 필요하면 [...a]처럼 펼쳐서 새 배열을 만듭니다. 객체도 똑같이 동작합니다.

const cart = ['우유', '빵'];
cart.push('달걀');
console.log(cart, cart.length);
const last = cart.pop();
console.log(last, cart);
console.log(cart.includes('빵'), cart.indexOf('빵'));
console.log(cart.indexOf('김'));

[ '우유', '빵', '달걀' ] 3
달걀 [ '우유', '빵' ]
true 1
-1

const a = [1, 2];
const b = a;
b.push(3);
console.log(a);
const c = [...a];
c.push(4);
console.log(a, c);

[ 1, 2, 3 ]
[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

3.객체 — 이름표 붙은 칸

배열이 '몇 번째'로 값을 찾는다면, 객체는 '이름'으로 값을 찾습니다. 중괄호 안에 키: 값을 쉼표로 늘어놓아 { name: '민수', age: 20 }처럼 만듭니다. 각 키와 값의 쌍을 속성이라고 합니다. 회원 한 명, 상품 하나처럼 여러 정보가 모여 한 대상을 이룰 때 객체가 잘 맞습니다.

속성은 user.name처럼 점으로 읽는 것이 보통이고, 키 이름이 변수에 들어 있을 때는 user[key]처럼 대괄호로 읽습니다. 없는 속성을 읽으면 배열의 없는 칸처럼 undefined가 나옵니다. 그런데 그 undefined에서 다시 속성을 읽으면 그때는 TypeError가 납니다. 아래 코드가 그 경우로, 키 이름을 nmae로 잘못 쓴 것이 원인입니다. 메시지의 정확한 문구는 브라우저마다 조금씩 다릅니다.

이 오류는 AI가 짠 코드를 실제 데이터에 붙였을 때 가장 자주 보는 오류 가운데 하나입니다. 대개 데이터에 있는 키 이름과 코드가 기대한 키 이름이 다르거나, 어떤 항목에만 그 속성이 빠져 있을 때 생깁니다. 오류 메시지의 괄호 안 (reading 'length')는 '무엇을 읽으려다 실패했는지'를 알려 주므로, 그 바로 앞의 값이 왜 undefined인지 거슬러 찾아가면 됩니다(8강).

const user = { name: '민수', age: 20 };
console.log(user.name, user.age);
user.age = 21;
user.city = '부산';
console.log(user);
const key = 'name';
console.log(user[key]);
console.log(user.email);

민수 20
{ name: '민수', age: 21, city: '부산' }
민수
undefined

const user = { name: '민수' };
console.log(user.nmae);
console.log(user.nmae.length);

undefined
TypeError: Cannot read properties of undefined (reading 'length')

4.객체의 배열 = 표

실제 데이터는 대부분 '객체의 배열' 모양입니다. 배열의 각 칸이 표의 한 행이고, 객체의 키가 열 이름입니다. 엑셀 같은 스프레드시트의 표 한 장을 코드로 옮겼다고 생각하면 됩니다. 아래 표와 코드는 같은 가상의 판매 기록을 두 가지로 나타낸 것입니다.

이 모양에서는 4강의 반복문과 지금 배운 속성 읽기를 합치면 거의 모든 계산을 할 수 있습니다. 행을 하나씩 꺼내(for...of) 필요한 열을 읽고(row.qty) 누적하거나 셉니다. 9강에서는 텍스트로 된 표를 이 모양으로 바꾸어 합계·평균·그룹별 합계를 직접 구해 봅니다.

const sales = [
  { item: '공책', price: 1500, qty: 4 },
  { item: '연필', price: 500, qty: 10 },
  { item: '지우개', price: 800, qty: 3 },
];
let revenue = 0;
for (const row of sales) {
  revenue += row.price * row.qty;
}
console.log(revenue);

13400

5.`map`·`filter`·`reduce` 맛보기

배열에는 반복문을 대신하는 메서드가 있습니다. 가장 많이 쓰는 셋이 map·filter·reduce입니다. 셋 모두 5강의 화살표 함수를 받아서 배열의 값마다 그 함수를 불러 줍니다. map은 값마다 바꾼 결과로 새 배열을 만들고(길이가 같음), filter는 함수가 참을 돌려준 값만 골라 새 배열을 만들며(길이가 같거나 짧음), reduce는 값들을 하나로 접어 합계 같은 값 하나를 만듭니다.

중요한 점은 map과 filter가 원래 배열을 바꾸지 않고 새 배열을 돌려준다는 것입니다. 5강의 순수 함수와 같은 성질이라 결과를 예측하기 쉽습니다. reduce는 두 번째 인자로 시작값을 꼭 넣으세요. reduce((s, x) => s + x, 0)의 0이 4강 누적 패턴의 let sum = 0에 해당합니다. 시작값을 빼면 빈 배열에서 TypeError가 납니다.

처음에는 반복문이 더 읽기 쉬울 수 있고, 그래도 괜찮습니다. 반복문으로 할 수 있는 일을 짧게 쓰는 방법일 뿐입니다. 다만 AI가 짠 코드에는 이 셋이 사슬처럼 이어져 나오는 경우가 많으므로, 한 단계씩 끊어 중간 결과를 찍어 보며 읽는 연습을 해 두면 좋습니다.

const prices = [1500, 500, 800, 12000];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => Math.round(p)));
const cheap = prices.filter((p) => p < 1000);
console.log(cheap);
const total = prices.reduce((s, p) => s + p, 0);
console.log(total);
console.log(prices);

[ 1650, 550, 880, 13200 ]
[ 500, 800 ]
14800
[ 1500, 500, 800, 12000 ]

6.JSON — 데이터를 주고받는 글자 형식

JSON은 객체와 배열을 글자(문자열)로 적는 형식입니다. 이름은 JavaScript에서 왔지만 지금은 거의 모든 프로그래밍 언어와 웹 서비스가 데이터를 주고받을 때 씁니다. 설정 파일, 서버의 응답, 앱이 저장하는 데이터 상당수가 JSON입니다. JSON.stringify는 값을 JSON 글자로 바꾸고, JSON.parse는 JSON 글자를 다시 값으로 되돌립니다.

JSON은 JavaScript 객체 문법과 닮았지만 더 엄격합니다. 키는 반드시 큰따옴표로 감싸야 하고, 문자열도 큰따옴표만 됩니다. 마지막 항목 뒤 쉼표는 허용되지 않고, 주석도 쓸 수 없습니다. 함수와 undefined는 담을 수 없어서, stringify하면 객체 속성일 때는 빠지고 배열 안에서는 null로 바뀝니다. 규칙을 하나라도 어기면 JSON.parse가 SyntaxError를 냅니다.

JSON이 길게 한 줄로 붙어 있으면 읽기 어렵습니다. 그럴 때는 JSON 포맷터 도구에 붙여 넣으면 들여쓰기를 해 주고, 규칙이 깨진 곳을 짚어 주기도 합니다. 다만 실제 회원 정보처럼 개인정보가 든 데이터는 외부 도구나 AI에 붙여 넣지 말고, 구조만 같은 가상의 데이터로 바꿔서 확인하세요(10강).

const item = { name: '공책', price: 1500, tags: ['문구'] };
const text = JSON.stringify(item);
console.log(text);
console.log(typeof text);
const back = JSON.parse(text);
console.log(back.price + 500);

{"name":"공책","price":1500,"tags":["문구"]}
string
2000

const bad = "{ name: '공책' }";
console.log(JSON.parse(bad));

SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)