JS기초 문법 복습 ( 객체, 배열1 )

이대영·2024년 8월 22일

객체

  • key - value pair

  • 하나의 변수에 여러개의 값을 넣을 수 있다!

객체 생성 방법

let person01 = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

접근하는 방법

console.log(person01.name); // 홍길동
console.log(person01.age); // 30
console.log(person01.gender); // 남자

객체 메소드( Object.~~~ )

assign ( 객체를 복사 )

  • 복사 할 객체

const assignPerson = {
  name: "김진수",
  age: 26,
  gender: "남자",
};
  • 복사한 값을 넣을 객체

let newPerson = {}; // 초기 값 빈 객체
  • 계산

Object.assign(newPerson, assignPerson); // 어디에다가(target), 무엇을?(source) 복사할건지
newPerson에 저장, person 객체를 // 현재 newPerson은 빈 객체인 상태
console.log(newPerson); // { name: '김진수', age: 26, gender: '남자' }

중괄호 추가 후 추가 내용 혹은 수정도 가능

Object.assign(newPerson, assignPerson, { age: 91 }); // age값을 변경해서 복사
console.log(newPerson); // { name: '김진수', age: 91, gender: '남자' }

객체 비교

let personCompare01 = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

let personCompare02 = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

서로 같은 값이 같은 두 객체 비교

console.log(personCompare01 === personCompare02); // false

겉보기에 값이 같은데 false가 출력 된 이유

객체와 배열은 다른 데이터 타입에 비해 크기가 상당히 크다, 메모리에 저장 할 때, 별도의 공간에 대한 주소에 저장하는데 값으로 비교가 아닌 주소로 비교하기에 다르다

그렇다면 어떻게 비교해야 같다고 출력할 수 있을까

console.log(JSON.stringify);
  • string : 문자열

  • stringify : 문자열화 시킨다

문자열은 위 객체와 배열의 특이한 저장방식이 아니기에 personCompare 객체를 문자열화 시킨다

문자열화 후 두 객체 비교

console.log(
  JSON.stringify(personCompare01) === JSON.stringify(personCompare02)
); // true
  • 문자열화 시킨 personCompare01과 personCompare02는 같은가?

  • false

객체 병합

const personMerge01 = {
  name: "홍길동",
  age: 30,
};

const personMerge02 = {
  gender: "남자",
};

* spread operator 사용
const mergedPerson = { ...personMerge01, ...personMerge02 };
console.log(mergedPerson); // { name: '홍길동', age: 30, gender: '남자' }

배열

  • key-value 페어의 객체와는 달리 요소들을 나열하기에 인덱스를 가지고 있다

  • 순서를 따질때 항상 시작은 0번째

splice

let fruits = ["사과", "바나나", "키위"];

fruits.splice(0, 2, "포도");
시작위치 0, 삭제개수 2, 대체 "포도" => 삭제하고 대체하기
console.log(fruits); // ["포도", "키위"]

slice

let fruits = ["사과", "바나나", "키위", "포도", "복숭아"];

let slicedFruits = fruits.slice(1, 3);
배열의  1번째 요소부터  3번째 요소까지 새로운 배열로 만든다.
console.log(slicedFruits); // [ '바나나', '키위' ]

0개의 댓글