JavaScript - Object(객체)

object란..?

primitive 타입은 변수 하나당 값을 하나만 담을 수 있다. 이를 가지고 함수를 만들게 되면 각각의 인자들을 받을 수 있는 parameter들을 만들어 주어야 하므로 인자가 많아지게 되면 관리하기가 힘들어진다.
관련된 값들을 한번에 모아서 관리, 접근 할 수 있도록 만들어진 것이 바로 object, 객체이다.
object는 key값과 value값을 쌍으로 이루고 있고, 배열과 다르게 순서가 중요하지 않다. {key: value}

object를 만드는 방법

<script>
<!--'object literal' syntax-->
  const obj1 = {}; 
<!--'object constructor' syntax-->
  const obj2 = new Object();
</script>

Computed properties

객체 속성에 접근 하는 방법은 Dot Notation(점표기법)과 Bracket Notation(괄호표기법)이 있다.

• Dot Notation : object.property
• Bracket Notation : object['property']

접근 방법별 장단점

Dot Notation	Brackt Notation
프로퍼티 식별자는 오직 알파벳만 가능(_&$포함)	프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 **변수**
숫자로 시작할 수 없음	숫자로 시작할 수 있음
변수를 포함할 수 없음	변수, 공백 사용 가능
가능: obj.prop_1, obj.prop$	가능: obj['1prop'], obj['prop name']
불가능: obj.1prop, obj.prop name

객체의 값을 추가, 수정, 삭제하는 방법

Dot Notation

<script>
let obj = {
   mbti : "ISFP",
   bloodType : "O형",
   }
 <!--값 추가-->
  obj.age = "28살";
 <!--값 수정-->
  obj.mbti = "INFJ";
 <!--값 삭제-->
  delete obj.age;
</script>

Bracket Notation

<script> 
let obj = {
  mbti : "ISFP",
  bloodType : "O형",
    }
 <!--값 추가-->
  obj["age"] = "28살";
 <!--값 수정-->
  obj["mbti"] = "INFJ";
 <!--값 삭제-->
  delete obj["age"];
</script>

Property value shorthand

object를 필요할 때마다 만들게 되면 매번 같은 key값을 입력해야 한다.

<script>
  const person1 = { name: 'bob', age: 2 };
  const person2 = { name: 'steve', age: 3 };
  const person3 = { name: 'dave', age: 4 };
</script>

class가 없을 때에는 function으로 object를 생성할 수 있게 만들었었다.
이렇게 단순하게 object만 생성하는 함수의 이름은 보통 대문자로 시작하도록 만든다.

<script>
  function Person(name, age){
  	return {
    	name: name,
        age: age
    }
  }
</script>

Constructor Function

return 안에 있는 key와 value가 동일한 부분은 생략 가능하고 이부분을 this를 사용하여 변경한다.
또한 호출 할 때에는 함수 이름 앞에 new를 붙여 호출한다.

<script>
  function Person(name, age){
  	return {
    	this.name = name;
        this.age = age;
    }
  }
  const person4 = new Person('mia', 28);
</script>

in operator

해당하는 object안에 key가 있는지 확인.

<script>
console.log('name' in person) // true
</script>

for...in vs for...of

for (key in obj)

<script>
  const mia = { name: 'mia', age: 28}
  for (key in mia) {
  	console.log(key);
  } // name / age
</script>

for (value of interable)

<script>
  const array = [1, 2, 4, 5];
  for (value of array) {
    console.log(value);
  } // 1 / 2 / 4 / 5
</script>

Cloning

user에 user2를 할당하고 그것의 값을 바꾸면 user에도 영향을 미치게 된다.

<script>
  const user = {name: 'mia', age: '28'};
  const user2 = user;
  user2.name = 'jiyeon';
  console.log(user); // {name: 'jiyeon', age: '28'}
</script>

object의 값을 복사해서 수정하고 싶을 때 할 수 있는 방법이 cloning이다.
옛날에는 이런 방식을 사용했다.

<script>
  const user3 = {};
  for (key in user) {
    user3[key] = user[key];
  }
  console.log(user3); // {name: 'mia', age: '28'}
</script>

다른 방법으로는 Object.assign()이다.
괄호 안에 복사한 것을 담을 object, 복사할 object(하나 이상 넣을 수 있다.)을 넣으면 된다.

<script>
  const user4 = {};
  Object.assign(user4, user);
  console.log(user4); // {name: 'mia', age: '28'}
  //또는
  const user4 = Object.assign({}, user);
  //another example
  const fruit1 = {color: 'red'};
  const fruit2 = {color: 'blue', size: 'big'};
  const mixed = Object.assign({}, fruit1, fruit2);
  console.log(mixed); // {color: 'blue', size: 'big'} 
  -> 뒤에 할당된 object가 앞의 property을 덮어버림.
</script>