[JavaScript] 객체(Object) 와 배열(Array)

Intro

기본 자료형 다음은 공부할 주제는 객체와 배열이다. 객체란 여러 종류의 속성들을 한 곳에 저장할 수 있고, 배열은 같은 속성의 데이터들을 순서대로 저장할 수 있는 자료구조인걸로..... 아! JavaScript에는 변수가 var, let, const라서 타입이 없지? 그러면 처음 들어간 데이터에 따라서 정해지나? 아니면 다른 타입의 데이터들을 같이 넣을 수 있나? 생각해본적이 없었던거 같네...

---

객체(Object)

객체란 여러 개의 데이터를 키-값(key-value) 구조로 저장하는 자료구조이며 중괄호{ }로 감싸서 정의한다.

특징

• 중괄호{ }로 감싸서 표기한다.
• Key-Value 형태로 데이터를 저장
  Key는 문자열 또는 symbol 이며, Value는 숫자, 문자, 논리, 함수, 객체 어떤 데이터 타입도 들어갈 수 있다.
• 선언과 동시에 초기화 가능(리터럴(Literal))

const user = {
  name : "JJuuuunn",
  age : 29,
  address : "수원시 팔달구",
  movingHouse : function(newAddress) {
    console.log(`${this.name}은 ${this.address}에서 ${newAddress}로 이사했습니다.`);
    this.address = newAddress;
  }
};

user.name; // "JJuuuunn"
user.age; // 29
user.movingHouse("대구시 달서구"); 
// address : '수원시 팔달구' -> '대구시 달서구'
// "JJuuuunn은 수원시 팔달구에서 대구시 달서구로 이사했습니다."

// 직접적으로 접근하여 데이터 변경도 가능
user.age = 30; // age: 29 -> 30
user.age; // 30

// 객체 내 키 추가
user.phone = '010-xxxx-xxxx';
user.phone; // '010-xxxx-xxxx'

// 객체 내 키 삭제
delete user.phone; // true
user.phone; // undefined

위의 예시 코드와 같이 문자열, 숫자형, 함수 등 여러 속성이 들어갈 수 있는걸 알 수 있다.

객체 안에 속성들을 사용하거나 수정하기 위해 직접적으로 사용할 수 도 있지만 Java를 학습할 당시 직접적인 get, set같은 함수를 추가하여 접근하였고, 또 setter를 사용하기 보다 변경 사항이 있으면 builder패턴처럼 새로운 객체(인스턴스)를 만들어서 사용했었는데 JavaScript에서도 통용되는 것인지는 추후 찾아볼 예정이다.

배열(Array)

배열은 key-value형태로 저장하는 객체와 다르게 value 들만 모아서 순서대로 저장한 자료구조이며, 0번 인덱스로 시작하여 내부적으로 {index : value}와 같은 형태로 저장된다.

특징

• Index(순서) 기반 접근으로 0부터 시작
• 배열 선언 후에도 추가, 수정, 삭제 가능
• 다양한 데이터 타입들을 혼합해서 저장 가능
• 기본 내장 메서드(push, pop, indexOf, length 등) 제공

const numbers = [10, 20, 30, 40];

// 배열 요소 접근 (인덱스 사용)
numbers[0]; // 10

// 배열의 길이
numbers.length; // 4

// 배열 요소 추가
numbers.push(50);
numbers; // [10, 20, 30, 40, 50]

// 배열 요소 제거
numbers.pop();
numbers; // [10, 20, 30, 40]

// 배열 순회
numbers.forEach((num, index) => {
  console.log(`인덱스 ${index}의 값 : ${num}`);
});
/*
인덱스 0의 값 : 10
인덱스 1의 값 : 20
인덱스 2의 값 : 30
인덱스 3의 값 : 40
*/

// 다른 데이터 타입 추가 가능
numbers.push("육십");
numbers; // [10, 20, 30, 40, "육십"]

// value로 index 찾기
numbers.indexOf(40); // 3
numbers.indexOf(50); // -1

 배열 내부에 배열을 넣을 수도 있는데 flat(평면)과 nested(중첩) 방식 이렇게 2가지가 있다.

• Flat Array(평면 배열) : 중첩된 배열 없이 단일 레벨로 이루어진 배열
• Nested Array(중첩 배열) : 배열 자체가 하나의 요소로 추가되는 배열

const array1 = [1, 2, 3];
const array2 = ["a", "b", "c"];

// flat array : 평면 배열
const flatArray = [...array1, ...array2]; // [1, 2, 3, "a", "b", "c"]

// nested array : 중첩 배열
const nestedArray = [array1, array2]; // [[1, 2, 3], ["a", "b", "c"]]
array1.push(array2); // [[1, 2, 3], ["a", "b", "c"]]

---

마무리

객체야 원래 알고 있던 내용과 크게 다르지 않으니 문제 되지 않지만 배열은 다양한 데이터 타입이 들어간다는 것에서 만약 배열에 값이 엄청 많고 데이터 타입도 다 다르면 어떻게 관리하지 라는 생각부터 드는데...와 감당 가능한가? 지금이야 TypeScript라는게 있다지만 예전 개발자들은 어떻게 관리하신거지???

 

[참고]

도서 - 코딩 자율학습 HTML +  CSS + 자바스크립트

도서 - 제로초의 자바스크립트 입문

제로초 - 객체와 배열