[자바스크립트 14일 완전정복] 5일차 - 객체와 배열

 

 

 

자바스크립트를 다루면서 가장 자주 만나게 되는 개념 중 하나가 객체(Object)와 배열(Array)입니다. 객체는 데이터를 구조적으로 관리하는 데 필수적이며, 배열은 데이터를 효율적으로 저장하고 조작하는 데 유용한 도구입니다. 오늘은 객체를 생성하고 다루는 방법, this 키워드의 개념, 배열의 기본적인 활용법에 대해 자세히 알아보겠습니다.

 

---

 

1. 객체(Object)란?

객체는 키(key)와 값(value)으로 이루어진 데이터 구조입니다. 자바스크립트에서 객체를 활용하면 여러 개의 관련된 값을 하나로 묶어 다룰 수 있습니다.

1.1 객체 생성 방법

객체를 생성하는 방법은 여러 가지가 있지만, 가장 많이 사용되는 두 가지 방법은 객체 리터럴(Object Literal)과 new Object()입니다.

(1) 객체 리터럴을 이용한 생성

let person = {
  name: "이예나",
  age: 28,
  job: "디자이너"
};

console.log(person.name); // "이예나"
console.log(person["age"]); // 28

객체 리터럴 {} 안에 키: 값 형태로 데이터를 저장하면 객체가 생성됩니다.

(2) new Object()를 이용한 생성

let person = new Object();
person.name = "이예나";
person.age = 28;
person.job = "디자이너";

console.log(person.job); // "디자이너"

이 방법도 가능하지만, 일반적으로 객체 리터럴 {}을 더 많이 사용합니다.

 

---

 

2. 객체의 프로퍼티(Property) 다루기

객체의 프로퍼티(속성)는 동적으로 추가, 수정, 삭제할 수 있습니다.

2.1 프로퍼티 추가 및 수정

let user = {
  name: "Alice",
  age: 25
};

// 새로운 프로퍼티 추가
user.job = "개발자";

// 기존 프로퍼티 수정
user.age = 26;

console.log(user); 
// { name: "Alice", age: 26, job: "개발자" }

2.2 프로퍼티 삭제

객체에서 프로퍼티를 삭제하려면 delete 키워드를 사용합니다.

delete user.age;
console.log(user); 
// { name: "Alice", job: "개발자" }

 

 

 

---

 

3. this 키워드의 이해

this 키워드는 객체 내부에서 자기 자신을 가리킬 때 사용됩니다.

3.1 객체에서 this 사용

let user = {
  name: "Alice",
  greet: function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

user.greet(); 
// "안녕하세요, 저는 Alice입니다."

함수 내부에서 this를 사용하면, 해당 객체를 가리킵니다.

3.2 this의 혼동되는 점

let user = {
  name: "Alice",
  greet: function() {
    console.log(this.name);
  }
};

let greetFunc = user.greet;
greetFunc(); // undefined (this가 전역 객체를 가리킴)

위 코드에서 greetFunc()를 호출하면 this.name이 undefined가 됩니다.
이 문제를 해결하려면 bind() 메서드를 사용할 수 있습니다.

let boundGreet = user.greet.bind(user);
boundGreet(); // "Alice"

 

 

 

---

 

4. 배열(Array)의 개념과 기본 메서드

배열은 여러 개의 값을 순서대로 저장하는 자료구조입니다. 자바스크립트의 배열은 유연하며, 다양한 내장 메서드를 제공합니다.

4.1 배열 생성

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"

4.2 배열 메서드

배열을 다룰 때 유용한 기본 메서드를 살펴보겠습니다.

(1) push() - 배열 끝에 요소 추가

let arr = [1, 2, 3];
arr.push(4); 
console.log(arr); // [1, 2, 3, 4]

(2) pop() - 배열 끝 요소 제거

arr.pop();
console.log(arr); // [1, 2, 3]

(3) shift() - 배열 첫 요소 제거

arr.shift();
console.log(arr); // [2, 3]

(4) unshift() - 배열 앞에 요소 추가

arr.unshift(1);
console.log(arr); // [1, 2, 3]

(5) splice() - 요소 추가/삭제

let colors = ["빨강", "파랑", "초록"];
colors.splice(1, 1, "노랑"); 
console.log(colors); // ["빨강", "노랑", "초록"]

splice(1, 1, "노랑")의 의미는 인덱스 1의 요소를 삭제하고 "노랑"을 추가한다는 뜻입니다.

(6) slice() - 배열의 특정 부분 추출

let numbers = [1, 2, 3, 4, 5];
let sliced = numbers.slice(1, 4);
console.log(sliced); // [2, 3, 4]

slice(1, 4)는 인덱스 1부터 3까지의 요소를 복사한 새로운 배열을 반환합니다.

(7) concat() - 배열 합치기

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4]

 

 

 

---

 

 

오늘은 객체와 배열의 기본 개념을 살펴보고, 프로퍼티를 다루는 방법, this 키워드, 그리고 배열의 주요 메서드를 익혔습니다.

• 객체(Object)는 키-값 쌍으로 구성되며, 프로퍼티를 추가/수정/삭제할 수 있습니다.
• this 키워드는 객체 내부의 메서드에서 자기 자신을 가리키며, 실행 컨텍스트에 따라 값이 달라질 수 있습니다.
• 배열(Array)은 데이터를 순서대로 저장하는 자료구조이며, push(), pop(), splice() 등의 메서드를 활용하면 데이터를 쉽게 조작할 수 있습니다.

다음 강좌에서는 고급 객체 개념과 배열의 심화 활용법을 배워보겠습니다! 🚀