๐ก ๊ฐ์ฒด์ ๋ฐฐ์ด์ ์์ํ์
์ด ์๋ ์ฐธ์กฐ 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);