[JavaScript 12] 객체와 배열 고급

김헤일리·2022년 11월 24일
JavaScript항해99
0

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}
  • 객체는 전개 순서가 중요하다.
  • 전개한 부분에 객체가 펼쳐진다.
    • 뒤에다 객체를 전개할 경우, 앞에 나온 내용들을 덮어쓴다.

객체는 앞으로도 많이 볼 내용이니 책에는 굉장히 기본적인 내용만 담겨져 있었다.

그래도 기본 개념을 숙지하고 넘어가면 나중에 비슷한 내용이 나왔을 때 더 빠르게 파악할 수 있을테니까!

책에 나온 개념들을 놓치지 말고 적어둬야겠다.

출처: 혼자 공부하는 자바스크립트 (한빛미디어)

profile
김헤일리
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄
이전 포스트

[JavaScript 11] 객체의 속성과 메소드

다음 포스트

[JavaScript 13] 실행 컨텍스트

0개의 댓글