자바스크립트 객체와 배열 미리보기

객체란?

복합적인 정보를 프로퍼티 (property) 즉, (키 와 값의 조합)으로 저장하는 자료형을 말한다.

객체는 원시타입이 아닌 참조 (reference) 타입이다.

const objName = {
  key1: value1,
  key2: value2,
  ...
}; //이런 형식을 가진다~

const person1 = {
  name: '김철수',
  age: 25,
  married: false
};

console.log(typeof person1); //object
console.log(person1);

객체는 프로퍼티를 가지기 때문에 하나의 객체에 여러가지 데이터들을 넣을 수 있다.

person1에는 name 정보, age 정보, married 정보가 다 들어있는 것을 볼 수 있다.

 

1. 프로퍼티 접근

프로퍼티에 접근하는 방법은 두 가지이다.

console.log(
  person1.name,
  person1.age,
  person1.married
); //첫번째 방법이다

console.log(
  person1['name'], // 속성명을 string으로
  person1['age'],
  person1['married'],
); //두번째 방법

이렇게 객체명.프로퍼티 키 로 접근이 가능하다.

아니면 []를 이용하여 프로퍼티에 접근이 가능하다.

 

만약 객체에 없는 키로 접근을 하면?

console.log(person1.birthdate);
console.log(person1['job']);
//모두 undefined를 반환한다

undefined로 반환이 된다.

 

(키) in (객체) 를 사용하여 특정 키 포함 여부를 확인 할 수 있다.

console.log(
  'age' in person1, //true
  'job' in person1 //true
);

 

2. 프로퍼티 수정 및 추가

// 특정 프로퍼티의 값 변경
person1.age = 26;
person1['married'] = true

console.log(person1); //person1의 age와 married의 값이 각각 26, true로 변경됨

// 새 프로퍼티 추가
person1.job = 'developer';
person1['bloodtype'] = 'AB'

console.log(person1); //person1의 기존 프로퍼티 이외에 job, bloodtype의 프로퍼티가 추가됨

주의해야 할 점은 person1을 const로 선언을 했음에도 그 내용을 수정할 수 있다는 것이다.

 

 

배열

객체와 같이 원시타입이 아닌 참조 (reference) 타입이다. 아래 예시를 보면서 이해하자.

const winners = [12, 592, 7, 48];
const weekdays = ['월', '화', '수', '목', '금', '토', '일'];

// 자료형에 관계없이 한 배열에 넣을 수 있음
const randoms = ['홍길동', -24, true, null, undefined];

console.log(typeof winners); //object
console.log(winners, weekdays, randoms);

배열 하나에 다양한 자료형의 데이터들을 넣을 수 있음을 확인할 수 있다.

그리고 typeof를 해보면 object가 반환되는 것을 볼 수 있는데 여기서 배열을 원래 객체다. 근데 여기서 어떤 특정 기능을 추가한 것이 배열이라는 것이다 (자바스크립트에서). 

이것은 웹 콘솔에서 winners라는 배열을 출력했을때의 그림이다. 그림과 같이 배열도 객체이기 때문에 키와 값으로 구성되어 있음을 볼 수 있다.

그 키란 0부터 시작하는 것에 유의하자. 

 

배열의 값과 길이에 접근하는 방법

// 특정 순서의 값에 접근하는 법 (0부터 시작)
console.log(winners[0], weekdays[6], randoms[3]); //12 '일' null
// 배열의 길이(요소의 갯수)를 얻는 법
console.log(winners.length, weekdays.length, randoms.length);// 4 7 5
// 마지막 요소 얻기
console.log(winners[winners.length - 1]); //48

마지막 요소 얻는 것만 살펴보면 배열의 length는 1부터 4까지 4개가 있어서 4인 것을 알 수 있다. 하지만 배열의 요소 즉, 특정 순서의 값에 접근할 때는 0부터 시작하는 것을 알 수 있다. 따라서 마지막 요소를 얻으려면 length -1 을 하는 것이다. 

 

배열 수정 및 추가

const numbers = [1, 2, 3];

// 특정 위치의 값 수정
numbers[2] = 5;

console.log(numbers); //[1, 2 ,5]

배열의 마지막 요소가 3에서 5로 수정됐다.

// 맨 끝에 값 추가
numbers.push(10);

console.log(numbers); //[1, 2, 5, 10]

배열의 마지막 요소에 10이라는 요소가 새롭게 추가 되었다.

 

배열의 범주 너머로 접근하면 undefined 반환

const winners = [12, 592, 7, 48];
console.log(winners[winners.length]); //undefined

 

중요한점은 배열과 객체는 중첩하용이 가능하다는 점이다. 

const person2 = {
  name: '김달순',
  age: 23,
  languages: ['Korean', 'English', 'French'],
  education: {
    school: '한국대',
    major: ['컴퓨터공학', '전자공학'],
    graduated: true,
  }
};

console.log(person2.languages[2]); //French
console.log(person2.education.graduated); //true

const groups = [[1, 2], [3, 4, 5], [6, 7, 8, 9]];

const weapons = [
  { name: '롱소드', damage: 30, design: ['화룡검', '뇌신검'] },
  { name: '활', damage: 12 },
  { name: '워해머', damage: 48 },
];

console.log(groups[1][2]); //5
console.log(weapons[2].damage); //48
console.log(weapons[0].design[0]); //화룡검

person2란 객체에 배열을 넣을수도 있고 education 이라는 프로퍼티가 있는데 이 프로퍼티에 또 객체가 들어 있음을 알 수 있다. 

또한 groups란 배열에 배열이 포함될 수 있고 weapons란 배열에 객체가 포함된 것을 확인 가능하다.

 

나중에 배열과 객체에 대해서 자세히 다룰 것이고 지금은 이정도만 알고 넘어가자.