javaScript는 객체형태로 자유롭다

AceBed·2022년 1월 12일

javaScript는 모든것이 객체화 될수있다.
함수마저 객체화하여 사용할 수 있는데,
우리는 이 개념을 잘 파악하여 코드에 적용할 수 있어야한다.

객체

console.log(1===1); // true
console.log({}==={}); // false
console.log([]===[]); // false

객체는 만들때 마다 새로운 값을 부여한다.
숫자 1을 동일비교 했을시 true가 나오지만,
빈 객체를 만들고 비교했을시 false가 나오는걸 확인할 수 있다.
우리 눈에 보이는건 { } { }뿐이지만, 실제로 안에는 새로운 값이 있으므로,
컴퓨터는 같지 않다고 판단한다.

다음 예제를 확인해보자

let a = {}
let b = {}
console.log(a===b) // false

a = {
  name: 'ingoo'
}
b = {
  name: 'ingoo'
}
console.log(a.name === b.name) // true

객체 끼리 비교할때는 false 였으나,
각 요소인 'ingoo'를 비교했을땐 true가 출력됐다.
즉, 객체 안에 들어가는 요소는 변수로 봐도 된다는 말이다.

깊은 복사

깊은 복사는 참조하는것으로 이해를 하자

c = {
  name: 'yoon'
}
d = c; // 깊은 복사 형태
console.log(d === c) // true

d 에 c의 주소값을 넣어, d를 호출시 c의 주소값이 리턴되어
최종적으로 c의 요소(객체)를 호출하도록 한다.

얇은 복사

얇은 복사는 위의 깊은 복사와 달리 주소값이 아닌
객체를 그대로 넣어 사용한다.

let apple = {name:'ingoo'}
let banana = {}
console.log(apple) // {name:'ingoo'}
console.log(banana) // {}

Object.assign(banana,apple)

console.log(apple) // {name:'ingoo'}
console.log(banana) // {name:'ingoo'}
console.log(apple === banana) // false

apple과 banana는 Object.assing으로 인해,
같은 내용의 객체를 가지게 되었지만
apple === banana의 결과값은 false로,
객체의 내용은 같아도, 객체 그자체는 서로 다르다는 것을 인지할수있다.

... (3점 표기법)

let a = ['ingoo','yoon','kim']
let b = {...a} // ... 은 a의 객체요소를 가져오겠다.

console.log(a) // 첨부파일 참고
console.log(b)

console.log(a===b) // type이 다르기 때문에 false

3점 표기법 spreadOperator는 해당 객체요소를 가져오는 방법이다.
a에 배열을 작성후, b에는 객체형태로 a의 객체요소를 가져왔다.

그 결과

a와 b둘 다 같은 객체가 들어갔다.
다만, type이 각각 배열, 객체 로 다르다.

new Set()

spreadOperator와 같이 객체요소를 가져오나,
중복요소를 제거 후 객체로 반환해준다.

const dupArr = [1,2,3,1,2]
// new Set() 중복값을 제거해줌. 배열형태가아닌 다른형태로
const set = new Set(dupArr) // 객체로 반환됨
console.log(set) // set // 객체에 담겨있다. {1, 2, 3}

const uniqueArr = [...set] // 먼저생성 (얇은복사)
// ...set 객체안의 요소만 싹 가져온다.
console.log(uniqueArr) // array