(3장) 타입, 값, 변수 - 5. 객체(Object)와 배열(Array) [자바스크립트 완벽 가이드 7판]

iberis2·2022년 12월 26일
0

3장 타입, 값, 변수

자바스크립트의 타입

1. 숫자(Number)
2. BigInt
3. 문자열(String)
4. Boolean
5. Null, Undefined
6. Symbol
7. 객체(Object)와 배열(Array)
    - Set 객체 : 값의 집합
    - Map 객체 : 키와 값의 연결
    - 형식화 배열 : 바이트 배열과 다른 이진 데이터를 연결
    - Date 타입 : 날짜 , 시간 표현
    - Error 타입
    - 함수
    - 클래스
     - RegExp 타입: 텍스트 패턴
    (문자열에서 정교한 매칭, 검색, 대체 동작을 할 수 있다)

5. 객체와 배열

(1) 가변적이다.

문자열, 숫자, 불린, undefined, null의 값은 불변이나,
객체와 배열은 가변적이다.

// 문자열
let greeting = "hi";
greeting.toUpperCase(); // HI (기존의 greeting 을 바꾼 것이 아닌, 새로운 문자열 값을 반환한 것)
console.log(greeting); // hi (기존의 greeting 값은 바뀌지 않았음)

// 객체
let greetingArray = { a: "hi", b: "hello" };
greetingArray.a = "Good-Morning"; // 프로퍼티 값을 바꿈
greetingArray.c = "Good-Afternoon"; // 새 프로퍼티를 추가
console.log(greetingArray); // { a: 'Good-Morning', b: 'hello', c: 'Good-Afternoon' }

//배열
let num = [1, 2, 3];
num[0] = 10; // 요소 값을 바꿈
num[3] = 40; // 새 요소 추가
console.log(num); // [10, 2, 3, 40]

(2) 값으로 비교하지 않는다.

문자열 비교 : 길이가 같고 각 인덱스의 문자가 같으면 같은 문자열

객체 비교 : 두 객체의 프로퍼티 값이 같아도 같은 객체가 아님

배열 비교 : 같은 요소가 같은 순서로 있어도 같은 배열이 아님

let str1 = "my_string",
  str2 = "my_string";
console.log(str1 === str2); // true

let a = { x: 1 },
  b = { x: 1 };
console.log(a === b); // false

let y = [],
  z = [];
console.log(y === z); //false

값이 같은 객체를 참조할 때만 같은 객체가 성립한다.

let empty = [];
let newEmpty = empty; // 이제 newEmpty도 같은 배열을 참조함
newEmpty[0] = "new";

console.log(empty[0]); // new (newEmpty에 추가한 요소를 empty에서도 확인할 수 있음)
console.log(empty === newEmpty); //true

따라서 변수에 객체를 할당해도 사본이 생기지 않는다.

(같은 객체가 되므로, 복수의 변수에 할당해도 1개의 변수에서만 수정해도 원본이 수정됨)

사본을 만들기 위해서는 객체의 프로퍼티나 배열 요소를 직접 복사햐애한다.

for문 또는 Array.from() 이용 가능

//for문
let array = ["a", "b", "c"];
let copyArray = [];
for (let i = 0; i < array.length; i++) {
  copyArray[i] = array[i];
}
//Array.from()
let reCopyArray = Array.from(copyArray);

copyArray[3] = "d";
reCopyArray[0] = "aa";

console.log(array); // [ 'a', 'b', 'c' ]
console.log(copyArray); // [ 'a', 'b', 'c', 'd' ]
console.log(reCopyArray); // [ 'aa', 'b', 'c' ]
profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글