JS-6일차(object)

김혜성·2021년 7월 24일
0

프론트엔드

목록 보기
9/17

Object

  • one of the JS's data types
  • a collection of related data and/or functionality
  • Nearly all objects in JS are instances of Object
  • object = {key: value};

Literals and properties

object 생성 방법에는 literal과 constructor 두가지가 있다

const obj1 = {}; // object literal syntax
const obj2 = new Object(); // object constructor syntax

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

}
const comet = { name: 'comet', age: 20 }; //class 없어도 obj 생성 가능!
print(comet);

comet.hasJob = true; //이처럼 이후에 추가도 가능
//but 지양!
delete comet.hasJob; //이처럼 이후에 삭제도 가능!

객체에서 새로운 key:value를 추가하거나 삭제할 수 있지만 가독성 떨어지고 디버깅 등이 어렵고 복잡해지므로 지양하쎄용!

Computed properties

  • key should be always string!
    오브젝트의 메소드를 불러오는 방법이 두가지가 있는데, 그 중
    comet.name이 아닌 comet['name']의 방식의 사용 목적이 이해가 잘 안됐는데 스터디에서 부원 한분이 잘 설명해주어서 납득됐다!
// comet.name === comet['name']
//대신 []안에는 String 타입으로 넣어야 한다
console.log(comet.name); //이 방법은 사용하는 그 순간 받아올 때 사용(일반적인 방법)
console.log(comet['name']); // 이 방법은 지금 당장 어떤 key를 불러올지 모르고 runtime에서 결정될 때 사용

function printValue(obj, key) {
    console.log(obj.key); //요따구로 쓰면 당연히 obj에는 key라는 property가 읎기에 undefined 뜹니다!
    //이 때가 바로 ['']를 써야 하는 적기인 것이지요 우리가 여기에 뭐가 들어갈지 아직 모르니까요~
    console.log(obj[key]); //요렇게 말이지요ㅎ
}

printvalue(comet, 'name')
printvalue(comet, 'age')

Property value shorthand

const person1 = { name: 'bob', age: 7 };
const person2 = { name: 'james', age: 14 };
const person3 = { name: 'steve', age: 81 };
const person4 = new Person('comet', 21);
//person 4를 추가하고 싶을 때 또 이 노가다를 하라고?
//어림도 없지~ constructor function 만들어버리기~
console.log(person4);  //출력 잘되죠?

아래의 코드가 이어진다

Constructor function

function Person(name, age) {
    //this = {};
    this.name = name;
    this.age = age;
    // return this;
    //주석으로 달아놓은 요 두 코드가 생략된 거에요!!
}

in operator: property existence check (key in obj)

// 해당하는 key가 object 안에 있는지
console.log('name' in comet);
console.log('age' in comet);
console.log('riot' in comet); //false겠죠? 정의되지 않은 property거든요
console.log(comet.riot); // undefined나올 거에요

for..in vs for..of

// for(key in obj)
console.clear(); //요건 그냥 콘솔창의 이전 출력들 다 지우는 코드
for (key in comet) {
    console.log(key);
}

// for (value of iterable)
// 배열과 같이 순차적인 거에서 사용
const array = [1, 2, 4, 5];
for (value of array) {
    console.log(value);
}

Fun cloning

// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'comet', age: 21 };

const user2 = user;
//user은 name, age를 가르키는 ref를 가르킨다
//user2에 user가 할당됐으니 user2에도 같은 name, age를 가르키는 ref가 할당된다
user2.name = 'coder';
//따라서 이처럼 user2.name을 변경하면 user의 ref이 가르키는 name과 동일한 변수의 값이 바뀌므로
console.log(user);
//user.name도  'coder'로 바뀌게 된다

// old way
const user3 = {};
for (let key in user){
    user3[key] = user[key];
}
console.log(user3);

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

// 여러 obj assign 가능
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed); //blue, big로 됨(뒤에 배치된 obj로 덮어씌워짐)
profile
똘멩이

0개의 댓글