javascript - Object

김동하·2020년 9월 20일
0

javascript

목록 보기
19/58

자바스크립트의 모든 객체는 Object 객체를 상속받는다. 그래서 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.

cloning

const user = {name:"dongha", age:"20"}
const user2 = user
user2.name = "dongeun"
console.log(user.name) // dongeun

user 객체가 있고 user2가 user를 가리킨다. user와 user2는 각기 다른 reference를 가리키고 그 reference는 동일한 object를 가리킨다. ({name:"dongha", age:"20"})
여기서 user2의 name 값을 변경하면 user의 name 값도 변경된다.

object 복제하기

const user3= {};
for(key in user){
  user3[key] = user[key]
}

이렇게 for in으로 하나씩 직접 복사해서 새로운 user3 객체를 만든다. 혹은

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

이렇게 assign으로 하면 된다.

Object의 메서드

Object.key()

const arr = ["a", "b", "c"]
console.log("Object.keys(arr)", Object.keys(arr)) // Object.keys(arr) [ '0', '1', '2' ]

Object.key()는 배열에 담겨있는 키를 가져온다. return은 배열로 한다.

Object.prototype.toString()

const obj = new Object()
console.log("obj.toString()", obj.toString()) // obj.toString() [object Object]
const arr2= new Array(1,2,3)
console.log("arr2.toString()",arr2.toString()) // arr2.toString() 1,2,3

어떤 객체의 상태나 값을 출력한다.

Object 뒤에 프로퍼티로 prototype이 있고 없고의 차이는 생성자 함수의 프로퍼티를 사용하느냐 prototype의 메서드로 사용하느냐 차이다. (더 공부 필요)

Object 확장

const obj = {'name':'dongha', 'city':'seoul'}

console.log(obj.contain('dongha'));

const arr = ['dongha','dongeun','dongwhan'];

console.log(arr.contain('dongeun'));

contain 메서드는 인자가 객체에 있는지 확인하고 있으면 true를 리턴한다. 이 로직을 모든 객체에 적용하고 싶다면 Object를 활용하면 된다.

Object.prototype.contain = 
function(neddle) {
    for(var name in this){
        if(this[name] === neddle){
            return true;
        }
    }
    return false;
}

Object.prototype.
모든 객체의 부모인 Object를 만들고 생성자의 프로퍼티 안에 들어있는 객체를 변경하기 위해 prototype.contain에 메서드를 정의한다.

Object.prototype.contain = funtion(needle){

}

for in으로 객체가 가지고 있는 값을 찾는다. 여기서 this는 그 메서드가 소속되어 있는 객체를 의미하므로 this는 obj와 arr를 지칭한다. 객체의 value와 인자가 같다면 true를 return 한다.

Object.prototype.contain = funtion(needle){
  for(let name in this){
     if(this[name] === needle){
        return true
    }
  }
  return false
}

하지만 Object의 확장은 단점이 있다. 모든 객체에 영향을 줄 수 있기 때문이다.

for(let name in obj){
  console.log(name) // dongha seoul contain
}

for in으로 obj을 넣고 name을 출력하면 prototype에 추가한 매서드인 contain까지 나온다.

그래서 Object에 프로퍼티나 메서드를 추가할 때는 신중하게 해야 한다.

대안

for (let name in arr){
    if(arr.hasOwnProperty(name)){
      console.log(name) // 0, 1, 2
  }
}

hasOwnProperty 를 조건문으로 만들어서 추가된 메서드가 아닌 arr 가 가지고 있는 요소만 나열하게 할 수 있다.

출처 : https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/lecture/2574?tab=note

https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8

profile
프론트엔드 개발

0개의 댓글