Lee Hyun Ji

🌠공부기록 보관소

  • 📜 전체 글 수 456개

    • 자료형

    • 변수의 종류를 뜻하며 원시 타입과 비 원시 타입으로 나뉨
    • 원시 타입 자료형
      • 숫자형
      • Biglnt형
      • 문자형
      • Boolean형
      • Null
      • Undefined
      • Symbol형
    • 비 원시 타입 자료형 → 객체형
      • 객체, 함수, 배열이 포함되어있는 자료형

    원시 타입

    • 원시 타입 자료형은 프로그램이 실행되는 도중에는 단 하나의 값만을 갖고있는 타입

      let number = 123;
number = "123"; // 원시 타입

let array = [1, "2", 3]; //비원시 타입
      • 위의 코드를 보면,
        • number 변수는 값이 123 이었다가 “123” 으로 변경되었지만 한 번에 하나의 값만 갖고 있음
        • array 변수는 1, “2”, 3 으로 한 번에 3개의 값을 가질 수 있음
      • 여기서, number 변수처럼 하나의 고정된 값을 갖는 변수들의 타입을 원시 타입 이라고 하고, array 변수처럼 한 번에 여러 개의 값을 갖고 있는 변수들의 타입을 비 원시 타입이라고 함

    숫자형

    • 숫자형(Number 타입)은 말그대로 정수, 소수 등의 모든 숫자를 나타냄
    • 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 / 의 사칙연산이 가능 
      let number = 25;
console.log(number + 5); //30
console.log(number - 5); //20
console.log(number * 5); //125
console.log(number / 5); //5
    • 자바스트립트의 숫자형에는 정수와 소수 뿐만 아니라 Infinity , NaN 과 같은 특수한 숫자 값들이 포함되어 있음 
      let number = 25;
number = 10.00123;
number = Infinity;
number = NaN;
      • Infinity : 무한대를 나타내는 값으로 하나의 변수에 할당하는 것도 가능하고, 어느 숫자든지 0으로 나누게 될 경우 반환되는 값 
        let number = 10;
console.log(number / 0); // Infinity
      • NaN : Not A Number. 즉, 숫자가 아니다라는 뜻으로, 부정확한 연산을 하게 될 경우 반환되는 값

    BigInt

    • BigInt는 자주 쓰이지 않고, 아직 몇몇의 브라우저에서는 지원하지 않음
    • BigInt 타입은 숫자형으로는 표현하지 못하는 범위인 (2^25 - 1) 보다 크거나 -(2^25 - 1) 보다 작은 정수를 나타내야 할 때 사용하는 자료형 
      let big1 = 9007199254740991n;
let big2 = BigInt("9007199254740991");
      • 길이에 상관없이 정수를 나타낼 수 있고, big1의 값과 같이 끝에 n을 붙이거나 big2의 값처럼 함수 BigInt() 호출에 생성 가능
    • 숫자형 타입과 동일하게 사칙 연산이 가능
      • BigInt형은 BigInt 형의 값으로만 연산이 가능하고, 일반 숫자형과는 연산할 수 없음!

    문자형

    • 자바스크립트 변수에 문자열(String 타입)을 할당하기 위해서는 문자열을 따옴표로 묶어야 함

    • 문자열 변수 선언

      let name1 = "hyunji"; //큰 따옴표
let name2 = "hyunji"; //작은 따옴표
let name3 = `hyunji`; // 역 따옴표(백틱)
      • 우리가 흔히 사용하는 따옴표는 "" 이지만, 따옴표는 3가지 종류가 있음
        • 큰따옴표 : ""
        • 작은따옴표 : ''
        • 역따옴표(백틱) : ````
      • 큰따옴표와 작은따옴표는 같은 기능을 하기 때문에 문자열을 할당하기 위에서는 둘 중 아무거나 사용해도 상관없음

      • 역따옴표는 문자열을 묶게 될 경우 문자열 안에 특정 변수에 저장된 값을 넣을 수 있음

        let name = "hyunji";
let intro = `제 이름은 ${name} 입니다.`;

console.log(intro); //제 이름은 hyunji 입니다.
        • name 변수에 담긴 “hyunji” 라는 값을 intro 변수에 넣기 위해서는, 역따옴표로 문자열을 묶은 후 ${} 안에 특정 값을 넣어주면 됨
          • 이러한 방식을 “템플릿 리터럴”이라고 부름

    Boolean형

    • Boolean형은 값이 true , false 로 이루어진 자료형

    • 보통 참인지 거짓인지 분별하는 값을 저장할 때 사용

      let isClicked = false; // 버튼이 클릭되었는지 안되었는지
let isOpen = true; // modal이 열렸는지 안열렸는지

      • if-else 조건문을 이용하여, 변수의 값이 참인지, 거짓인지에 따라 조건문으로 다른 코드를 실행해야할 때 자주 사용되는 자료형

        let isClicked = false; //버튼이 클릭되었는지 안되었는지

if (isClicked) {
  console.log("클릭O");
} else {
  console.log("클릭X");
}

    Null

    • null을 하나의 값으로만 활용하는 다른 언어들과는 다르게, 자바스크립트에서 null은 오직 null 값만 포함하는 자료형으로 쓰임
    • null 값은 존재하지 않거나, 알 수 없는 값을 나타낼 때 사용 
      let name = null; // name 변수는 비어있는 값
    • 그렇다면, name 변수에 값을 아무것도 할당 안할 경우는? 
      let name;
console.log(name); //null???

    Undefined

    • 변수에 아무런 값을 할당하지 않고, console.log()를 통해 그 변수의 값을 출력하기 되면 null 값이 아닌 undefined라는 값이 출력됨 
      let name;
console.log(name); //undefined
    • undefined도 null 값과 마찬가지로, undefined 값만을 포함하는 자료형
    • null 형과 다른 점은, undefined는 값이 존재하지 않거나 알 수 없는 값일 때가 아니라, 변수에 값이 할당되지 않은 상태일 때 자동으로 undefined라는 값이 할당됨


    형 변환

    • 형 변환에는 묵시적 형 변환과 명시적 형 변환이 있음

    묵시적 형 변환

    let num1 = "15";
let num2 = 5;

console.log(num1 / num2); // 3
    • num1의 자료형은 문자형이고, num2의 자료형은 숫자형
    • 나누기 연산을 하기 위해서는 num1과 num2 변수 모두 숫자형이어야만 가능하지만, 출력 결과를 보면 15/5의 결과인 3이 출력되는 것을 확인할 수 있음
      • 출력 값이 3이 나온 이유는, 자바스크립트 엔진이 나누기 연산을 실행하기 위해 문자열 “15”를 숫자 15로 적절하게 자동 변화해주었기 때문
    • 자료형을 알맞게 변환해주는 기능을 형 변환이라고 하며,
      • 우리가 의도해서가 아니라 자동으로 자료형을 변환해주는 것을 묵시적 형 변환이라고 부름

    명시적 형 변환

    let num1 = "15";
let num2 = 5;

console.log(num1 + num2); // 155
    • 이번엔 문자열 “15”가 숫자형으로 변환되지 않고, 숫자 5가 문자열로 변환되어 “155” 라는 문자열이 출력

    • 자바스크립트는 사칙연산 중 곱하기와 나누기, 빼기를 수행할 때는 문자열을 숫자로 형 변환을 하지만, 더하기 연산을 할 경우에는 숫자를 문자열로 변환

      • 이 때, 15+5라는 연산을 실행하고 싶다면 num1의 값을 직접 숫자형으로 변환하면 됨

        let num1 = "15";
let num2 = 5;

console.log(parseInt(num1) + num2); // 20

      • parseInt() 내장함수는 문자열을 받아 숫자로 반환해주는 역할을 함

    • 이렇게 직접 내장함수 등을 이용하여 값을 유지하며 자료형을 의도적으로 변환시키는 것을 명시적 형 변환이라고 부름



    📚 이 글은 인프런 - 웹 프론트엔드를 위한 자바스크립트 첫걸음을 수강하며 정리한 내용입니다.
    강의자: 효빈 (Hyobin)
    ※ 본 글은 개인 학습 목적으로 작성되었으며, 일부 내용은 강의 자료를 참고하였습니다.

    댓글남기기

    참고