자바스크립트 객체와 배열 미리보기
객체란?
복합적인 정보를 프로퍼티 (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란 배열에 객체가 포함된 것을 확인 가능하다.
나중에 배열과 객체에 대해서 자세히 다룰 것이고 지금은 이정도만 알고 넘어가자.