문자열, 숫자, 형변환

문자열(String 내장 객체)

자바스크립트에는 문자열 나타내는 객체(String)가 존재하며 문자열과 관련된 기본적인 함수를 제공해준다.

// 문자열 관련 함수
document.getElementById("btn1").addEventListener("click", function() {

    // 문자열.indexof("str") : 
    // 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환
    // 없으면 -1 반환

    const str1 = "Hello World";

    console.log( str1.indexOf("e") ); // 1
    console.log( str1.indexOf("l") ); // 2 (가장 먼저 검색된 인덱스 반환)
    console.log( str1.indexOf("가") ); // -1


    // 문자열.substring(시작인덱스, 종료인덱스) : 문자열 일부 잘라내기
    // - 시작인덱스 이상 종료인덱스 미만
    const str2 = "abcdefg";

    console.log( str2.substring(0, 3) ); // abc
    console.log( str2.substring(2, 6) ); // cdef


    // 문자열.split("구분자") : 문자열을 "구분자"로 잘라서 배열로 반환
    const str3 = "햄버거, 피자, 김밥, 파스타, 삼겹살";
    const arr = str3.split(", ");
    console.log(arr);
});

숫자(Math 내장 객체)

숫자(number) 타입 리터럴 표기법
12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)

Math : 숫자 관련 함수를 제공하는 JS 내장 객체
ex) Math.random() : 난수

// 숫자 관련 함수
document.getElementById("btn2").addEventListener("click", function() {

    // Infinity 리터럴 확인
    console.log( 5 / 0 );

    if(5/0 == Infinity) {
        console.log("무한입니다.");
    }

    // NaN 리터럴 확인
    console.log("aaa" * 100);

    // "aaa" * 100 == NaN (X)

    // isNaN(값) : 값이 NaN이면 true, 아니면 false

    if( isNaN("aaa"*100) ) {
        console.log("숫자가 아닙니다.")
    }

    // Math.random() : 0이상 1미만의 난수 발생 ( 0 <= random <= 1 )
    console.log(Math.random());

    // 소수점 관련 함수
    // round(), ceil(), floor(), trunc()
    // 반올림    올림     내림      버림

    // -> 소수점 자리 지정 불가

    console.log( Math.round(10.555) ); // 11
    console.log( Math.ceil(10.555) ); // 11
    console.log( Math.floor(10.555) ); // 10
    console.log( Math.trunc(10.555) ); // 10

    // 버튼 배경색 랜덤으로 바꾸기

    const r = Math.floor(Math.random() * 256) // 0~255
    const g = Math.floor(Math.random() * 256) // 0~255
    const b = Math.floor(Math.random() * 256) // 0~255

    this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"

    // 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현
    console.log( (3.55).toFixed(1) ); // 3.5
    console.log( (3.55).toFixed(2) ); // 3.55
    console.log( (3.55).toFixed(0) ); // 4
    
});

// -----------------------------------------------

// 형변환 확인
// parseInt() : 정수로 변환함 ("3.14") -> 3
console.log( parseInt("3.14") ); // number 3

// parseFloat() : "정수" -> 정수, "실수" -> 실수
console.log( parseFloat("3.14") ); // number 3.14