본문 바로가기
Front-End/JavaScript

JavaScript(2)

by newny 2023. 2. 9.
반응형

1. 타입변환

let num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"
let num;      // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없습니다. 재선언문은 무시됩니다.

자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있음

 

✅자동 타입 변환

10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5";    // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1 - "문자열"; // NaN

→NaN은 Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미

 

✅강제 타입 변환

강제 타입 변환에 사용되는 함수 (자바스크립트가 제공하는 static함수)

  1. Number()
  2. String()
  3. Boolean()
  4. Object()
  5. parseInt()
  6. parseFloat()

 

숫자를 문자열로 변환

  • String() 함수 사용
document.write(String(123)+String(456));    //"123456"
  • null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드를 사용
document.write((123).toString()+(456).toString());

 

boolean값을 문자열로 변환

String() 함수, toString() 메소드 사용

String(true);     // 문자열 "true"
false.toString(); // 문자열 "false"

문자열을 숫자로 변환

Number() 함수, parseInt() 함수, paresFloat() 함수 사용 (세 함수 다 static 함수)

document.write(Number("10"));
document.write(parseInt("10.23"));
document.write(parseFloat("10"));

 

boolean값을 숫자로 변환

Number() 함수 사용

Number(true);  // 숫자 1
Number(false); // 숫자 0

 

 

문자열 식 값을 반환 eval()

document.write("10+20");                 // "10+20"
document.write(eval("10+20"));           // 30
let x=10;
let y=20;
let text = "x * y";
document.write(text);                    //"x * y"
document.write("<br>");
document.write(eval(text));              //200
document.write("<hr>");

 

숫자가 아닌 값 찾기 isNaN()

문자형의 숫자도 숫자로 인식함

document.write(isNaN(123));                 //false
document.write(isNaN(-1.23));               //false
document.write(isNaN("123"));               //false
document.write(isNaN("KOREA"));             //true
document.write(isNaN(3.4));                 //false

 

2. 제어문

프로그램의 흐름을 제어

 

✅조건문

if / else 문

let x = 10, y = 20;

if (x == y) {
    document.write("x와 y는 같습니다.");
} else {
    if (x < y)
        document.write("x가 y보다 작습니다.");
    else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
        document.write("x가 y보다 큽니다.");
}

 

else if문

let x = 10, y = 20;

if (x == y) {
    document.write("x와 y는 같습니다.");
} else if (x < y) {
    document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
    document.write("x가 y보다 큽니다.");
}

 

삼항 연산자에 의한 조건문

let x = 3, y = 5;
let result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");

 

switch 문

case 절, default 절 마다 break이 있을 때

let x = 10;

switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.");
        break;

    case "string":
        document.write("변수 x의 타입은 문자열입니다.");
        break;

    case "object":
        document.write("변수 x의 타입은 객체입니다.");
        break;

    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}

 

case 절, default 절 마다 break이 없을 때

break 키워드가 없으므로, 두 번째 case 절 이후에 나오는 모든 실행문이 모두 실행

⭐default는 선택, 꼭 마지막에 오지 않아도 됨⭐

let x = "문자열";

switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.<br>");

    case "string":
        document.write("변수 x의 타입은 문자열입니다.<br>");

    case "object":
        document.write("변수 x의 타입은 객체입니다.<br>");

    default:
        document.write("변수 x의 타입을 잘 모르겠네요...<br>");

}

 

여러 개의 case 절을 사용하여 여러 개의 조건을 한 번에 표현할 수도 있음

let day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)

switch (day) {
    case 1: // 월요일인 경우
    case 2: // 화요일인 경우
    case 3: // 수요일인 경우
    case 4: // 목요일인 경우
    default: // 0부터 6까지의 값이 아닌 경우
        document.write("아직도 주말은 멀었네요... 힘내자구요!!");
        break;

    case 5: // 금요일인 경우
        document.write("오늘은 불금이네요!!");
        break;

    case 6: // 토요일인 경우
    case 0: // 일요일인 경우
        document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");
        break;
}
반응형

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 예제 (2)  (0) 2023.02.09
자바스크립트 예제 (1)  (0) 2023.02.08
JavaScript(1)  (0) 2023.02.08

댓글