JavaScript 기초(object)

object(객체)

• property를 가진 데이터를 저장하는 자료구조, { } 사용

const player = {
    name: "Bob",
    points: 10,
    hair: "short",
};

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

---

1. object.property, object["propterty"]: property의 value에 접근

console.log(player.name); // "Bob"
console.log(player["name"]); // "Bob"

2. value에 값 더하기

player.points = player.points + 14;
player.hair += " dark";
console.log(player.points); // 24
console.log(player.hair); // "short dark"

3. property 추가하기

player.lastName = "Smith"; // player["lastName"] = "Smith";

* const로 선언한 object인 player는 바꿀 수 없지만 그 안의 property는 변경, 추가 가능

4. delete : property 삭제하기

delete player.lastName;
console.log(player); // {name: "Bob", points: 24, hair: 'short dark'}

---

Computed properties

function printValue(obj, key){
 console.log(obj.key);}
printValue(player, 'name'); // undefined

function printValue(obj, key){
 console.log(obj[key]);}
printValue(player, 'name'); // "Bob"

• 어떤 key의 정보를 받아올지 아직 모를 때(runtime에 정해질 때) computed property 사용
• 위 예시의 경우에는 player.key 의 value를 가져오는 명령이기 때문에 undefined 출력
• 아래 예시처럼 동적으로 key에 관련된 value를 받아와야 될때 사용할 수 있음

Property value shorthand

function makePerson(name, age) {
  return {
    name: name,
    age: age,
    // name, age
  };
}

• property value shorthand : key와 value의 이름이 같으면 둘 중 하나 생략 가능

Constructor function

const person1 = new Person('jane', 20); // new 생성자로 Class를 만드는 것처럼 Object 생성
function Person(name, age) {
    this.name: name,
    this.age: age,
}

• 다른 계산 없이 object만 return 하는 function의 이름은 맨 앞글자는 대문자로

---

in 연산자

해당 객체에 특정 property가 있는지 확인할 때 사용

'name' in player; // true
'birthDay' in player; // false

for...in 반복문

const superman = {
    name : 'clark',
    age : 33, 
    };

for(let key in superman){
console.log(key); // name, age
console.log(superman[key]); // 'clark', '33'
}

✍ in 연산자 활용

function isAdult(user){
    if(user.age < 20){
        return false;
    }
    return true;
} // user의 age 속성이 20보다 작으면 false 반환, 아닌 경우 true 반환

const Jane = {
    name: 'Jane',
    age: 10,
}

const Tom = {
    name: 'Tom',
} //age 속성 없음

console.log(isAdult(Jane)); // false 
console.log(isAdult(Tom)); // true 

❌Tom.age는 undefined이기 때문에 return true;로 넘어감
=> age 속성이 없으면 false를 반환하도록 수정해야함

function isAdult(user){
    if(!('age' in user) || user.age < 20){
        return false;
    } else {return true}
}

*!('age' in user)의 값은 user에 age 속성이 없으면 true

---

const user = {
    name: "Bob",
    points: 10,
};
const user2 = user; 

위 예시의 경우 user2의 property를 변경하면 user의 property도 바뀜

Object 복사하기

const user = {
    name: "Bob",
    points: 10,
};
const user2 = Object.assign({}, user);
console.log(user2); // { name: "Bob", points: 10}

• Object.assign은 첫 번째 인자인 객체에 두 번째 인자인 객체의 property를 복사한 후 반환함

const fruit1 = { color: 'red'};
const fruit2 = { color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, friut2);
console.log(mixed.color); // 'blue'
console.log(mixed.size); // 'big'

• 복사하려는 객체에 동일한 key가 존재한다면 뒤에 추가되는 객체의 값으로 덮어쓰면서 복사됨