[JavaScript] 제어구문과 예외처리와 Strict 모드

 

 

제어 구문

일반적으로 프로그램의 구조는 세가지로 분류할 수 있다.

1. 순차구조 : 기술된 순서대로 처리를 실시한다.
2. 선택구조 : 조건에 따라 처리를 분기한다.
3. 반복구조 : 특정의 처리를 반복 실행한다.

순차, 선택, 반복을 조합해서 프로그램을 조립해나가는 방식을 구조화 프로그래밍이라고 부른다. 자바스크립트도 구조화 프로그래밍에서 이용하는 제어 구문을 표준으로 제공하고 있다. 자바스크립트에서 분기 처리를 위한 명령으로 if 명령과 switch 명령을 제공한다.

 

 

분기 처리하기 - if 명령, switch 명령

자바스크립트에서 분기 처리를 위한 명령으로 if 명령과 switch 명령을 제공한다.

 

 

 if 명령 - 조건에 따라 분기 처리하기

if 명령은 주어진 조건식이 true/false 에 따라 지정한 명령을 실행한다.

if(조건식){
    조건식이 true 인 경우에 실행하는 명령
} else if(조건식2){
    조건식이 false 이고 조건식2가 true 인 경우에 실행하는 명령
} else {
    조건식과 조건식2가 전부 false 인 경우 실행하는 명령
}

 

예시)

var num = 1;

if(num == 1) {
    console.log("num = 1");
} else {
    console.log("num != 1");
}

// else 가 없는 경우
if(num < 1) {
    console.log("num < 1");
}

// else if 블록에 의한 다중 분기
if(num < 1) {
    console.log("num < 1");
} else if(num > 1){
    console.log("num > 1");
} else {
    console.log("num = 1");
}

// 중괄호 생략 가능
if(num < 1) 
    console.log("num < 1");

 

 

 switch 명령 - 식의 값에 따라 분기 처리하기

switch 구문은 다음과 같다.

switch(식) {
    case 값1:
        '식 = 값1'인 경우에 실행되는 명령
    case 값2:
        '식 = 값1'인 경우에 실행되는 명령
    ...
    default:
        식의 값이 모든 값에 조건상 일치하지 않을 경우에 실행되는 명령

}

 

예시)

var rank = 'B';
switch(rank) {
    case 'A':
        console.log('A');
        break;
    case 'B':
        console.log('B');
        break;
    case 'C':
        console.log('C');
        break;
    default:
        console.log('일치하는 것이 없습니다.');
        break;            
}

 

+ break 문 생략

if 명령과는 다른게 switch 명령은 조건에 일치하는 case 구문으로 처리를 이동할 뿐 그 구문을 종료한 후에도 자동적으로 switch 블록을 종료하지 않는다. break; 명령을 지정해야만 switch 구문을 빠져나갈 수 있다. 의도적으로 break 명령을 생략하고 사용하는 경우도 있다.

var rank = 'B';
switch(rank) {
    case 'A':
    case 'B':
    case 'C':
        console.log('합격');
        break;
    default:
        console.log('불합격');
        break;            
}

 

 

루프 제어하기 - while 명령, do/while 명령, for 명령

자바스크립트는 반복처리에 while, do/while, for, for/in 등 여러가지 명령을 제공한다.

 

 

 while 명령과 do/while 명령 - 조건식에 따라 루프 제어하기

while 명령과 do/while 명령의 구조는 다음과 같다. while 명령은 조건식을 먼저 판정하는데 비해 do/while 명령은 루프의 마지막에서 조건식을 판정한다. 따라서 do/while 명령은 조건식에 상관없이 반드시 한 번은 루프가 처리된다.

while(조건식) {
    조건식이 true 일 경우 실행되는 명령
}

do {
    조건식이 true 일 경우 실행되는 명령
} while(조건식);

 

while 예시)

var x = 5;
while(x > 0) {
    console.log(x);
    x--;
}

 

do/while 예시)

var x = 5;
do {
    console.log(x);
    x--;
} while(x > 0);

 

 

 for 명령 - 지정 횟수만큼 루프 처리하기

for 명령의 구조는 다음과 같다.

for( 초기화식; 루프 계속 조건식; 증감식 ) {
    루프 내에서 실행하는 명령
}

 

예시)

for(var x = 0; x < 10; x++) {
    console.log(x);
}

// 2씩 증가
for(var x = 0; x < 10; x += 2) {
    console.log(x);
}

// 배열에 접근할 경우
var data = ['A', 'B', 'C'];
for(var i = 0; i < data.length; i++){
    console.log(data[i]);
}

 

 

㉮ for/in 명령 - 연상 배열의 요소를 순서대로 처리하기

for(가변수 in 연상 배열) {
    루프 내에서 실행하는 명령
}

가변수는 연상 배열의 키를 일시적으로 보관하기 위한 변수이다. 가변수에 보관된 것이 요솟값 그 자체가 아니다.

 

객체의 경우 키값이 가변수에 저장된다. 

var data = {x:1, y:2, z:4};
for(var key in data){
    // ex ) x : 1
    console.log(`${key} : ${data[key]}`);
}

 

배열에서도 똑같이 인덱스 요소값을 가변수 값으로 가져올 수 있지만 배열에서는 for/in 명령을 사용하지 않는다. 이유는 다음 예시와 같이 배열의 확장된 기능까지 열거되어 버린다. 또한 for/in 명령에서는 처리의 순서를 보증하지 않는다.

var data = [1, 2, 3];

Array.prototype.hoge = function () {}

for(var x in data) {
    console.log(x);
}

/* 결과값 
0
1
2
hoge
*/

 

 

㉯  for/of 명령 - 배열 등 순서대로 처리하기

배열 등을 순서대로 열거하기 위한 수단으로 ES2015에서 추가된 for/of 명령이 있다. 배열뿐 아니라 반복자/생성자 등 열거 가능한 객체를열거할 수 있다.

for(가변수 of 열거 가능한 객체) {
    루프 내에서 실행하는 명령
}

 

예시)

var data = ['A', 'B', 'C'];

// for/of 사용할 경우
for(var value of data) {
    console.log(value);
}

// for 명령을 사용할 경우 
for(var i = 0; i < data.length; i++){
    console.log(data[i]);
}

 

예시) 배열의 확장된 기능을 추가할 경우에도 배열의 data 값이 올바르게 출력된다.

var data = ['A', 'B', 'C'];

Array.prototype.huge = function () {}

for(var value of data) {
    console.log(value);
}

 

 

 break / continue 명령 - 루프 도중 스킵/중단하기

 

㉮ break 명령

루프를 제어하는 for, while 등의 명령에서 미리 정해진 종료 조건을 만족하는 타이밍에 루프를 종료한다. 하지만 특정 조건을 만족하는 경우에 루프를 장제적으로 중단하고 싶은 경우도 있다. 이럴 때는 break 명령어를 사용한다. 일반적으로 if 문과 함께 사용한다.

var result = 0;

for(var i = 0; i<1000; i++) {
    result += i;
    if(result > 100) break;
}

console.log(result);    // 105

 

 

㉯ continue 명령

루프를 중단할 때는 break 명령을 사용한다면 현재의 루프만을 건너뛰고 다음 루프를 계속해서 실행하고 싶은 경우 continue 명령을 실행한다.

var result = 0;

for(var i = 0; i<100; i++) {
    if(i % 2 == 0) continue;
    result += i;
}

console.log(result);

 

 

㉰ 중첩된 구문 한 번에 빠져나오기(레이블 구문)

중첩된 루프 안에서 break 를 사용할 경우 디폴트로 가장 안쪽의 루프만을 탈출하거나 스킵한다. 아래의 예시는 x 와 y의 곱이 30을 넘으면 중첩된 루프를 전부 다 종료하는 것을 원했지만 result 가 30이 넘는 경우 루프를 탈출하는 것은 안쪽의 루프만이다.

for(var x = 1; x < 10; x++){
    for(var y = 1; y < 10; y++){
        var result = x * y;
        if(result > 30) break;
        console.log(`${x} x ${y} = ${result}`);
    }
}

 

원하는대로 result 값이 30이 넘으면 중첩된 루프를 전부 빠져나오게 하려면 빠져나오려고 하는 루프의 선두에 레이블을 지정한다. 레이블 명은 임의로 부여할 수 있다. 그 다음, 중첩된 루프 안에 "break 레이블명;" 과 같이 지정함으로 중첩된 루프를 빠져나올 수 있다.

// 레이블명 : haha
haha:
for(var x = 1; x < 10; x++){
    for(var y = 1; y < 10; y++){
        var result = x * y;
        if(result > 30) break haha;
        console.log(`${x} x ${y} = ${result}`);
    }
}

 

 

예외처리

프로그래밍을 하다보면 생각지 못한 여러 에러가 나올 수 있다. 모든 예외 상황을 미연에 방지할 수 있는 것도 있지만 '함수나 클래스가 의도치 않은 방법으로 사용되었다.' 등 외부의 요인에 의존하는 처리인 경우 예외 발생을 완전히 막을 수 없다. 이러한 경우 스크립트 전체가 오류로 정지해버리는 일이 없도록 하는 것이 예외 처리의 역할이다. 예외 처리는 try/catch/finally 명령으로 실현할 수 있다.

 

 

 try/catch/finally 명령

구조는 다음과 같다. finally 부분은 불필요시 생략해도 된다. 

try {
	// 예외가 발생할 위험이 있는 코드
} catch (예외정보를 취할 변수) {
    // 예외가 발생했을 시의 처리 명령
} finally {
    // 예외의 유무에 상관없이 최종적으로 실행되는 명령
}

 

 

예시)

var x = 1;
var y = 0;

try {
    var result = y / z;
} catch(e) {
    console.log(e.message);
} finally {
    console.log('처리가 완료되었습니다.');
}

 

 

 throw 명령 - 예외 발생시키기

예외를 일부러 발생시키려고 할 때는 throw 명령을 사용하면 된다. 사용법은 다음과 같다.

throw new Error('에러 메시지');

 

예시)

var x = 1;
var y = 0;

try {
    if(y == 0) { throw new Error('0으로 나누려고 시도함.'); }
    var result = x / y;
    console.log(result);
} catch(e) {
    console.log(e.message);
} finally {
    console.log('처리가 완료되었습니다.');
}

 

 

자바스크립트의 위험한 구문 금지하기

자바스크립트는 사양으로는 존재하지만 현재는 안전성과 효율성 면에서 사용하지 말아야 할 구문이 존재한다. 이전에는 이러한 구문의 함정을 개발자가 배워서 함정을 피하도록 코딩해야 했다. 이것은 개발자의 수준에 따라 좋지 않은 코드가 들어오는 것을 완적히 막을 수 없고 개발자에 불필요한 부담을 주는 것으로 자바스크립트의 함정을 발견하여 오류로 통지해주는 구조가 도입되었다. 그것이 바로 Strict 모드이다.

 

Strict 모드를 사용하면 다음과 같은 내용들이 제한된다.

•  var 명령 생략 금지
• 나중에 추가 예정인 키워드를 예약어로 ㅜ가
• 인수/프로퍼티명의 중복 금지
• undefined/null 로의 대입 금지
• with 명령의 이용 금지
• eval 명령으로 선언된 변수를 주위의 스코프로 확산하지 않기
• arguments.callee 프로퍼티로의 액세스 금지
• 함수 안의 this는 글로벌 객체를 참조하지 않는다
• "0~"의 8진수 표기법은 금지

Strict 모드를 사용하는 방법은 스크립트 상단에 'use strict'; 를 추가하면 된다.

'use strict';

 

유효 범위 내에서만 Strict 모드를 사용하고 싶다면 다음과 같이 표기하면 된다. 일반적으로는 유효범위를 한정하는 것이 좋다.

function hoge(){
    'use strict';
}