개발_TIL | 2022-07-27 (69)

📌 Object

---

자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

Object란?

• primitive 타입(number, str …)은 하나의 변수에 하나의 값만 할당할 수 있다
• 출력하려면 값을 각각 다 적어줘야 한다
• 함수의 인자로 넣을 때도 각각 다 적어줘야 한다
• primitve 타입의 변수가 너무 많아지면 관리하기도 힘들고, 로지컬하게 생각하기도 어렵다
• 따라서 오브젝트 형태로 작성해서 간편하게 데이터를 관리하자

Literals and Properties

1. object literal
   • const obj = { }; 과 같이 중괄호를 열어서 만들기
   • const ellie = {name:'ellie', age:4}; // {key : value} ellie.hasJob = true; // 오브젝트 선언 이 후의 밸류 생성 delete ellie.hasJob; // 오브젝트 선언 이 후의 밸류 삭제
   • 특이하게 선언을 한 이후에 값을 추가할 수가 있다.
   • Javascript가 동적으로 타입을 인지하기 때문이다
     • 그러나 너무 많이 사용하기에는 미친짓이다!
   • 특이하게 선언을 한 이후에 값을 삭제할 수가 있다
2. object constructor
   • const obj = new Object(); 와 같이 new를 사용해서 만들기

Computed Property

• 오브젝트는 변수.프로퍼티 혹은 변수[’프로퍼티’] 스트링 형식으로 프로퍼티에 접근할 수있다. 후자의 경우 Computed Property에 해당된다
  • key는 항상 string 타입으로 작성해야 한다
• 일반적으로 코딩할 때는 dot(.) 을사용하여 작성하지만, 정확하게 밸류의 타입을 몰라서 메서드를 작성하지 못 할 때는 대괄호([ ]) 방식의 컴퓨트 프로퍼티로 작성한다
  • 코딩할 때는 점 하나 찍는게 편하니까! 또, 메서드를 자연스럽게 뒤에 붙여서 작성하기 좋다!
  • 반면 컴퓨트 프로퍼티의 경우, 값이 무엇이든 상관없거나 값이 뭐가 들어올 지 아예 모르는 경우, 단순 검사식에 사용하거나 할 때는 적어주기도 한다
  • function printValue(obj, key) { // console.log(obj.key); 를 이 경우에는 사용할 수 없다 console.log(obj[key]); } printValue(ellie, 'name'); printValue(ellie, 'age');

Property Value Shorthand

• 오브젝트를 일일이 key : value 로 만들어주기에는 특수문자가 번거롭다
• function을 사용하여 오브젝트로 선언해주는 방식이 조금 더 편리하다! → 이게 Shorthand

// 일반적인 오브젝트의 선언방법
const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};

// Shorthand
const person4 = makePerson('ellie', 30);
console.log(person4);
function makePerson(name, age) {
    return {
        name,
        age,
    };
}

Constructor Function

• 오브젝트를 일일이 만들때마다, 키밸류를 적는게 귀찮다
• 그래서 함수를 마치 클래스처럼 만들어서 오브젝트를 선언하는 방식이 Contructor Function
• 클래스 선언 규칙처럼 function 대문자로 시작하는 함수이름 (필드){} 와 같은 방식으로 선언하며, 이 함수자체가 constructor 역할을 수행한다고 하여 constructor function 이라고 부른다

const person4 = makePerson('ellie', 30);
console.log(person4);
function Person(name, age) {
        // this = {};
        this.name = name;
        this.age = age;
        // return this;
}

In Operator

• key가 object안에 존재하는지 확인하는 메서드
• key in object 형식으로 작성한다

console.log('name' in ellie);

for in & for of

• 오브젝트 내부의 키, 밸류를 확인하기 위해 사용하는 메서드

1. for (key in obj)
   • for (key in object) {} 형식으로 사용함
   • 오브젝트 내부의 키를 반복문으로 슬라이싱함
   • for (key in ellie) { console.log(key); }
2. for (value of iterable)
   • 오브젝트 중 순차적으로 순환이 가능한 배열(array)의 경우에 사용할 수 있는 내부 값을 반복하는 메서드
   • for (value of array) {} 형식으로 사용함
   • const array = [1,2,3,4]; for (value of array) { console.log(value); }

Clonning

• 오브젝트를 선언하고, 다른 변수에 똑같은 오브젝트를 가리킨다면 동일한 레퍼런스가 할당되어 있다
• 동일한 레퍼런스를 보고 있기 때문에 오브젝트 프로퍼티를 변경하면, 다른 변수의 오브젝트 프로퍼티도 변해있다
• 서로 같은 레퍼런스를 보고 있지만, 새롭게 복제해서 사용해 기존 레퍼런스의 값을 변경하지 않도록 하려는 방식이 Clonning 이다
• 새로운 빈 오브젝트를 선언하고, Object.assign 을 사용하여 오브젝트를 클로닝하는 것이 가능하다

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

const fruit1 = {color: 'blue'};
const fruit2 = {color: 'red', size:'big'};
// 두 개를 합침
const fruit3 = {size:'small'};
const mixed = Object.assign({}, fruit1, fruit2, fruit3); // **red small** 
//뒤에 있는 프로퍼티가 덮어 씌움