[JavaScript] 데이터타입

 

• 타입(type) : 값(value)의 종류
  • 각 타입은 고유한 속성과 메서드를 가짐
  • typeof : 해당 값이 무슨 타입인지 문자열로 반환

    typeof 100; // 'number'
    typeof -100; // 'number'
    typeof 100.123; // 'number'
    typeof '123'; // 'string'
    typeof false; // 'boolean'

 

• 숫자(Number) 타입

  100 // 정수 표현
  -100 // 음수 표현
  100.12 // 실수 표현

  • 산술 연산자(arithmetic operator) : 아래 예시에서 사용한 수학기호를 자바스크립트에서는 산술 연산자라고 부름

  console.log(1 + 2); // 3 (더하기)
  console.log(1 - 2); // -1 (빼기)
  console.log(1 * 2); // 2 (곱하기)
  console.log(1 / 2); // 0.5 (나누기)
  console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

  • Math 내장 객체 : 복잡한 계산을 위함

  Math.floor(100.621); // 100 (괄호 안의 숫자를 내림하여 반환)
  Math.ceil(100.621);  // 101 (괄호 안의 숫자를 올림하여 반환)
  Math.round(100.621); // 101 (괄호 안의 숫자를 반올림하여 반환)
  Math.round(100.421); // 100 (괄호 안의 숫자를 반올림하여 반환)
  Math.abs(-100); // 100 (괄호 안의 숫자의 절대값을 반환)
  Math.abs(100); // 100 (괄호 안의 숫자의 절대값을 반환)
  Math.sqrt(4); // 2 (괄호 안의 숫자의 루트값을 반환)
  Math.sqrt(2); // 1.4142135623730951 (괄호 안의 숫자의 루트값을 반환)
  Math.pow(2, 5); // 32 (괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환)

• 문자(String) 타입
  • 따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸면 됨
  • 백틱으로 만든 문자열은 줄바꿈도 가능

    '사과'
    "JavaScript"
    "欢迎你"
    "😇"
    "최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
    `JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 
    웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
    프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
    스타일을 지원한다.`

  • 문자열 연결 연산자 : 문자열과 문자열을 붙일 때 (+ 사용)

    "안녕하세요" + "!!"; // 안녕하세요!!
    "감사합니다." + " " + "😍" // 감사합니다. 😍

  • length 속성 : 문자열의 길이를 확인할 수 있는 속성 (문자열 값에 .length)

    console.log('欢迎你'.length); // 3
    console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

  • 인덱스(Index) : 각 문자가 몇 번째에 위치하는지 확인할 수 있음 (첫 번째의 문자의 인덱스는 0, Zero-based numbering : 0부터 숫자를 셈)

    let str = 'hello world';
    console.log(str[0]); // 'h'
    console.log(str[7]); // 'o'

  • 문자열 주요 메서드

    'HELLO WORLD'.toLowerCase(); // 'hello world' (문자열을 소문자로 변경)
    'hello world'.toUpperCase(); // 'HELLO WORLD' (문자열을 대문자로 변경)
    'hello '.concat('world'); // 'hello world' (문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있음)
    'hello world'.slice(2,7); // 'llo w' (문자열의 일부를 자름), slice(시작 문자, 끝 문자 미포함 전 문자)
    
    /*
    indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인
    만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회
    포함되어 있지 않으면 -1 을 반환
    */
    '🍎🍓🍉🍇'.indexOf('🍎'); // 0
    '🍎🍓🍉🍇'.indexOf('🖥'); // -1
    '최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
    '최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1
    
    /*
    includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인
    대소문자 구분
    */
    '🍎🍓🍉🍇'.includes('🍎'); // true
    '🍎🍓🍉🍇'.includes('🖥'); // false
    '최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
    '최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

•  
• Boolean 타입
  • 사실 관계를 구분하기 위한 타입
  • 값은 true , false 둘 중 하나
    • falsy : Boolean 문맥에서 false 로 평가되는 값

      false
      0
      -0
      0n
      ""
      ''
      ``null
      undefined
      NaN

  • 비교연산자(comparison operator)
    • === , !== : 엄격한 동치 연산자 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false

      123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
      123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
      123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
      123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

    • > , < , >= , <= : 대소 관계 비교 연산자 두 피연산자의 값의 크기를 비교. 수학에서의 부등호 기호의 사용법과 유사. 참고 : ⇒ , =< 는 대소 관계 비교 연산자가 아니라 에러 발생

      100 > 200; // false ("100은 200보다 크다."는 거짓)
      200 > 100; // true ("200은 100보다 크다."는 참)
      100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
      200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

  • 논리연산자(logical operator)
    • || : 논리합(OR)
      • 두 값 중 하나만 true 여도 true 로 판단

        true || false; // true
        false || true; // true
        100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)

      • 두 값이 모두 false 면 false 로 판단

        false || false // false
        200 < 100 || 20 < 10; // false

    • && : 논리곱(AND)
      • 두 값이 모두 true 면 true 로 판단

        true && true // true
        200 > 100 && 20 > 10; // true

      • 두 값 중 하나만 false 여도 false 로 판단

        true && false // false
        false && true // false
        100 > 200 && 200 > 100; // false

    논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현
    • ! : 부정(NOT)
      • 오른쪽 피연산자와 반대의 사실을 반환

        !true // false
        !(100 > 200) // true

      • falsy, truthy의 반대 값을 반환

        !0 // true
        !'' // true
        !1 // false
        !'글자' // false