문자열, 숫자, 형변환, 연산자

• 문자열(String 내장 객체)
  - 자바스크립트에서는 문자열을 나타내는 객체(String)이 존재하며
    문자열과 관련된 기본적인 함수를 제공함
  
  - 1) 문자열.indexOf("str")
     : 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환 / 없으면 -1 반환
  
  - 2) 문자열.substring(시작인덱스, 종료인덱스(미포함))
     : 문자열 일부 잘라내기 / 시작 이상 종료 미만
  
  - 3) 문자열.split("구분자")
     : 문자열을 "구분자"로 잘라내서 배열로 반환

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

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

    console.log(str1.indexOf("e")); // 1
    console.log(str1.indexOf("l")); // 2 (가장 먼저 검색된 인덱스 반환)
    console.log(str1.indexOf("f")); // -1 (일치하는 부분 없는 경우)
    
    
    // 2) 문자열.subString(시작인덱스, 종료인덱스(미포함)) : 문자열 일부 잘라내기
    // 시작 이상 종료 미만
    const str2 = "abcdefg";

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


    // 3) 문자열.split("구분자") : 문자열을 "구분자"로 잘라서 배열로 반환

    const str3 = "햄버거, 쫄면, 파스타, 돈까스, 피자, 치킨";

    const arr = str3.split(", ");

    console.log(arr);
})

   - 콘솔창에 출력된 3번 결과 

---

• 숫자(Math 내장 객체)
  - 숫자(number) 타입 리터럴 표기법
     : 123(정수), 3.14(실수), Infinity(무한), Nan(Not a Number)
  - Math : 숫자 관련 함수를 제공하는 JS 내장객체
    ex) Math.random( ) : 난수

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

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

    if(10/0 == Infinity){
        console.log("무한");
    }


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

    /* if("abc" * 100 == NaN){ -> (X) */
    // isNaN(값) : 값이 NaN이면 true, 아니면 false
    if(isNaN("abc" * 100 )){
        console.log("숫자가 아닙니다."); // 숫자가 아닙니다.
    }


    // 3) Math.random() : 0 이상 1 미만의 난수 발생 (0 <= random < 1)
    // ex) 버튼 내부에 발생한 난수 값을 입력
    this.innerText = Math.random();


    // 4) 소수점 관련 함수
    // round(), ceil(), floor(), trunc()
    // 반올림 ,  올림 ,   내림 ,  버림(절삭)
    // -> 소수점 자리 지정 불가
    console.log(Math.round(55.5)); // 56
    console.log(Math.ceil(55.2));  // 56

    console.log(Math.floor(-55.5)); // -56
    console.log(Math.trunc(-55.5)); // -55


    // ex) 버튼 배경색을 랜덤으로 바꾸기
    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 + ')';


    // 5) 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현
    console.log((2.564).toFixed(2)); // 2.56

    console.log((1.45).toFixed(1)); // 1.5
})

See the Pen 24-12-25 js review27 by Namu (@Namu-the-sans) on CodePen.

---

• 문자열 → 숫자열 형변환
  - parseInt(문자열) : 정수로만 변환 가능
  
  - parseFloat(문자열) : "정수" → 정수 / "실수" → 실수
  
  - Number(문자열) : "정수" → 정수 / "실수" → 실수

// 형변환 확인
document.getElementById('btn3').addEventListener('click', function(){
    console.log(parseInt("1.234"));   // 1
    console.log(parseFloat("1.234")); // 1.234
    console.log(Number("1.234"));     // 1.234
})

---

• 동등 / 동일 비교연산자
  - 동등 비교 연산자 ( ==, != )
     → 값이 같으면 true (자료형 관계 없음)
  
  - 동일 비교 연산자 ( ===, !==)
     → 값과 자료형이 모두 같아야 true

// 동등 / 동일 비교연산자
document.getElementById('btn4').addEventListener('click', function(){

    console.log(1 == '1');  // 동등 비교연산자(자료형 상관없이 값이 같으면 true) : true
    console.log(1 === '1'); // 동일 비교연산자(자료형과 값 모두 동일해야 true) : false

    console.log(1 == true);  // 동등 비교연산자(자료형 상관없이 값이 같으면 true) : true
    console.log(1 === true); // 동일 비교연산자(자료형과 값 모두 동일해야 true) : false
})