[JS] 객체(Object)에 대한 추가지식

김태희·2023년 6월 6일
0

[HTML+CSS+JS] 시리즈

목록 보기
8/16
post-thumbnail

1. 객체(Object) : "key : value" 의 집합체


const taehui = {
  name: 'taehui',
  age: 21
}//JS에서는 Class 없이도 객체를 생성할 수 있다
function print(person){
  console.log(person.name);
  console.log(person.age);
}
taehui.hasJob = true; //뒤늦게 속성을 추가할수도 있다 but 하지 않는 것이 좋음
delete taehui.hasJob; //삭제도 가능은 하다
  • JS에서는 Class 없이도 객체를 생성할 수 있다
  • 다른 언어들과는 다르게 뒤늦게 속성을 추가하거나 삭제할수도 있지만, 하지 않는 것이 좋다 !

2. Computed properties

key는 늘 string 형으로 사용해야한다

taehui.name; -> taehui['name'];

정확하게 어떤 key가 필요한지 모르거나 동적으로 key에 대한 value를 받아와야할 때 사용한다 !

function printValue(obj, key){
  console.log(obj[key]);
}
printValue(taehui, 'name'); //이처럼 사용한다

3. Property value shorthand

동일한 object와 key를 반복해야 할때 class 역할을 하도록 object를 생성하는 함수를 만드는 것

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = makePerson('taehui', 20);
function makePerson(name, age){
  return{
    name,
    age,
  };
}

4. Constructor function

just like 생성자

const person3 = new Person('taehui', 20);

function Person(name, age){
  this.name = name;
  this.age = age;
}

5. in operator : property existence check (key in obj)

key가 객체에 있는지 확인할때 사용

console.log('name' in taehui); -> true

6. for..in vs for..of

for(const property in person2){
  console.log(property);
} //person2 객체 안의 모든 key를 출력

const array = [1,2,4,5];
for(let i=0; i<array.length; i++){
  console.log(array[i]);
} //hard way

for(value of array){
  console.log(value);
} //easier way

7. Cloning

오브젝트의 주소를 동일하게 하는 것이므로 복사의 기능과는 좀 다르다

const user = { name: 'taehui'};
const user2 = user;
user2.name = 'coder';
console.log(user); //coder가 나온다


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

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

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

0개의 댓글