[Javascript] 객체, 배열, 원시타입, 참조타입

💡 객체와 배열은 원시타입이 아닌 참조 reference 타입

• 앞서 다룬 자료형들은 원시 primitive 타입
• 둘의 차이는 다음 강에서 다룰 것

 

I. 객체 미리보기

• 자바스크립트에서 원시 타입이 아닌 모든 데이터는 근본적으로 객체
• 복합적인 정보를 프로퍼티 property - (키와 값의 조합)으로 저장하는 자료형

const objName = {

key1: value1,

key2: value2,

...

};

// ⚠️ 블록이 아님!

 

 

1. 프로퍼티 접근

💡 속성값에 접근하는 두 방법

 

//1. 객체명.key
console.log(
  person1.name,
  person1.age,
  person1.married
);

//2 객체명[key]
console.log(
  person1['name'], // 속성명을 string으로
  person1['age'],
  person1['married'],
);

💡 존재하지 않는 키로 접근시 undefined 반환

console.log(person1.birthdate);

console.log(person1['job']);

 

💡 (키) in (객체) - 특정 키 포함 여부 확인

console.log(

'age' in person1,

'job' in person1

);

2. 프로퍼티 수정 및 추가

// 특정 프로퍼티의 값 변경

person1.age = 26;

person1['married'] = true

​

console.log(person1);

 

// 새 프로퍼티 추가

person1.job = 'developer';

person1['bloodtype'] = 'AB'

​

console.log(person1);

• 💡 const임에도 그 내용은 수정할 수 있음에 주목!

II. 배열 미리보기

const winners = [12, 592, 7, 48];

const weekdays = ['월', '화', '수', '목', '금', '토', '일'];

​

// 자료형에 관계없이 한 배열에 넣을 수 있음

const randoms = ['홍길동', -24, true, null, undefined];

​

console.log(typeof winners);

console.log(winners, weekdays, randoms);

 

1. 값과 길이 접근

// 특정 순서의 값에 접근하는 법 (0부터 시작)

console.log(winners[0], weekdays[6], randoms[3]);

 

// 배열의 길이(요소의 갯수)를 얻는 법

console.log(winners.length, weekdays.length, randoms.length);

 

// 마지막 요소 얻기

console.log(winners[winners.length - 1]);

2. 수정 및 추가

const numbers = [1, 2, 3];

​

// 특정 위치의 값 수정

numbers[2] = 5;

​

console.log(numbers);

 

// 맨 끝에 값 추가

numbers.push(10);

​

console.log(numbers);

• 💡 const임에도 그 내용은 수정할 수 있음에 주목!
• 기타 방법들은 배열 섹션에서 배우게 될 것

💡 배열의 범주 너머로 접근시 undefined 반환

const winners = [12, 592, 7, 48];

console.log(winners[winners.length]);

---

 

⭐️ 중첩 사용 가능

const person2 = {

name: '김달순',

age: 23,

languages: ['Korean', 'English', 'French'],

education: {

school: '한국대',

major: ['컴퓨터공학', '전자공학'],

graduated: true,

}

};

​

console.log(person2.languages[2]);

console.log(person2.education.graduated);

 

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]);

console.log(weapons[2].damage);

console.log(weapons[0].design[0]);

 

I. 값 복사 결과 비교

1. 원시 타입

👉 MDN 문서 보기

• 값에 의한 복사 copy by value

let number1 = 1;

let string1 = 'ABC';

let bool1 = true;

​

let number2 = number1;

let string2 = string1;

let bool2 = bool1;

​

number2 = 2;

string2 = '가나다';

bool2 = false;

​

console.log('~1:', number1, string1, bool1);

console.log('~2:', number2, string2, bool2);

2. 참조 타입

• 참조에 의한 복사 copy by reference

const obj1 = {

num: 1, str: 'ABC', bool: true

};

const obj2 = obj1;

// obj2 = {}; // ⚠️ 오류

 

console.log('obj1:', obj1);

console.log('obj2:', obj2);

 

// ⭐️ const임에도 내부 값은 변경 가능함 주목

// 내부 변경 방지는 이후 배울 Object.freeze 함수로

obj2.num = 2;

obj2.str = '가나다';

obj2.bool = false;

​

console.log('obj1:', obj1);

console.log('obj2:', obj2);

const array1 = [1, 'ABC', true];

const array2 = array1;

// array2 = []; // ⚠️ 오류

 

console.log('array1:', array1);

console.log('array2:', array2);

 

// ⭐️ const임에도 내부 값은 변경 가능함 주목

array2[0] = 3;

array2[1] = 'def';

array2[2] = false;

​

console.log('array1:', array1);

console.log('array2:', array2);

---

 

II. 메모리 상세

1. 원시 타입

let number1 = 1;

number2 = number1;

number2 = 2;

​

console.log(number1, number2);

 

 

2. 참조 타입

a. 객체

const obj1 = {

num: 1,

str: 'ABC',

bool: true

};

​

const obj2 = obj1;

​

obj2.num = 2;

​

console.log(obj1, obj2);

b. 배열

const array1 = [1, 'ABC', true];

const array2 = array1;

​

array2[1] = '가나다';

​

console.log(array1, array2);