[JavaScript] 데이터 타입 종류? 일단 진행시켜!

hyeonbin·2023년 4월 24일

JavaScript data type 모던 자바스크립트 코어 자바스크립트

JS 계란반 스터디

목록 보기

1/12

📃 데이터 타입 (data type)

📍 데이터 타입 종류

📍 기본형 (Primitive type)

✔️ Number

숫자, 정수, 실수 구분 없이 하나의 숫자 타입만 존재

  const integer = 30;   // 정수
  const double = 30.12l // 실수
  const negative = -30; // 음의 정수

표기법만 다를 뿐 모두 같은 값

  const binary = 0b01000001; // 2진수
  const octal = 0o101;       // 8진수
  const hex = 0x41;          // 16진수

  // 자바스크립트는 위의 진수를 표현하기 위한 데이터 타입X, 전부 10진수로 해석
  console.log(binary); // 65
  console.log(octal);  // 65
  console.log(hex);    // 65
  console.log(binary === octal); // true
  console.log(octal === hex);    // true

숫자 타입은 모두 실수 처리

  console.log(3 === 3.0); // true
  console.log(4 / 2);     // 2
  console.log(3 / 2);     // 1.5

  // 추가적으로 3가지 특별한 값도 표현 가능
  console.log(10 / 0);       // Infinity (양의 무한대)
  console.log(10 / -0);      // -Infinity (음의 무한대)
  console.log(1 * 'String'); // NaN (산술 연산 불가)

자바스크립트는 대소문자 구별

  const x = nan; // ReferenceError: nan is not defined

✔️ String

문자열 타입은 텍스트 데이터를 나타냄 ( '' , "" , `` ) 사용
일반적인 자바스크릡트 표기법은 작은따옴표

  const String;
  String = '문자열'; // 작은따옴표
  String = "문자열"; // 큰따옴표
  String = `문자열`; // 백틱(ES6)
  String = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식'; // 반대도 동일

따옴표를 감싸지 않은 문자열은 식별자로 인식
스페이스와 공백 문자도 포함 X

  const String = hello; // ReferenceError: hello is not defined

ES6부터 템플릿 리터럴이라는 새로운 문자열 표기법 도입

  const temlate = `Template literal`;
  console.log(tempalte); // Template literal

템플릿 리터럴 - 멀티라인 문자열
일반 문자열 내에서는 줄바꿈(개행)이 허용 X

  const str = `Hello
  world.`; // SyntaxError: Invalid or unexpected token

줄바꿈, 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용

  // 입력
  const template = '<ul>\n\t<li><a href="#">HOME</a></li>\n</ul>';
  console.log(template);

  // 출력
  <ul>
    <li><a href="#">HOME</a></li>
  </ul>

템플릿 리터럴에서는 이스케이프 시퀀스 사용하지 않아도 줄바꿈, 공백 허용

  // 입력
  const template = `<ul>
      <li><a href="#">HOME</a></li>
  </ul>`;
  console.log(template);

  // 출력
  <ul>
    <li><a href="#">HOME</a></li>
  </ul>

템플릿 리터럴 - 표현식 삽입
문자열은 문자열 연산자 + 를 사용해 연결 가능
+ 연산자는 피연산 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
(그 외는 덧셈 연사자로 동작)

  // ES5: 문자열 연결
  const first = 'Ung-mo';
  const last = 'Lee';
  consolo.log('My name is' + first + ' ' + last + '.'); // My name is Ung-mo Lee.

표현식 삽입을 통해 간단히 문자열 삽입 가능 ${ }
문자열 연산자보다 가독성 좋고 간편하게 문자열 조합 가능

  // ES6: 표현식 삽입
  const first = 'Ung-mo';
  const last = 'Lee';
  console.log(`My name is ${first} ${last}.`); // My name is Ung-mo Lee.

표현식 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환

  console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

표현식 삽입은 반드시 템플릿 리터럴 내에서 사용
일반 문자열에서 표현식 삽입은 문자열로 취급

  console.log('1 + 2 = ${1 + 2}'); // 1 + 2 = ${1 + 2}

✔️ Boolean

논리적 참 (true) , 거짓 (flase)
조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용

  let foo = true;
  console.log(foo); // true

  foo = false;
  console.log(foo); // flase

✔️ null

null 타입의 값은 null이 유일 (대소문자 구별 주의! Null, NULL 등과 다름)
값이 없다는 것을 의도적으로 명시할 때 사용하는 값

  let foo = 'Lee';

  // 이전에 참조를 제거
  // 유용하지 않음, 변수의 스코프를 좁게 만들어 변수 자체를 재빨리 소멸시키는 편이 굿
  foo = null;

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환

  <!DOCTYPE html>
  <html>
  <body>
    <script>
      const element = document.querySelector('.myClass');

      // HTML 문서에 myClass 클래스를 갖는 요소가 없다면 null 반환
      console.log(element); // null
    </script>
  </body>
  </html>

✔️ undefined

undefined 타입의 값은 undefined가 유일
자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값
따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환

  let foo;
  console.log(foo); // undefined

✔️ Symbol

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값
다른 값과 중복되지 않는 유일무이한 값
심벌 이외의 원시 값은 리터럴을 통해 생성하지만, 심벌은 Symbol 함수를 호출해 생성

  // 심벌 값 생성
  const key = Symbol('key');
  console.log(typeof key); // symbol

  // 객체 생성
  const obj = {};

  // 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
  obj[key] = 'value';
  console.log(obj[key]); // value

✔️ bigint

ES2020에서 새로 추가
숫자의 최대치인 2^53 - 1를 넘어서 보다 큰 숫자를 표현
BigInt는 정수 리터럴의 뒤에 n을 붙이거나 (10n) 함수 BigInt( )를 호출해 생성
BigInt는 내장 Math 객체의 메서드와 함께 사용할 수 없고, 연산에서 Number와 혼합해 사용할 수 없음 ( 먼저 같은 자료형으로 변환해야 하지만, BigInt가 Number로 바뀌면 정확성을 잃을 수 있으니 주의 )

  const theBiggestInt = 9007199254740991n;
  console.log(theBiggestInt); // 9007199254740991n

  const alsoHuge = BigInt(9007199254740991);
  console.log(alsoHuge); // 9007199254740991n

  const hugeString = BigInt("9007199254740991");
  console.log(hugeString); // 9007199254740991n

  const hugeHex = BigInt("0x1fffffffffffff");
  console.log(hugeHex); // 9007199254740991n

  const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
  console.log(hugeBin); // 9007199254740991n

📍 참조형 (Reference type)

참조형은 원시형 데이터의 집합
참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장
→ 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당

✔️ 객체 (Object)

키 ( Key ) : 값 ( Value ) 형태로 구성된 프로퍼티 ( Property )들의 집합
자바스크립트의 원시타입을 제외한 나머지 값들 ( 함수, 배열, 정규표현식 등 )은 모두 객체
객체는 데이터 ( 프로퍼티 )와 그 데이터에 관련된 동작 ( 메소드 )을 모두 포함할 수 있어 하나의 단위로 구조화 가능
객체의 프로퍼티는 함수를 포함할 수 있고, 일반 함수와 구분하기 위해 메서드라 부름
프로퍼티 값에 접근할 때는 대괄호 표기법 ( obj [ 'key' ] ) 또는 마침표 표기법 ( obj.key )을 사용

  const person = {
    name: 'kim',
    age: 30,
    address: {
      city: 'seoul',
      zip: '12345'
    }
  };

  console.log(person.name); // kim
  console.log(person['age']); // 30
  console.log(person.address.city); // seoul

✔️ 배열 (Array)

배열은 순서가 있는 값들의 집합으로, 각 값은 0부터 시작하는 인덱스를 가짐
배열요소에 접근할 때는 대괄호 표기법만을 [ ] 사용, 혹은 생성자 함수 ( new Array ) 로 만들 수도 있음
존재하지 않는 요소에 접근하면 undefined로 반환

  // 배열 생성 (빈 배열)
  const arr = [];
  arr[0] = 'zero';
  arr[1] = 'one';
  arr[2] = 'two';
  arr[3] = 'three';

  console.log(arr[0]);    // zero
  console.log(arr.length) // 4
  console.log(typeof arr) // object

  // 배열 생성 (초기 값 할당)
  const arr = [
    'zero', 'one', 'two', 'three', 'four',
    'five', 'six', 'seven', 'eight', 'nine'
  ];

  console.log(arr[0]);    // zero
  console.log(arr.length) // 10
  console.log(typeof arr) // object

위의 배열을 객체 리터럴로 유사하게 표현
배열 리터럴은 객체 리터럴과 달리 프로퍼티명이 없고 각 요소의 값만이 존재

  const obj = {
    '0': 'zero',  '1': 'one',   '2': 'two',
    '3': 'three', '4': 'four',  '5': 'five',
    '6': 'six',   '7': 'seven', '8': 'eight',
    '9': 'nine'
  };

✔️ 두 객체의 근본적 차이

배열과 객체는 모두 객체지만, 배열은 순서가 있는 값의 집합이고, 객체는 이름이 지정된 값의 집합임
객체 리터럴 { } 로 생성한 객체의 프로토타입 객체는 Object.prototype
배열 리터럴 [ ] 로 생성한 배열의 프로토타입 객체는 Array.prototype
자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함 가능

  const misc = [
    'string',
    10,
    true,
    null,
    undefined,
    NaN,
    Infinity,
    ['nested array'],
    { object: true },
    function () {}
  ];

  console.log(misc.length); // 10

✔️ Function

보통 반복되는 코드를 재사용하기 위해 이용

  const aaa = [];
  console.log(typeof aaa); // 배열형 -> object 출력

  const bbb = {};
  console.log(typeof bbb); // 객체형 -> object 출력

  const ccc = function () {};
  console.log(typeof ccc); // 함수형 -> function 출력

✔️ 함수표현식

무명의 리터럴로 표현이 가능
변수나 자료 구조(객체, 배열…)에 저장 가능
함수의 파라미터로 전달 가능
반환값(return value)으로 사용 가능

함수표현식 - 익명 함수
함수표현식에서는 일반적으로 함수명 생략

  // 기명 함수 표현식(named function expression)
  const foo = function multiply(a, b) {
    return a * b;
  };

  // 익명 함수 표현식(anonymous function expression)
  const bar = function(a, b) {
    return a * b;
  };

  console.log(foo(10, 5)); // 50
  console.log(bar(10, 5)); // 50
  console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

함수는 일급객체이기 때문에 변수에 할당할 수 있는데,
이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장
따라서 함수를 호출할 땐 변수명( )을 호출 ( 일반적인 함수 호출은 함수명 호출 )

  const foo = function (a, b) {
    return a * b;
  };

  const bar = foo;

  console.log(foo(10, 10)); // 100
  console.log(bar(10, 10)); // 100

✔️ 일급 객체란?

=> 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 의미

모든 일급 객체는 변수나 데이터에 담을 수 있어야 함
→ 함수 표현식으로 자유롭게 대입이 가능

  const yolo = function() {
  console.log("yolo yolo");
  }

모든 일급 객체는 함수의 파라미터로 전달할 수 있어야 함
→ 콜백 함수 형태로 자유롭게 전달이 가능

  const yolo = function() {
      console.log("yolo yolo");
  }

  function print(func) {
      func();
  }

  print(yolo);

모든 일급 객체는 함수의 리턴값으로 사용할 수 있어야 함
→ 클로저(Closure) 기법을 통해 구성

  const yolo = function() {
      console.log("yolo yolo");
      return function() {
          console.log("yolo yolo yolo");
      }
  }

  const yolo2 = yolo();
  yolo2();

hyeonbin

할 수 있다고 믿는 사람은 결국 그렇게 된다 😄😊

다음 포스트

[JavaScript] 데이터 타입 종류? 일단 진행시켜!

JS 계란반 스터디

📃 데이터 타입 (data type)

📍 데이터 타입 종류

📍 기본형 (Primitive type)

✔️ Number

✔️ String

✔️ Boolean

✔️ null

✔️ undefined

✔️ Symbol

✔️ bigint

📍 참조형 (Reference type)

✔️ 객체 (Object)

✔️ 배열 (Array)

✔️ 두 객체의 근본적 차이

✔️ Function

✔️ 함수표현식

✔️ 일급 객체란?

[JavaScript] 내가 한번 Scope에 접근해 보지!

0개의 댓글