Object
- 객체는 연관된 데이터를 담는 그릇이다. 프리미티브 타입(Primitive Type)은 단 하나의 값만 나타낼 수 있고 불변이지만, 이와 달리 객체는 여러가지 값이나 복잡한 값을 나타낼 수 있으며 , 값(내용물)이 변할 수도 있음
객체구성
- JS에서 객체는 키(key)와 값(value)으로 구성되어있다.
const person = {
name: '곽지욱',
age: 24
};
// name이 키(key)이며,
// '곽지욱'이 값(value)이다.- 객체는 여러가지 값을 가질 수 있고, 객체가 가지고 있는 값을
프로퍼티(Property)라고 하며, 객체가 가지고 있는 함수를메서드라고함
const obj = {
name: '곽지욱', // name 프로퍼티
age: 20, // age 프로퍼티
sayHello: function() { // sayHello 메서드
console.log('Hello!');
},
sayHi() { // 이렇게도 선언할 수 있다.
console.log('Hi!');
}
};객체 프로퍼티 접근
-
객체 안에 있는 프로퍼티나 함수에 접근하기 위해서는 크게 두 가지 방법이있다.
-
점표기법-예) 객체.key
person.name
person.age
person.gender
person.hello()
person.bobby.name
person.bobby.alert()- 괄포 표기법 -
예) 객체['key']
person['name']
person['age']
person['gender']
person['hello']()
person['hobby']['name']
person['hobby']['alert']()함수 파라미터로 객체 전달하기
- 함수 파라미터로 객체를 전달하면 코드를 클린하게 만들 수 있다.
Before
function printPerson(name, age, hobby) {
console.log(`제 이름은 ${name}이며, 나이는 ${age}살 입니다.그리고 취미는 ${hobby} 입니다.`);
}
printPerson('곽지욱', 10, '헬스');After
function printPerson(person) {
console.log(`제 이름은 ${person.name}이며, 나이는 ${person.age}살 입니다.그리고 취미는 ${person.hobby} 입니다.`);
}
const person = {
name: '곽지욱',
age: 10,
hobby: '헬스'
};
printPerson(person);구조 분해 할당
- 객체 속성을 개별 변수에 담을 때 변수의 순서가 아니라 key가 동일하는지가 중요하다.
const person = {
name: '곽지욱',
age: 10,
hobby: '헬스'
};
const { name, age, hobby } = person;팩토리 함수
- JS 로 같은 유형의 객체를 여러번 생성해야 할 때 사용하는 함수 생성 기법이다.
const person1 = {
name: '곽지욱',
age: 10,
hobby: '헬스'
};
const person2 = {
name: '홍길동',
age: 20,
hobby: '축지법'
};
const person3 = {
name: '도깨비',
age: 30,
hobby: '도술'
};
...
const person10 = {
...
};- 이렇게 객체 리터럴로 반복적으로 생성하다 보면 코드의 반복도 많아지고 가독성도 그만큼 떨어짐
팩토리 함수를 사용해야함
function createPerson(name, age, hobby) {
return {
name: name,
age: age,
hobby: hobby
};
};
const person1 = createPerson('곽지욱', 10, '헬스');
const person2 = createPerson('홍길동', 20, '헬스');
const person3 = createPerson('김길동', 30, '헬스');
const person4 = createPerson('고길동', 40, '헬스');
const person5 = createPerson('한길동', 50, '헬스');
const person6 = createPerson('최길동', 60, '헬스');- 사실 여기서 정의 된 name,age,hobby 모두 key와 value가 동일하기 때문에 단축 속성명을 사용 할 수 있다. 단축 속성명은 key와 value를 각각 표기하지 않고 한번만 표기하는 것을 말함
- 뿐만 아니라 클래스를 사용해서 객체를 생성할 수도 있다.
class Person {
constructor(name, age, hobby) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
}
const person = new Person('곽지욱', 20, '헬스');
console.log(person)참조타입 (Reference type)
-
프리미티브 타입이 아닌 것들은 객체타입 또는 참조타입이라고 한다.
-
프리미티브 타입 값을 다른 변수에 할당하면 값 자체를 넘겨주는 것이기 때문에 값의 원형이 변경되진 않는다.
let str1 = 'hello';
let str2 = str1;
str2 = 'world';
console.log('str1: ', str1); // str1: hello
console.log('str2: ', str2); // str2: world- 하지만 객체 타입을 다른 변수에 할당하면 참조값이 할당 되기 때문에 할당 받은 변수에서 속성을 변경하면 값의 원형이 변경된다.
let obj1 = { name: '곽지욱', age: 20 };
let obj2 = obj1;
obj2.age = 30;
obj2.hobby = '헬스';
console.log('obj1: ', obj1); // obj1: {name: '곽지욱', age: 30, hobby: '헬스'}
console.log('obj2: ', obj2); // obj2: {name: '곽지욱', age: 30, hobby: '헬스'}Call By Value vs Call By Reference
- 함수 호출시에 파라미터로 프리미티브 타입을 넘기는 것과 객체 타입을 넘기는 것은 차이가 있다.
function changeName(username) {
username = '홍길동';
}
const name = 'GYMCODING';
changeName(name);
console.log('name: ', name); // name: GYMCODINGCall by Value 는 값 자체를 username에 할당하기 때문에 username 값을 변경해도 함수밖의 name은 변경되지 않는다. 즉 값이 복사된 것.
- Call By Reference (참조에 의한 호출)
function changeName(people) {
people.name = '홍길동';
}
const person = { name: 'GYMCODING' };
changeName(person);
console.log('name: ', person.name); // name: 홍길동- Call By Reference 는 값 자체가 아니라 값을 가리키는 참조 값을 people에 할당 했기 때문에 people과 person이 가리키고 있는 값은 같다.
Spread operator (전개 구문)
- Spread는 펼치다 라는 뜻
...표기법을 사용하여 사용할 수 있다.
let obj = {
name: '곽지욱',
age: 20
};
let person = {
...obj,
hobby: '헬스'
};
console.log('person: ', person);
// [출력]
// person: {name: '곽지욱', age: 20, hobby: '헬스'}for...in
- 객체에 있는 키 항목들을 반복적으로 반환한다.
const person = {
name: '홍길동',
age: 20,
job: '개발자'
};
for (let key in person) {
console.log(`key: ${key}, value: ${person[key]}`);
}
// [출력]
// key: name, value: 홍길동
// key: age, value: 20
// key: job, value: 개발자
키 존재 여부 확인
- in operator - key in object
const person = {
name: '곽지욱',
};
console.log('name' in person) // true
console.log('age' in person) // true
if ('name' in person) {
console.log('이름이 정의되어 있습니다.');
}