6-3. 객체와 배열 고급

1. 속성 존재 여부 확인

객체 내부에 어떤 속성이 있는지 확인해보는 코드는 굉장히 자주 사용되는 코드이다.

 

객체 선언

속성 여부 확인

이것처럼 사용 가능하고

이렇게도 사용 가능하고

이렇게도 사용가능하다.

obj 객체의 키 값 value는 존재하지 않기 때문에 value = undefined 이다.

따라서 첫 번째 사진의 undefined !== undefined -> false 가 검출된다.

두 번째 사진의 obj.value는 undefined이기 때문에 값이 존재하지 않으므로 false로 검출된다.

세 번째 사진의 경우에는 obj.value 가 true(값이 있다.)일 떄는 따로 처리하지 않고, false일 경우에 console.log를 출력한다.

 

+. 기본 속성 지정

obj.value 의 값이 존재하지 않으면 "value 값"이라고 기본 속성을 지정하는 방법도 가능하다.

---

2. 다중 할당

구조 분해 할당이라고도 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

2.1 배열 기반 다중 할당

[식별자, 식별자, 식별자, ...] = 배열

배열 인덱스 a,b 에 값을 할당하고 a와 b의 값을 바꿔치기하는 것도 가능하고

이와 같이 배열의 일부값만 가져올 수도 있다.

 

 

2.2. 객체 기반 다중 할당

객체를 선언하고, 구조 분해 할당으로 obj의 키 값을 const로 재 선언하고 보여주는 결과이다.

---

3. 전개 연산자

배열과 객체는 할당할 때 얕은 복사라는 것이 이루어진다.

https://ko.javascript.info/object-copy

참조에 의한 객체 복사

결론부터 이야기하자면, 얕은 복사는 참조(by reference)기 때문에, 같은 값을 다르게 부르는 것이라고 생각하면 될 듯 싶다.

두 변수 모두 같은 참조값을 가리키고 있기 때문에, 하나의 변수의 값만 바꿔도 둘 다 변경되는 것처럼 보이는 것이다.

 

반대말은 깊은 복사이다.

깊은 복사라면 복사한 두 배열이 완전히 독립적으로 작동한다. 자바스크립트 개발에서는 깊은 복사를 클론(Clone)을 만드는 것이라고 표현하기도 한다.

최신 자바스크립트에서는 전개 연산자를 사용해 다음과 같이 입력하기만 해도 된다.

[...배열]

3.1. 배열 전개 연산자

다음이 얕은 복사를 확인 할 수 있는 예 이다.

j가 i의 얕은 복사로 만들어졌기 때문에, 기존의 목표인 i = "안녕하세요!" 와 j = "안녕하세요;;" 가 되지 않고 ! ;; 두개가 합쳐진 것을 확인할 수 있다.

 

다음은 깊은 복사(클론)를 확인 할 수 있다.

배열 b 전개 연산자를 사용해 a의 값으로 복사되어 클론되어지고, a와 b를 수정하게 되더라도 서로 독립적으로 작동하는 것을 확인 할 수 있다.

 

3.2. 객체 전개 연산자

앞서 나왔던 배열의 얕은 복사와 같다.

 

전개 연산자를 사용해 깊은 복사로 별개의 객체를 만들어 낸 것을 볼 수 있다.

또한 추가로 자료를 넣을 수도 있다.

 

{ ...객체, 자료, 자료} 의 형태로도 선언이 가능하다.

다만 객체는 전개 순서가 중요하므로 제일 먼저 ...person을 하고 그 뒤에 새로운 값을 추가한다던지, 복사한 객체의 값을 바꾸는 것이 좋다.

 

제일 뒤에 ...obj를 했기 때문에 다시 덮어씌워졌다

obj 객체와 겹치지 않는 hobby 키 값의 속성(property)는 선언한 값이 왔지만 다른 나머지 값들은 obj의 값이 덮어씌워진 것을 확인 할 수 있다.(순서 중요!)