1021 TIL

기멜·2021년 10월 21일
0

자바스크립트 독학

목록 보기
39/44

"꿈은 도망가지 않는다. 도망가는 것은 언제나 나 자신이다"
참조: 모던 자바스크립트 입문

eval함수

eval함수는 문자열 단 하나만을 인수로 받아서 자바스크립트 코드로 해석합니다.
예를 살펴보겠습니다.

let x = 1;
eval("x++;");

이 코드는 다음 코드와 같습니다.

let x = 1;
x++;

다음처럼 문자열로 함수 선언문을 넘겨서 함수를 정의할 수도 있습니다.

let formula = "x*x";
eval("function f(x) {return "+formula+";}");

앞의 코드는 다음 코드와 같습니다.

function f(x) { return x*x };

하지만 eval 함수를 남용해서는 안 됩니다. 사용자가 악의적으로 입력한 문자열을 eval함수에 인수로 넘기면 악성 코드가 실행되어 보안 문제가 생길 수 있습니다.
따라서 다른 대안이 있다면 그쪽을 이용하는 편이 빠르고 안전합니다.

String 함수를 활용하는 방법

String 생성자 앞에 new 연산자를 붙이면 String 객체를 생성하는 함수로 사용할 수 있지만, new 연산자를 붙이지 않으면 일반적인 함수로 활용할 수 있습니다. 이때 String 함수의 반환값은 String객체가 아닌 문자열입니다.

이벤트 처리기

이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램을 말합니다.
이벤트 처리기란 이벤트가 발생했을 때 실행되는 함수를 말합니다.

타이머

setTimeout : 지정된 시간이 흐른 후에 함수를 실행하는 것.
setInterval : 일정한 시간 간격에 따라 함수를 반복 실행하는 것.

if / else 문

if / else 문은 '만약~ 이라면.., 그렇지 않으면...'이라는 식의 처리 흐름을 표현합니다. 즉, 조건의 만족 여부에 따라 처리할 작업을 선책합니다.
크게 두 가지로 나눌 수 있습니다.

(1) if (조건식) 문장
(2) if (조건식 문장 1 else { 문장2 }

둘 다 조건식이 true면 if문을 실행하고 false면 else문을 실행합니다.

if 문도 일종의 문장이므로 if문 안에 if문을 작성할 수 있습니다. 중첩 if문 이라고 합니다.

if (a > b) {
    if (a > c) {
        console.log("a가 가장 크다");
    }else {
        console.log("a는 b 이하");
    }
}

잘못 해석되는 상황을 피하려면 if / else문을 사용할 때 주의해야 합니다. 실행할 문장이 단 하나더라도 문장을 중괄호 { } 로 묶어서 블록 문장으로 만들기를 권합니다.

if (조건식 1) {
    문장 1
} else if (조건식 2) {
    문장 2
} else if (조건식 3) {
    문장 3
...
} else {
    문장 n
}

자주 사용하는 패턴입니다. if가 아니라면 else if 문들을 지나치고 그래도 아니라면 맨 마지막에 else문을 실행합니다.

switch 문

if / else 문을 표현식의 값에 따라 실행을 분기하고자 할 때 사용합니다. if / else문을 활용하면 분기점을 여러 개 만들 수 있지만 코드가 복잡해질 수 있습니다. 반면에 switch문을 사용하면 분기점 여러 개를 더욱 간결하게 표현할 수 있습니다.

switch (표현식) {
    case 표현식1 : 실행문1 (문장 여러 개)
    case 표현식2 : 실행문2 (문장 여러 개)
    ...
    case 표현식n : 실행문n (문장 여러 개)
    default : 실행문 n + 1 (문장 여러 개)
}

다음 예를 알아봅시다.

switch(n) {
    case 1:
        console.log("One");
        break;
    case 2:
        console.log("Two");
        break;
    case 3:
        console.log("Three");
        break;
    default:
        console.log("Other");
}

이 코드를 실행하면 n이 1일 때는 "One", 2일 때는 "Two", 3일 때는 "Three", 그 외에는 "Other"를 출력합니다.
break 문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작합니다. switch문의 case라벨은 분기의 시작을 명시할 뿐 분기의 끝을 명시하지는 않습니다. bresk문을 하나도 사용하지 않으면 case라벨로 분기한 다음에 그 라벨 뒤에 등장하는 전체 문장을 실행합니다. 따라서 case 라벨 다음에 이어지는 실행문의 마지막에는 일반적으로 break문을 넣습니다.
함수 끝에 switch문을 사용하면 break문 대신 return문을 사용해도 똑같은 다중 분기를 표현할 수 있습니다
default 라벨의 실행문은 switch문의 표현식이 평가된 값이 어떠한 case 라벨과도 일치하지 않았을 때 마지막으로 실행되는 문장입니다. default 라벨은 switch블록 어느 위치에 있어도 문법 오류가 발생하지 않는데 switch블록 중간에 있으면 프로그램을 이해하기가 어려워지므로 피하는 편이 좋습니다.

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글