[기초] 05. 객체, this 배열

JavaScript 기초 요약

자바스크립트 기초 5: 객체·this·배열(메서드)

Object/Array this 다음 단계 안내

12) 객체(Object) — 키/값으로 데이터를 묶어 관리합니다

서로 연관된 값을 하나로 묶고 싶을 때 객체가 가장 자주 쓰입니다.

const user = {
  name: "철수",
  age: 20,
};

console.log(user.name);      // 점 표기법
console.log(user["age"]);    // 대괄호 표기법

언제 대괄호 표기법을 쓰나요?
키가 변수로 들어오거나(동적), 공백/특수문자가 포함된 키를 다룰 때 유용합니다.

13) 메서드(method)와 this — “호출 방식”이 핵심입니다

메서드로 호출할 때 this가 어떻게 결정되는지 예시로 정리했습니다.

기초 단계에서는 아래 한 줄만 기억하셔도 도움이 됩니다.

정리
메서드 형태로 호출하면 this는 그 객체를 가리킵니다. (예: user.sayHi())

14) 배열(Array) — 순서가 있는 리스트를 다룰 때 사용합니다

const students = ["민정", "철수", "영희"];
students.push("민수");   // 뒤에 추가
students.pop();          // 뒤에서 제거

반복문과 함께 쓰기

for (let i = 0; i < students.length; i++) {
  console.log(students[i]);
}

추가로 많이 쓰는 메서드

• slice (복사), splice (중간 삭제/삽입)
• indexOf, includes
• 한 단계 더: map, filter, reduce (실무에서 매우 자주 등장합니다)

15) 다음 단계로 넘어가기

기초 문법을 한 번 돌리셨다면, 다음은 “DOM 조작”과 “비동기(Promise/async)” 쪽으로 넘어가시면 실무 감각이 확 좋아집니다.

추천 학습 루트

1. 브라우저: DOM / 이벤트
2. 네트워크: fetch / JSON
3. 비동기: Promise / async-await
4. 구조화: 모듈(import/export)

참고 링크

MDN: 객체

MDN: this

MDN: 배열

MDN: Array.prototype.map