TIL - 20251204

1204 JavaScript 기초 복습 (2/4): 객체, 배열, 반복문

---

✅ 1. 객체 (Object)

• 객체는 관련된 데이터와 기능(메서드)을 한 곳에 모아놓은 key: value 쌍의 집합입니다. JavaScript의 거의 모든 것은 객체로 이루어져 있으며, 가장 중요한 데이터 구조입니다.

➕ 객체 생성 및 접근

1. 객체 리터럴 (Object Literal): 가장 일반적인 생성 방식.

   const person = {
     name: 'Alice',
     age: 25,
     isAdmin: true,
     // 메서드 (객체에 속한 함수)
     greet: function() {
       console.log('Hello, my name is ' + this.name);
     }
   };

2. 속성 접근:

   • 점 표기법 (Dot Notation): person.name (가장 일반적)
   • 대괄호 표기법 (Bracket Notation): person['age'] (key가 변수이거나 특수문자를 포함할 때 사용)

3. 속성 추가 및 삭제:

   person.job = 'Developer'; // 속성 추가
   delete person.isAdmin;   // 속성 삭제

➕ ES6+ 객체 문법

• 단축 속성 (Shorthand Properties): 변수 이름과 key 이름이 같을 때 축약 가능.

  const name = 'Bob';
  const age = 30;
  const user = { name, age }; // { name: name, age: age }와 동일

• 계산된 속성명 (Computed Property Names): key를 동적으로 생성.

  const propName = 'favoriteFood';
  const obj = {
    [propName]: 'Pizza'
  }; // { favoriteFood: 'Pizza' }

---

✅ 2. 배열 (Array)

• 배열은 순서가 있는 값들의 목록입니다. JavaScript 배열은 크기가 동적으로 변하며, 서로 다른 타입의 값을 함께 저장할 수 있습니다.

➕ 배열 생성 및 접근

1. 배열 리터럴 (Array Literal): 가장 일반적인 생성 방식.

   const fruits = ['Apple', 'Banana', 'Cherry'];

2. 요소 접근: 인덱스(index)는 0부터 시작합니다.

   console.log(fruits); // 'Apple'
   fruits = 'Blueberry'; // 요소 수정

3. 주요 속성 및 메서드:

   • fruits.length: 배열의 길이 (요소의 개수)
   • fruits.push('Orange'): 배열의 끝에 요소 추가
   • fruits.pop(): 배열의 끝에서 요소 제거 및 반환
   • fruits.unshift('Strawberry'): 배열의 앞에 요소 추가
   • fruits.shift(): 배열의 앞에서 요소 제거 및 반환

---

✅ 3. 반복문 (Loops)

• 배열이나 객체의 모든 요소를 순회하며 동일한 작업을 반복 수행하기 위해 사용됩니다.

➕ 전통적인 for 문

• 가장 기본적인 반복문으로, 초기화, 조건, 증감식을 모두 포함합니다.

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

➕ 현대적인 배열 반복 메서드 (권장)

• ES6+에서 도입된 배열 메서드들은 코드를 더 간결하고 선언적으로 만들어 줍니다.

1. forEach: 배열의 각 요소를 순회하며, 주어진 함수를 실행합니다. 반환 값이 없습니다.

   const colors = ['red', 'green', 'blue'];
   colors.forEach(function(color) {
     console.log(color);
   });
   // 화살표 함수 사용
   colors.forEach(color => console.log(color));

2. map: 배열의 각 요소를 순회하며, 주어진 함수를 실행한 결과를 모아 새로운 배열을 반환합니다. (React에서 리스트 렌더링 시 핵심적으로 사용)

   const nums =;
   const doubledNums = nums.map(num => num * 2); //

3. filter: 배열의 각 요소를 순회하며, 주어진 함수의 결과가 true인 요소들만 모아 새로운 배열을 반환합니다.

   const ages =;
   const adults = ages.filter(age => age >= 20); //

➕ for...of 와 for...in

• for...of (ES6+): 배열, 문자열 등 반복 가능한(iterable) 객체의 값(value)을 순회합니다. 배열 순회에 가장 적합합니다.

  const fruits = ['Apple', 'Banana'];
  for (const fruit of fruits) {
    console.log(fruit); // 'Apple', 'Banana'
  }

• for...in: 객체의 키(key)를 순회합니다. 객체 순회에 사용되지만, 배열에는 사용하지 않는 것이 좋습니다. (순서를 보장하지 않음)

  const person = { name: 'Alice', age: 25 };
  for (const key in person) {
    console.log(key + ': ' + person[key]); // 'name: Alice', 'age: 25'
  }

---

📌 요약

• 객체는 key: value 쌍으로 데이터를 관리하며, 점 표기법(obj.key)으로 속성에 접근합니다.
• 배열은 순서가 있는 데이터 목록으로, 인덱스(arr[0])를 통해 요소에 접근합니다.
• 반복문은 코드의 반복을 줄여줍니다. 특히 배열을 다룰 때는 전통적인 for문보다 forEach, map, filter 와 같은 배열 고차 함수나 for...of 문을 사용하는 것이 더 간결하고 안전합니다.
• for...of는 배열의 값을, for...in은 객체의 키를 순회하는 데 주로 사용됩니다.