속성 존재 여부 확인
객체에 없는 속성에 접근하면 undefined 자료형이 나온다.
따라서 조건문으로 undefined인지 아닌지 확인한다면 속성 존재 여부를 확인할 수 있다.
if문 사용
if(obj.키 !== undefined)로도 쓸수 있지만
객체의 특정 속성이 false로 변환될 수 있는 값(0,false,빈 문자열 등)이 아닐 때와 같은 전제가 있어야(Boolean()메소드를 생각!) 안전하게 사용할 수 있는 코드로 아래와 같이 더 간단하게 쓸 때도 있다.
위 코드보다 더 짧게 사용한다면 짧은 조건문 사용
객체의 속성이 있는지 확인하고 있다면 해당 속성을, 없다면 별도의 문자열을 지정하는 코드이다.
기본 속성 지정하기
논리 연산자를 사용하여 기본 속성을 지정해 본다.
console.log(obj)와 JSON 문자열로 변환해 출력도 해보았다.(JSON.stringify(obj,null,2))
그리고 속성이 false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있다면 아래와 같이 짧은 조건문으로도 구현할 수 있다.
개발자들이 이런코드 많이 씀.
배열 기반의 다중 할당
최신 자바스크립트부터 배열과 비슷한 작성 방법으로 한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능이 추가되었다.
다중 할당
[식별자, 식별자, 식별자, ...] = 배열
코드를 써보면서 알아보자.
배열의 길이가 6인 arr = [1,2,3,4,5,6]의 값을 [a,b,c,d]에 할당해본다.
이렇게 하면 arr = [1,2,3,4,5,6] 배열 에서 앞의 4개만 [a,b,c,d] 식별자에 할당 된다.
객체 기반의 다중 할당
최신 자바스크립트에서는 객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 아래와 같이 사용할 수 있다.
객체 속성 꺼내서 다중 할당 하기
{속성 이름, 속성 이름} = 객체
{식별자 = 속성이름, 식별자 = 속성이름} = 객체
코드로 알아보자.
객체를 생성하고 처음에는 const {name, age} = obj 로 객체에서 변수를 그대로 추출했다.
(name속성과 age속성을 그대로 꺼냄)
다음엔 식별자에 속성이름을 할당시킨채로 꺼내보았다.
const {a = name, b = age} = obj
-> name 속성을 a에 , age 속성을 b에!
배열 전개 연산자
배열과 객체는 할당할 때 얕은 복사 라는 것이 이루어진다.
우선 얕은 복사 에 대해서 알아보자.
위와같이 특이하게도 같은 출력값이 나온다.
배열은 복사해도 다른 이름이 붙을 뿐이다.
이렇게 복사했을 때 다른 이름이 붙을 뿐인 것을 얕은복사(참조복사) 라고 부른다.
얕은 복사의 반대말은 깊은 복사 이다.
깊은 복사 라면 복사한 두 배열이 완전히 독립적으로 작동한다.
자바스크립트 개발에서는 깊은 복사를 '클론(clone)을 만드는 것'이라고 표현하기도 한다.
과거에는 깊은 복사를 하려면 반복문을 활용한 긴 코드를 사용하기도 했으나, 최신 자바스크립트에서는 전개 연산자를 사용한다.
전개 연산자를 사용한 배열 복사 ->
[...배열]
- 전개 연산자를 사용한 배열 요소 추가
위와 같이 깊은 복사를 하고 push를 이용해 요소를 추가할수도 있지만, 전개연산자를 사용해 배열 요소를 추가할수도 있다.
{...배열, 자료, 자료, 자료}
{자료, ...배열, 자료, 자료}
객체 전개 연산자
마찬가지로 객체도 얕은 복사 , 깊은 복사 방식이 같다.
전개 연산자를 사용할 수 있다.
- 객체를 얕은 복사 했을때!
- 전개 연산자를 사용한 객체 복사 (깊은 복사)
{...객체}
- 전개 연산자를 사용한 객체 요소 추가
{...객체, 자료, 자료, 자료}
코드로 써보자.
그리고 위와 같이 객체는 전개 순서가 매우 중요하다.
전개라는 이름처럼 전개한 부분에 객체가 펼쳐진다.
뒤에있는 속성이 앞에있는 속성을 덮어쓴다.
내용 정리
속성 존재 여부 확인 -> 객체에 없는 속성은 접근하면 undefined 가 나오는데 이를 활용하자.
다중 할당은 배열과 객체 하나로 여러 변수에 값을 할당하는 것을 의미
얕은복사(참조복사)는 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 복사를 의미
깊은복사는 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사를 의미!
