1. 배열 (Array)정리 및 객체 (Object)의 관계
1) 배열 (Array): [ ]
개념: 연관된 데이터를 순서대로 담는 컨테이너 (트럭).
특징: 순서(Index)가 중요하며, 0번부터 시작한다.
2) 객체 (Object): { }
개념: 하나의 대상에 대한 상세 정보를 Key: Value로 묶은 포장 박스.
특징: 이름(Key)으로 값을 찾는다. (예: product.price)
3) 끝판왕: 배열 안에 객체 (Array of Objects)
실무 데이터의 99%는 이 구조다. "상품 리스트 트럭([]) 안에 개별 상품 박스({})가 실려있는 형태"다.
const products = [
{ name: "벨벳 소파", price: 300000, isSoldOut: false }, // 0번
{ name: "우드 테이블", price: 500000, isSoldOut: true }, // 1번
{ name: "플로어 램프", price: 50000, isSoldOut: false } // 2번
];1. 뒤쪽(End)에서 조작하기
데이터가 순서대로 쌓이고, 맨 마지막 것부터 건드리는 방식이다. (Stack 구조)
1) push() : 밀어 넣기 (추가)
상황: 장바구니 담기, 게시판 댓글 작성.
동작: 배열의 맨 끝에 데이터를 추가한다.
const cart = ["소파", "침대"];
cart.push("책상");
// 결과: ["소파", "침대", "책상"]2) pop() : 꺼내기 (삭제)
상황: '실행 취소(Undo)', 뒤로 가기.
동작: 배열의 맨 끝에 있는 데이터를 삭제한다.
cart.pop();
// 결과: ["소파", "침대"] (방금 넣은 책상이 삭제됨)2. 앞쪽(Front)에서 조작하기
데이터의 순서(Index)가 전체적으로 밀리거나 당겨진다.
1) unshift() : 새치기 (추가)
상황: 최신 뉴스, 인스타그램 피드 (최신 글이 맨 위에 와야 함).
동작: 배열의 맨 앞(0번)에 데이터를 추가하고, 나머지를 뒤로 민다.
const feed = ["어제 글", "그저께 글"];
feed.unshift("방금 올린 글");
// 결과: ["방금 올린 글", "어제 글", "그저께 글"]2) shift() : 입장하기 (삭제)
상황: 선착순 대기열 처리, 할 일 목록 완료 처리.
동작: 배열의 맨 앞(0번) 데이터를 삭제하고, 뒤에 있는 것들을 앞으로 당긴다.
feed.shift();
// 결과: ["어제 글", "그저께 글"] (맨 앞글 삭제됨)3. 중간(Middle) 저격하기: 스나이퍼
맨 앞이나 뒤가 아니라, 내가 원하는 위치를 콕 집어서 처리한다. 가장 중요하다.
⭐ splice() : 수술하기
문법: 배열.splice(시작인덱스, 삭제할개수)
상황: 장바구니 목록 중 특정 상품의 'X' 버튼을 눌러 삭제할 때.
const playlist = ["아이유", "박효신", "뉴진스"];
// 박효신(1번 인덱스)만 지우고 싶다면?
// "1번 자리에서 시작해서, 1개만 지워줘."
playlist.splice(1, 1);
console.log(playlist);
// 결과: ["아이유", "뉴진스"]2. 반복문
데이터가 3개면 console.log를 3번 쓰면 되지만, 100개라면? 반복문이 필수다.
1) for 문 (수동 조작)
시작점, 끝점, 증감(보폭)을 직접 설정한다.
장점: 순서를 내 맘대로(거꾸로, 짝수만) 조절 가능.
단점: 문법이 복잡하고, 조건 설정을 잘못하면 무한 루프에 빠질 위험이 있다.
// i가 0부터 시작해서; 개수보다 작을 때까지; 1씩 증가
for (let i = 0; i < products.length; i++) {
console.log(products[i].name);
}2) forEach 문 (자동 주행) ⭐추천
배열에 들어있는 요소를 처음부터 끝까지 알아서 하나씩 꺼내준다.
장점: i를 신경 쓸 필요가 없어 코드가 깔끔하고 안전하다.
실무: 데이터를 화면에 단순 나열할 때 가장 많이 쓴다.
// item: 꺼내진 상품 하나하나 (객체)
products.forEach(function(item) {
console.log(item.name + "의 가격: " + item.price);
});Deep Dive 1. 템플릿 리터럴 (백틱 `)
"" + name + ""
최신 자바스크립트(ES6)에서는 백틱(Backtick, 숫자 1 옆에 있는 ~ 키)을 쓰이며, 디자이너가 일러스트레이터에서 텍스트 박스 만들고 글자 쓰는 거랑 똑같다.
const name = "ARCHIVE 소파";
const price = 300000;
// ❌ 옛날 방식 (더하기 지옥)
console.log("상품명은 " + name + "이고, 가격은 " + price + "원 입니다.");
// ✅ 최신 방식 (백틱 사용)
// ${변수명} 자리에 변수를 쏙 집어넣으면 끝!
console.log(`상품명은 ${name}이고, 가격은 ${price}원 입니다.`);HTML 예제
// 그냥 HTML 쓰듯이 쭉 쓰고 변수만 ${ }로
const htmlCode = `<div class="card">
<h2>${name}</h2>
<p>${price}원</p>
</div>`;