[JavaScript 12] 객체와 배열 고급

김헤일리·2022년 11월 24일

JavaScript 항해99

JavaScript

목록 보기

13/20

추후 사용하게 될 리액트나 뷰 등의 프레임워크를 사용하려면, 객체의 속성에 대한 이해도가 더 높아져야 한다.
객체 내부에 어떤 속성이 있는지 확인해보고, 객체를 조작하는 법에 대한 간단한 개념부터 숙지하자.

1. 속성 존재 여부 확인

객체에 존재하지 않는 속성에 접근하면 undefined 자료형이 출력된다.
조건문을 사용해서 속성의 존재 여부를 확인할 수 있다.
- 예시:

if (object.name) { // object라는 변수에 들어있는 객체에 name이라는 key 값을 가진 속성이 있다면,
  console.log('name 속성이 있습니다.') // 'name 속성이 있습니다.' 출력
} else { // name 속성이 없다면, 
  console.log('name 속성이 없습니다.') // 'name 속성이 없습니다.' 출력
}


if (object.auhor) { // object라는 변수에 들어있는 객체에 author라는 key 값을 가진 속성이 있다면,
  console.log('author 속성이 있습니다.') //'author 속성이 있습니다.' 출력
} else { // author 속성이 없다면, 
  console.log('author 속성이 없습니다.') //'author 속성이 있습니다.' 출력
}

❗️ 기본 속성 지정하기

객체를 생성할 때, 값이 들어오지 않는 키가 존재할 수도 있다는 것을 미리 설정할 수 있다.
객체의 속성값을 추가로 부여하지 않으면, 해당값에 미리 지정되는 속성이 자동적으로 부여되는 것
- 예시

const object = { // object라는 변수에 
  name: '혼자 공부하는 자바스크립트', // 객체의 속성을 name, 속성의 값을 '혼자 공부하는 자바스크립트'로 지정
  price: 18000, // 객체의 속성을 price, 속성의 값을 18000으로 지정
  publisher: '한빛미디어' // 객체의 속성을 publisher, 속성의 값을 '한빛미디어'로 지정
}

object.name = object.name !== undefined ? object.name : '제목 미정'
// 만약 object에 있는 속성 중 name이 undefined가 아니라면 name을 그대로 출력하고 맞다면 '제목 미정'을 출력해라

object.author = object.author !== undefined ? object.author : '저자 미상'
// '='과 '?' 사이는 조건, '?'와 ':' 사이는 조건이 true일 때 값, ':' 이후는 조건이 fasle일 때 값이다.

console.log(JSON.stringfy(object, null, 2)) // 데이터가 JSON 형태로 출력된다.
// 출력 시 author 속성과 값을 주지 않았기 때문에 author: '저자 미상' 이라는 부분이 마지막 줄에 추가된다.

2. 다중 할당

한번에 여러 개의 변수에 값을 할당하는 기능.

❗️ 배열 기반의 다중 할당

[식별자, 식별자, 식별자 _] = 배열
- 예시:

let [a,b] = [1,2] // 왼쪽 배열에 a, b를 넣고 오른쪽 배열에 [1,2] 할당 시, 각자 배열 위치에 맞게 값이 할당된다.

console.log(a,b) // 출력 시 1과 2가 출력된다.


let [a,b] = [1,2,3] // 두 배열의 길이는 같을 필요 없다.

console.log(a,b) // 출력 시 동일하게 1과 2가 출력된다.

❗️ 객체 기반의 다중 할당

객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 사용할 수 있다.
변수를 추출하기 위해서 사용하는 코드는 아래와 같다.
- {속성 이름, 속성 이름} = 객체 / {식별자 = 속성 이름, 식별자 = 속성 이름} = 객체
- 예시:

// object라는 상수 안에 객체 생성
const object = {
  name: '혼자 공부하는 자바스크립트',
  price: 18000,
  publisher: '한빛미디어'
}

// 객체에서 변수 추출 시도
const {name, price} = object // 기존 객체에서 사용하는 속성 이름을 그대로 사용해서 변수 추출 시도
console.log(name, price) // >>> [혼자 공부하는 자바스크립트 18000]가 출력된다

// 객체의 속성 이름을 변경하고 변수 추출 시도
const {a=name, b=price} = object // a에 객체의 name이라는 속성을, b에 객체의 price라는 속성을 담아서 추출
console.log(a,b) // >>> [혼자 공부하는 자바스크립트 18000]가 출력된다

변수의 이름을 변경해도 객체에서는 동일한 값이 추출되는 것을 확인할 수 있다.

3. 전개 연산자

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

얕은 복사란 객체나 배열을 복사하여 복사본을 수정해도 원본이 같이 수정되는 것을 의미한다.

예시:

const 물건_001 = ['우유', '식빵'] // 배열을 '물건_001'이라는 변수에 할당
const 물건_002 = 물건_001 // '물건_002'라는 변수에 '물건_001'을 할당 >> 이때 얕은 복사가 일어남

물건_002.push('고구마') // '물건_002'에 '고구마'라는 요소를 추가함

console.log(물건_001) // >>> ['우유', '식빵', '고구마'] 출력
console.log(물건_002) // >>> ['우유', '식빵', '고구마'] 출력

얕은 복사와 반대되는 개념을 "깊은 복사" 라고 한다.
- 깊은 복사는 객체나 배열을 복사했을 때, 복사본과 원본이 완전히 독립적으로 작동하는 것을 의미한다.
- 복사본을 수정해도 원본에는 변화가 일어나지 않는다.
배열과 객체를 복사하기 위해선 전개 연산자를 사용한다.

❗️ 배열 전개 연산자

[...배열의 이름] 전개 연산자를 활용하여 배열을 복사하면 두 배열이 독립적으로 작동한다.
- 예시:

const 물건_001 = ['우유', '식빵'] // 배열을 '물건_001'이라는 변수에 할당
const 물건_002 = [...물건_001] 
// '물건_002'라는 변수에 '물건_001'을 전개 연산자를 이용해서 할당하면 깊은 복사가 일어남

물건_002.push('고구마') // '물건_002'에 '고구마'라는 요소를 추가함

console.log(물건_001) // >>> ['우유', '식빵'] 출력 (원본 유지)
console.log(물건_002) // >>> ['우유', '식빵', '고구마'] 출력 (독립적 작동)

[...배열, 자료, 자료, 자료] 형식의 전개 연산자를 사용할 경우, 복사하는 주체에 push()를 사용하지 않고도 자료와 복사하고자 하는 대상을 추가할 수 있다.
- 예시:

const 물건_001 = ['우유', '식빵'] // 배열을 '물건_001'이라는 변수에 할당
const 물건_002 = [...'고구마', 물건_001, '토마토'] 

console.log(물건_001) // >>> ['우유', '식빵'] 출력 (원본 유지)
console.log(물건_002) // >>> ['고구마', '우유', '식빵', '토마토'] 출력 (물건_001의 자료가 배열의 중간에 위치함)

2개 이상의 배열을 전개 연산자에 활용할 수 있다.
- 예시:

const 물건_001 = ['우유', '식빵'] // 배열을 '물건_001'이라는 변수에 할당
const 물건_002 = ['고구마', '토마토'] // 배열을 '물건_002'이라는 변수에 할당


[...물건_001, ...물건_002]
// >> ['우유', '식빵', '고구마', '토마토']

[...물건_002, ...물건_001]
// >> ['고구마', '토마토', '우유', '식빵']

❗️ 객체 전개 연산자

객체도 배열과 같이 전개 연산자를 이용해서 깊은 복사를 할 수 있다.
일반 복사 사용 시, 얕은 복사가 진행된다.
- 예시: 얕은 복사

const 구름 = { // '구름'이라는 변수에 객체를 할당한다.
	이름: '구름',
  	나이: 6,
  	종족: '강아지'
}

const 별 = 구름 // '별'이라는 변수에 '구름' 객체를 할당 (얕은 복사가 진행된다.)

별.이름 = '별' // '별'이라는 변수에 있는 객체에서 '이름' 속성을 '별'로 변경
별.나이 = 1 // '별' 객체의 '나이' 속성을 (1)로 변경

console.log(JSON.stringfy(구름)) // {"이름":"별", "나이": 1, "종족": "강아지"}
// '별' 객체에서 변경한 값이 '구름' 객체에도 동일하게 적용됨
console.log(JSON.stringfy(별)) // {"이름":"별", "나이": 1, "종족": "강아지"}

{...객체} 형식의 전개 연산자를 사용할 경우, 깊은 복사가 진행된다.
- 예시: 전개 연산자를 사용한 깊은 복사

const 구름 = { // '구름'이라는 변수에 객체를 할당한다.
	이름: '구름',
  	나이: 6,
  	종족: '강아지'
}

const 별 = {...구름} // '별'이라는 변수에 '구름' 객체를 전개 연산자를 이용해서 할당

별.이름 ='별' // '별'이라는 변수에 있는 객체에서 '이름' 속성을 '별'로 변경
별.나이 = 1 // '별' 객체의 '나이' 속성을 (1)로 변경

console.log(JSON.stringfy(구름)) // {"이름":"구름", "나이": 6, "종족": "강아지"}
console.log(JSON.stringfy(별)) // {"이름": "별", "나이": 1, "종족": "강아지"}
// '별' 객체에서 변경한 내용이 '별' 객체에만 적용됐다.

{...객체, 자료, 자료, 자료} 형식의 전개 연산자를 사용할 경우, 복사하는 주체에 push()를 사용하지 않고도 자료와 복사하고자 하는 대상을 추가할 수 있다.
- 예시: 변경하고 싶은 속성만 넣기

const 구름 = { // '구름'이라는 변수에 객체를 할당한다.
  이름: '구름',
  나이: 6,
  종족: '강아지'
}

const 별 = {
   ...구름, // 복사하고자 하는 객체를 전개 연산자로 가져온다
  이름: '별', // 기존의 속성 덮어 쓰기
  나이: 1, // 기존의 속성 덮어 쓰기
  예방접종: true // 원하는 속성 추가하기
}

console.log(JSON.stringfy(구름)) // {"이름":"구름", "나이": 6, "종족": "강아지"}
console.log(JSON.stringfy(별)) // {"이름": "별", "나이": 1, "종족": "강아지", "예방접종": true}