자바스크립트의 데이터 타입 및 동등 비교

DONG EUN LEE·2023년 12월 10일
JavaScript모던리액트 deep dive

JavaScript

목록 보기
1/3
post-thumbnail

리액트의 가상 DOM 과 실제 DOM 의 비교, 리액트 컴포넌트가 렌더링을할지를 판단하는 방법, 변수나 함수의 메모제이션 등 모든 작업은 작업은 자바스크립트의 동등 비교를 기반으로 하게되는데 자바스크립트의 데이터 타입은 어떤것이 있고 동등비교란 무엇인지 정리해보자

자바스크립트의 데이터 타입

  • 원시타입(Primitive)
    JavaScript에서, 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터라고 정의를 한다.
    출처:Mdn web doc
    간단하게 자크립트에서의 원시타입이란 객체가 아닌 다른 모든 타입을 의미한다라고 생각을 하면 되겠다.

    1. boolean
      참(true)과 거짓(false)만을 가질 수 있는 데이터 타입
      주로 조건문에서 많이 쓰이는 데이터 타입이다.
      boolan형의 값 외에도 조건문에서 true,false 처럼 취급되는 trthy,falsy값이 존재한다.

      falsey 값정리

      조건문 내부에서 false 취급되는 값.

      값타입설명
      falseBooleanfalse는 대표적인 falsly 값이다
      0,-0,0n,0x0nNumber,BigInt0은 부호나 소수점 유무에 상관없이 falsy 한 값이다.
      NaNNumberNumber가 아니라는 것을 뜻하는 NaN(Not a Number)
      '',"",``String공백이 없는 빈 문자일때
      nullnull-
      undefinedundefined-

      trthy

      조건문 내부에서 true로 취급되는 값. falsy로 취급되는 값외에는 모두true로 취급
      객체와 배열은 내부에 값이 존재하는지 여부와 상관없이 trthy로 취급된다.

    2. null
      아직 값이 없거나 비어있는 값을 표현할때 사용
      null는 null라는 값만 가질수있다.
      null은 다른 원시값들이랑 다르게 typeof로 null을 확인 했을때 해당 타입이 object라는 결과가 반환된다.

      typeof null === 'object' // true 가 출력된다.

    3. undefined
      선언후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당된값
      undefined는 undefined라는 값만 가질수있다.

      let test;
type of test === 'undefiend' // true
function add_hello(hello){
	return hello
}
type of add_hello() === 'undefiend' // true

    4. number
      -(253 -1)$ 과 253-1 사이의 값을 저장 할 수 있다.

    5. string
      텍스트 타입의 데이터를 저장하기 위해 사용되며, 작은따옴표(') 큰따옴표(") 또는 백틱(`) 으로 감싸 표현한다.
      백틱으로 표현하는 문자열은 템플릿 리터널(template literal)이라고 하는데, 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있다.
      자바스크립트 string은 문자열이 원시타입이며, 변경이 불가능하다.(한번 문자열이 생성되면 그문자열을 변경할수 없음을 의미)

      //'\n안녕하세요.\n'
	const literaltext = `
	안녕하세요.
`;
// Uncaught SyntaxError: Invalid or unexpected token
	const text = "
  안녕하세요
  ";
	const text2 = "hello";
	console.log(text2[0]) // 'h'
	text2[0] = 't';
	console.log(text2) //hello가 출력

    6. symbol
      ES6에서 새롭게 추가된 7번째 타입으로, 중복되지 않는 어떠한 고유값을 나타내기 위해 만들어졌다.

      //Symbol() 함수를 사용해서 만들어진다.
const key = Symbol('key');
const key2 = Symbol('key');

key===key2 // false

//동일한 값을 사용하기 위해서는 for 함수를 사용한다
Symbol.for('test') === Symbol.for('test') // true

    7. bigint
      number가 다룰 수 있는 숫자 크기의 제한을 극복하기 위해 ES2020에서 새롭게 나온것으로,253-1 를넘어서 더 큰숫자를 저장할 수 있게 해준다.

      9007199254740992 === 9007199254740993 // 더이상 다룰 수 없는 크기이기 때문에 true로 출력
const bigInt1 = 9007199254740995n // 끝에 n을 붙이거나
const bigInt2 = BigInt(9007199254740995) // 끝에 BigInt함수를 사용

  • 객체타입(object/reference type)

    객체타입이란

    • 일반적으로 컴퓨터 과학에서 객체는 식별자로 참조할 수 있는 메모리 상의 값을 말한다.
    • 객체는 데이터와 그 데이터 관련한 동작을 모두 포함하는 개념적 존재

    javascript에서 객체타입

    원시타입 7가지 이외의 배열, 함수, 정규 표현식 등
    객체타입(object type)은 참조를 전달한다고 해서 참조타입(reference type)이라고도 불린다.

동등비교

객체 타입의 동등 비교는 언어에 따라 다르지만, 여러 언어에서는 주로 두 가지 개념으로 나눌 수 있습니다: 참조 동등성(Reference Equality)과 값 동등성(Value Equality) 이다

  • 참조 동등성

    • 참조 동등성은 객체가 동일한 메모리 위치를 참조하는지 여부에 기반한다.
    • 두 변수나 객체가 동일한 인스턴스를 가리키는 경우에 참이 된다.
    • 주로 언어에서는 이를 확인하기 위해 == 또는 === 연산자를 사용한다.
     const obj1 = { key: 'value' };
  const obj2 = { key: 'value' };

  const obj3 = obj1;

  console.log(obj1 === obj2);  // false (참조가 다름)
  console.log(obj1 === obj3);  // true (참조가 동일)

  • 값 동용성(Value Equality)

    • 값 동등성은 객체가 동일한 값 또는 내용을 가지는지 여부에 기반한다.
    • 두 객체의 내용이 동일하면 두 객체는 값 동등하다고 간주된다.
    • 객체의 내용을 비교하기 위해서는 객체의 속성을 하나씩 비교하거나, 언어에 따라 제공되는 특별한 메서드를 사용할 수 있다.
     const obj1 = { key: 'value' };
  const obj2 = { key: 'value' };
  console.log(Object.is(obj1, obj2));  // false (값 동등성 비교)
  console.log(JSON.stringify(obj1) === JSON.stringify(obj2));  // true (값 동등성 비교)

자료 참고
자바스크립트 원시타입과 객체 타입
모던 리액트 Deep Dive

profile
DONG EUN LEE

0개의 댓글