[JS] 원시타입 / 참조타입 (객체,배열비교)

2021. 11. 30. 09:08Javascript/개념

1. 원시타입 

원시 타입은 영어로 Primitive Type이라고 하며 다른 말로 기본 타입이라고도 한다.

원시 타입의 특징은 값이 변하지 않는다는 것이며, 모두 하나의 '값'을 담고 있다.

그 종류는 String/ Number/ Null/ Undefined/ Boolean/ Symbol 이 있다.

 

 

2. 참조타입 

참조타입은 Reference Type 이라고도 하며 값의 변화가 가능하다.

참조 타입은 변수에 할당할 때에는 값이 아닌 '주소'를 저장한다. 배열, 객체, 함수가 대표적이다.

변수는 주소를 저장하고, 주소는 특별한 동적인 데이터 보관함에 보관되는데 이 데이터 보관함을 heap(힙)이라고 한다.

값을 재할당 할 경우 주소를 참조한 모든값이 영향을 받는다. 즉 공유된다.

 

객체비교

  const obj1 = {
      a: 1,
      b: 2,
      c: 3
  };
  const obj2 = {
      a: 1,
      b: 2,
      c: 3
  };

  console.log(obj1 == obj2); // false
  console.log(obj1 === obj2); // false


  let trueCount = 0;

  // value값이 같으면 1증가
  for (const key in obj1) {
      if (obj1[key] === obj2[key]) {
          trueCount += 1;
      }
  }
  console.log(trueCount); // 3

  const keys = Object.keys(obj1);
  console.log(keys.length); // 3


  if (trueCount === keys.length) {
      console.log('obj1 obj2 같다');
  }

객체의 길이를 알고 싶을 때 Object.keys() 메소드를 활용하자!!!

[a, b, c] key만 뽑아낸 배열을 만들어내므로, 우리는 객체의 길이를 알 수 있다.

 

 

 

 

배열비교


  const arr1 = [1, 2, 3];
  const arr2 = [1, 2, 4];

  console.log(arr1 == arr2);  // false
  console.log(arr1 === arr2); // false

  const result = [];
  for (let i = 0; i < arr1.length; i++) {
      if (arr1[i] === arr2[i]) {
          result.push(true);
      }
  }
  console.log(result); // [ true, true ]

  let trueCount = 0;

  for (let i = 0; i < result.length; i++) {
      if (result[i]) {
          trueCount += 1;
      }
  }

  if (trueCount === arr1.length) {
    console.log('arr1 arr2 같다');
  } else {
    console.log('arr1 arr2 같지 않다'); // 같지않다가 나옴
  }

 

참고로 참조 타입은 두 값이 동일한 형태를 하고 있어도 동등 연산자나 일치 연산자가 성립되지 않습니다.

이는 두 변수가 참조하고 있는 객체가 다르기 때문입니다.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(arr1 == arr2);  // false
console.log(arr1 === arr2); // false

 

 

** 반대로 참조하고 있는 객체가 동일하다면 동등 및 일치 연산자가 성립

const arr3 = [1, 2, 3];
const arr4 = arr3

console.log(arr3 == arr4)   // true
console.log(arr3 === arr4)  // true

 

 

 

 

 

'Javascript > 개념' 카테고리의 다른 글

[JS] 이벤트 버블링 / 캡쳐링 / 위임  (0) 2021.11.30
[JS] 깊은복사 / 얕은복사  (0) 2021.11.30
[JS] 배열 메소드  (0) 2021.11.16
[JS] 문자열 메소드  (0) 2021.11.16
[JS] Null / Undefined  (0) 2021.11.15