TIL 14 | JavaScript Object

JavaScriptTILfunctionweb사전스터디

Object??

• object(객체) 는 JavaScript의 데이터 타입의 일종이다.

• 하나의 변수에 하나의 값만 저장할 수 있는 primitive type data와 달리, object는 관련 있는 값들을 묶어서 할당할 수 있다. (하나의 집합같은 느낌)

• primitive type data의 경우 데이터가 작아 메모리에 직접 값을 할당하는 반면, object는 비교적 데이터가 크기 때문에 데이터가 저장된 장소를 가리키는 레퍼런스(주소)를 메모리에 할당한다.

const name = 'yongmin';
const age = 29;
function print(name, age) {
	console.log(name);
	console.log(age);
}
print('yongmin', 29) // yongmin, 29

	⬇

const person = {name: 'yongmin', age: 29}
function print(obj){
	console.log(obj.name);
	console.log(obj.age);	
}
print(person); // yongmin, 29

• 위처럼 그룹화하여 간편하게 데이터를 관리 및 출력을 할 수 있게 된다.

---

How to use it??

1. Object literal syntax

const person = {name: 'yongmin', age: 29}

• object = { key : value }와 같이 {} 및 key과 value를 통해 생성한다.

• 반복적이지 않은, 간단한 데이터의 객체를 생성할 때 주로 사용한다.

---

2. Object constructor syntax

function makeperson (name, age){
  return{
  	name: name, // or name, (Property value shorthand, key와 value값이 동일할때 사용 가능)
	age: age, // or age, (Property value shorthand)
  }
}
const yongmin = makePerson('yongmin', 29)
console.log(yongmin) // Person {name: "yongmin", age: 29}

	⬇

function Person (name, age){
  this.name = name;
  this.age = age;
}
const yongmin = new Person('yongmin', 29)
console.log(yongmin) // Person {name: "yongmin", age: 29}

• constructor(생성자 함수)를 통해 객체를 생성할 수 있다. (class 문법에서도 다룰 예정)

• 생성자 함수명은 대문자로 시작하며, 객체가 생성 됐을 때 객체 자신을 가리키는 this, 새로운 객체를 생성할 시 사용하는 new 를 통해 위처럼 객체를 생성할 수 있다.

• 생성자 함수 문법이 도입되고 나선, 위 예제처럼 기존보다 코드 작성이 더욱 간결해졌다.

• 동일한 형태의 객체를 여러개 생성하고자 할때 사용한다.(객체를 생성하는 공장 느낌, class와 느낌 비슷!)

---

Object properties

const yongmin = { name: 'yongmin', age: 29 };
yongmin.name // "yongmin"
yongmin.age // 29
yongmin.gender // undefined
//
yongmin.hasjob = false // hasjob property값 추가
console.log(yongmin) // {name: "yongmin", age: 29, hasjob: false}
//
yongmin.hasjob = true; // hasjob property의 value 값 수정
console.log(yongmin) // {name: "yongmin", age: 29, hasjob: no}
//
delete yongmin.hasjob; // hasjob property 삭제
console.log(yongmin) // {name: "yongmin", age: 29}

• 객체 property의 원하는 key 값을 통해 value값을 확인 및 수정할 수 있다.

• 해당 key값이 없을 경우, undefined으로 출력이 된다.

• 객체 생성 이후 원하는 property를 추가 및 삭제할 수 있지만, 추후 유지 보수가 힘들기 때문에 되도록 권장하지 않는다.

---

Computer properties

const yongmin = { name: 'yongmin', age: 29 };
console.log(yongmin.name); // yongmin
console.log(yongmin['name']); // yongmin

• property의 key값을 통해 value를 출력하는 또다른 방법은 []를 통한 방법이다.

• [] 안의 key 값은 항상 string(문자열) 타입이어야 한다.

- 아직 이부분에 대해서는 이해가 충분하지 않아.. 추후 수정을 지속적으로 해야겠다.

---

Operator "in"

const yongmin = { name: 'yongmin', age: 29};
console.log('age' in yongmin); //true
console.log('name' in yongmin); //true
console.log('gender' in yongmin); //false

• inoperator 는 객체에 원하는 key값이 있는지 확인한 후 이를 boolean 값으로 출력한다.

• 존재할 경우 true, 존재하지 않을 경우 false의 결과가 나온다.

---

Object using with "For...in"

const yongmin = { name: 'yongmin', age: 29 };
function printKey(obj) {
  for (const key in obj) {
    console.log(key);
  }
}
function printValue(obj) {
  for (const key in obj) {
    console.log(obj[key]);
  }
}
printKey(yongmin) // name, age
printValue(yongmin) // yongmin, 29

• for...in 반복문을 통해 해당 객체의 key, 혹은 value값을 출력할 수 있다.

---

Object cloning

1. 객체의 참조

const person = { name: 'yongmin', age: '29' };
const person2 = person;
person2.name = 'smith'; 
console.log(person.name); // smith (person2의 데이터를 수정했더니 person의 데이터가 변경됐다...)

• 객체는 primitive type data와 달리 새로운 변수에 기존 객체를 그냥 할당할 경우 복제가 아닌, 새로운 참조가 되버린다.

• 위에서 언급했던 것처럼, 객체를 생성할 때 실제 데이터는 메모리 어딘가 저장이 되고, 변수에는 이를 가리키는 참조값(주소값)이 할당된다

• 때문에 person2에 person을 할당하더라도 이는 단순 주소값에 불과하기 때문에 바로가기만 더 만드는 격이 되버린다. 따라서 이 둘은 서로 같은 객체를 가리키고 있으며 person, person2 어디서라도 데이터를 수정할 시 객체의 실제 데이터는 모두 변하게 된다.

---

2. 객체의 복사(Object)

const person = { name: 'yongmin', age: '29', gender: 'male' };
const person2 = {}; //빈 객체 생성
//
Object.assign(person2, person);
console.log(person2); //{name: "yongmin", age: "29", gender: "male"}
person2.name = 'smith';
console.log(person); // {name: "yongmin", age: "29", gender: "male"}
console.log(person2);// {name: "smith", age: "29", gender: "male"}

• 객체의 복사는 Object 내부 메소드인 Object.assign(target,source)를 통해 가능하다.

• 위 예제처럼 assign() 메소드를 통해 객체를 생성(복사)했더니 person2의 name값이 변경됐음에도 불구하고 person의 name값이 변하지 않은 걸 알 수 있다. 따라서 복제 가 이루어졌음을 알 수 있다.

const person = { name: 'yongmin', age: '29', gender: 'male' };
const person2 = {};
Object.assign(person2, person);

	⬇ 

const person = { name: 'yongmin', age: '29', gender: 'male' };
const person2 = Object.assign({}, person) // 

• 위와 같이 더욱 간결하게 코드를 작성할 수 있다.