[JS] Object

Janet·2022년 9월 1일
0

JavaScript

목록 보기
8/26
// Objects

// 1. Literals ands properties
// object = { key: name }

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

const jiyaho = { name: 'jiyaho', age: 20 };


// 2. Computed properties (계산된 속성)
// key는 항상 string type으로 전달해야한다.
console.log(jiyaho.name); // jiyaho // key의 해당하는 value를 받아오고 싶을 때
console.log(jiyaho['name']); // jiyaho
// Computed property: key의 value가 runtime에서 결정될 때 실시간으로 즉 동적으로 원하는 key의 value를 받아오고 싶을 때

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


// 3. Property value shorthand
const person1 = { name: 'aaa', age: 10 };
const person2 = { name: 'bbb', age: 20 };
const person3 = { name: 'ccc', age: 30 };
// makePerson함수를 통해 같은 형식의 데이터를 template화 하기
const person4 = makePerson('ddd', 40);
console.log(person4); // {name: 'ddd', age: 40}
function makePerson(name, age) {
    return {
        name, // name: name은 중복되는 property value이기 때문에 name으로 줄여줄 수 있음: Property value shorthand
        age,
    };
};


// 4. Constructor funtion
const person5 = new Person('eee', 50);
console.log(person5); // {name: 'eee', age: 50}
function Person(name, age) {
    this.name = name;
    this.age = age;
};


// 5. in operator: 해당하는 object 안에 key가 있는지 확인하는 것
console.log(jiyaho); // {name: 'jiyaho', age: 20}
console.log('name' in jiyaho); // true
console.log('sex' in jiyaho); // false: 정의하지 않은 값


// 6. for..in vs for..of
// for (key in obj): obj에 있는 key들을 할당
for (key in jiyaho) {
    console.log(key); // jiyaho라는 obj에 있는 key들(name, age)이 출력
}

// a) for..of: 배열에 있는 인자들을 할당
const array = [1, 2, 3, 4];
for (value of array) {
    console.log(value); // 1 // 2 // 3 // 4
}

// b) for..of의 old ver.
const array1 = [1, 2, 3, 4];
for (let i = 0; i < array1.length; i++) {
    console.log(array1[i]); // 1 // 2 // 3 // 4
}


// 7. Cloning
const user = { name: 'jiyaho', age: '30' };
const user2 = user;
user2.name = 'coder';
console.log(user); // {name: "coder", age: "30"}

// a) old way
const user3 = {};
for (key in user) {
    user3[key] = user[key]; 
    // user3은 object가 비어있지만, for...in을 사용함으로써 user에 들어있는 object property들을 할당하여 복사해온다.
}
console.log(user3); // {name: "coder", age: "30"}

// b) Object.assign을 통한 cloning
// Object: js에 있는 기본적으로 탑재되어있는 object로, js에 있는 모든 object는 이 Object를 상속함
const user4 = {};
Object.assign(user4, user); // assgin(복사하여 붙여넣을 곳, 복사 해올 소스) => 복사 소스는 여러 개 가능
// const user4 = Object.assign({}, user); 위와 동일한 코드
console.log(user4); // {name: "coder", age: "30"}
profile
😸

0개의 댓글