[TIL] 객체지향언어 2 (object)

1. literals & properties

object = {key : value}
object는 key 즉, 우리가 접근할 수 있는 property와 property가 가지고 있는 value로 나뉘어져 있음

• const obj = { };
• const obj = new object();
  

properties에 접근하기 위해선 두 가지 접근법이 있다.
1) .을 이용한 접근

let spaceship = {
  'planet' : 'Earth',
  'color : 'silver'
};

spaceship.planet; // returns 'Earth'
spaceship.color; // returns 'silver'
spaceship.fast; // returns undefined

2) 대괄호 [ ] 를 이용한 접근

• 숫자, 공백 , 특수문자가 포함된 키에 접근할 때 사용

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};
spaceship['Active Duty'];   // Returns true
spaceship['Fuel Type'];   // Returns  'Turbo Fuel'
spaceship['numCrew'];   // Returns 5
spaceship['!!!!!!!!!!!!!!!'];   // Returns undefined

• 대괄호를 사용할 시, 대괄호 내의 변수를 사용하여 개체의 키를 선택할 수 있으며, 함수 작업시 특히 유용하다
• 만약 .을 사용하여 returnAnyProp()함수를 생성하려고 하면 'propName' 키를 매개변수가 아닌 객체에서 찾으려고 할 것이다.

let returnAnyProp = (objectName, propName) => objectName[propName];
 
returnAnyProp(spaceship, 'homePlanet'); // Returns 'Earth' 

property Assignment

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

const serena = {name : 'serena', age : 20};
print(serena) 

// output: serena    20

뒤늦게 추가도 가능하며, 삭제도 가능하다

serena.job = 'developer';
console.log(serena.job); // developer

delete serena.job // undefined

2. computed properties

console.log(serena.name);
console.log(serena['name']);

위와 같이 배열에서 데이터를 받아오는 것처럼 접근하는 것을 말함
property는 ' '를 붙여 string 타입으로 받아와야 함

위에 삭제된 job을 computed properties를 이용하여 다시 추가할 수도 있다.

serena['job'] = developer;

💡 언제 .의 형태를 쓰고, [ ] 의 형태를 쓸까?

• .name과 같이 .의 형태를 쓸 때는 코딩하는 순간 그 키에 해당하는 값을 받아오고 싶을 때 사용
• []는 정확하게 어떤 키가 필요한지 모를 때, runtime에서 결정될 때 사용

만약에

function printvalue(obj, key) {
  console.log(obj.key);
}

printvalue(serena, 'age');

를 호출할 경우 object에 key라는 property가 없으므로 undefined가 나옴
값을 출력하려면
serena.key = 'my key'; 와 같이 할당을 해줬어야 함

따라서 아래와 같이 computed property를 이용해서 값들을 불러와야 함

function printvalue(obj, key) {
  console.log(obj[key]); // computed property 로 변경
}

printvalue(serena, 'age');

// output: 20

3. Property value shorthand

const person1 = { name : 'gemma', age: 19};
const person2 = { name : 'alberto', age: 28};
const person3 = { name : 'serena', age: 31};

이 있을 때 person4, 5, 6 등을 만들 때 또다시 뒤의 내용을 반복하기 번거롭다.
이 때 Makeperson() 을 만들어서 대입해주면 더 편하게 만들 수 있다.

function Makeperson(name, age) {
  return {
    name : name,
    age : age,
  }
}

const person4 = Makeperson('Marco', 35);

console.log(person4) ; //output: {name: "Marco", age: 35}

이 때 JavaScript에는 key와 value의 이름이 동일하다면, 한번만 작성해도 됨

function Makeperson(name, age) {
  return {
    name, 
    age,
  }
}

4. Constructor function

object를 일일이 만들게 되면 동일한 key와 value를 반복해서 작성해야하는 문제점이 있다. 이를 해결하기 위해 함수를 이용해서 값만 전달해주면 object를 만드는 유용한 함수를 생성했다(Makeperson()).

즉 Makeperson은 class처럼 templete의 역할을 하는데,
다른 계산을 하지 않고 순수하게 object를 생성하는 함수들은

대문자로 시작하게 만들고, return을 사용하지 않고 this. 을 사용한다
호출할 때도 new funcion name으로 작성한다.

const person4 = new Person('Marco', 35);

function Person(name, age) {
  this.name = name;
  this.age = age;
}

5. in operator

• 해당하는 object 안에 key가 있는지 없는지 확인하는 것

const person4 = new Person('Marco', 35);

function Person(name, age) {
  this.name = name;
  this.age = age;
}

console.log('name' in person4); // output : true

6. for...in / for...of

- for...in

for (key in obj) {
console.log(key, obj[key]);

serena가 가지고 있는 모든 key들을 보여줌

for (key in serena) {
  console.log(key);
}

//output : name  age  job

- for...of

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length;  i++) {
  console.log(array[i]);
}                           
로 출력하던 것을 간단하게 출력 가능

for (value of array) {
  console.log(value);
}

7. cloning

const user = {name : 'serena', age: 18};
const user2 = user;
user2.name = 'marco';
console.log(user); // {name: "marco", age: 18}

user2와 user가 같은 reference를 갖고오기 때문에 user2의 이름을 바꾸면 user의 값도 바뀌게 됨.
이런 변화 없이 user 값을 복사하고 싶다면

1) old way

const user3 = {};
for (key in user) {
  user3[key] = user[key];
}

console.log(user3); // output : {name: "marco", age: 18}

user 안에 있는 key들을 순차적으로 불러오면서 user3의 key는 user key에 할당된 value를 불러옴

2) new way : Object.assign(dest, [obj1, obj2 ...])

const user4 = {};
Object.assign(user4, user);
console.log(user4);  // output : {name: "marco", age: 18}

위를 더 간단하게 작성하면

const user4 = Object.assign({}, user);
console.log(user4);

로 작성해도 됨

Object.assign은 여러개의 source도 전달할 수 있는데, 뒤에 나오는 것이 앞쪽의 property를 덮어씌우면서 출력되므로 유의해야한다.
예를 들어

const stone1 = {color : 'black'};
const stone2 = {color : 'white', size : 'small'};
const stone3 = {color : 'brown'}
const mixed = Object.assign({}, stone1, stone2, stone3);
console.log(mixed.color); // brown
console.log(mixed.size); // small

위의 예시에서 살펴볼 수 있듯이,
color값이 stone3의 값으로 덮어씌워져있는 것을 볼 수 있다.