[완벽 가이드] 5장. 문

Ninto·2023년 1월 9일
1

학습 기록

목록 보기
12/17

앞서 4장에서는 표현식을 자바스크립트의 구절이라고 설명하였다.
같은 비유로 이란 프로그램을 구성하는 최소 실행 단위를 말한다.

자바스크립트의 문장이나 명령어라고 할 수 있으며,
실행 단위라는 것은 런타임이 발생하는 문장을 의미한다.


📌 자바스크립트의 문

이번 장에서는 자바스크립트의 다양한 문에 대해 살펴보도록 하자.

목적
break가장 안쪽 루프나 switch, 또는 감싸고 있는 이름 붙은 문에서 빠져나옴
caseswitch 안의 문에 라벨을 붙임
class클래스를 선언함
const하나 이상의 상수를 선언하고 초기화함
continue가장 안쪽의 루프 또는 이름 붙은 루프의 다음 반복을 시작함
debugger디버거 중단점
defaultswitch의 기본 문에 붙이는 라벨
do/whilewhile 루프와 비슷한 루프
export다른 모듈에서 가져올 수 있는 값을 선언함
for사용하기 쉬운 루프
for/await비동기 이터레이터의 값을 비동기적으로 순회함
for/in객체의 프로퍼티 이름을 열거함
for/of배열 같은 이터러블 객체의 값을 열거함
function함수를 선언함
if/else조건에 따라 문을 실행함
import다른 모듈에서 정의한 값의 이름을 선언함
label문에 break와 continue에서 사용할 이름을 붙임
let하나 이상의 블록 스코프 변수를 선언하고 초기화함
return함수에서 값을 반환함
switchcase 또는 default: 라벨로 분기하는 다중 분기점
throw예외를 일으킴
try/catch/finally예외를 처리하고 코드를 정리함
"use strict"스크립트나 함수에 스트릭트 모드 제한을 적용함
var하나 이상의 변수를 선언하고 초기화함
while기본적인 루프
with스코프 체인을 확장함(스트릭트 모드에서는 금지)
yield순회할 값을 전달함(제너레이터 함수에서만 사용가능)


📌 조건문

if문과 switch문은 각각 언제 사용하는 것이 좋을까?

if문은 프로그램 실행 흐름에 분기점을 만들고, else if를 써서 분기점을 여럿 만들 수 있다. 하지만 모든 분기점이 같은 표현식의 값에 좌우된다면 else if가 최선의 선택은 아니다. else if와 else를 사용하게 되면 코드의 가독성이 떨어지면서 흐름이 복잡해지곤 하다. 그렇다고, 똑같은 표현식을 여러 if문이 반복해 평가하는 것 또한 낭비이다.

그렇다면 언제 if문을 사용하고, 언제 switch문을 사용하면 좋을까?

switch문은 주로 똑같은 상황에 대응가능 할 때 사용하는 것이 좋다.
일치하는 케이스를 찾을 때 === 일치 연산자를 사용하므로 반드시 타입 변환을 거치지 않고 일치해야 한다.

그것보다 조건이 더 포괄적이거나 다양한 경우엔 if문을 사용하는 것이 바람직하다.

//switch case문의 예시
switch (typeof value) {
	case 'number' : '숫자';
    break;
    case 'string' : '문자';
    break;
}

//if문의 예시
if(typeof 2 === 'number') {
	console.log('숫자');
} 
else {
	console.log('문자')
}

📌 점프문

🔗 break와 continue

break와 continue는 반복문에서 즉시 빠져나가거나, 특정 구간을 빠져나갈 수 있는 문이다.

break를 사용하면 자신을 포함하고 있는 가장 가까운 루프 또는 switch 문을 즉시 빠져나간다.

continue를 사용하면 break와 비슷하지만, 그 특정 구간만을 빠져나간 뒤 루프의 다음 반복을 이어간다.

//예시
for(let i = 0; i < 5; i++) {
	if(i % 2 !== 0) break;
   console.log(i);
}

for(let i = 0; i < 10; i++) {
   if(i % 2 === 0) continue;
   console.log(i); 
}

위 두 반복문을 실행하면 어떻게 출력이 될까 생각해보자.
break를 사용한 첫번째 반복문같은 경우엔 위에 있는 console.log(0)을 한번 실행한 뒤 반복문을 종료한다.

반면, continue를 사용한 두번째 반복문은 짝수만 제외하고 1부터 9까지의 홀수들만 출력된 뒤 반복문을 종료한다.

🔗 throw

//예시
throw new Errow('오류가 발생되었습니다.');
throw new RangeErrow('입력값이 잘못되었습니다.');

throw 키워드를 사용하면 예외상황을 강제적으로 발생시킬 수 있다.
자바스크립트에서 예외는 런타임 에러가 일어났을때, 그리고 프로그램에서 직접 throw문을 통해 일으켰을 때 발생한다.
예외는 try/catch/finally문에서 캐치가 가능하며, 프로그램이 특정한 조건에 맞지 않는 예외상황시에 throw 문을 사용하여 직접적인 제어가 가능하다.

🔗 try/catch/finally

try/catch/finally 문은 자바스크립트의 예외 처리 메커니즘이다.
try 절은 처리하려는 예외가 담긴 코드 블록이고,
만약 코드에서 예외가 일어난다면 catch 절이 호출된다.
finally절은 try블록과 관계없이 실행되는 일종의 정리 코드이다.
catch와 finally는 선택 사항이지만, try절 사용시 catch와 finally 둘중 하나는 무조건적으로 try절 뒤에 사용해야 한다.

try {
	예외판별할 문
}
catch (error) {
	예외발생시 실행할 문
}
finally {
	try/catch와 상관없이 실행할 문
}


📌 선언

const, let, var, function, class, import, export 키워드는 엄밀히 말해 문이 아니지만 문과 매우 비슷하며, 이 키워드들은 문이라기보다는 선언이라고 표현해야 정확하다.

🔗 const, let, var

var num1;
let num2;
const num3;

ES6이전 const와 let 키워드가 들어오기전 자바스크립트는 함수레벨스코프를 지원하는 var키워드 만으로 선언이 가능하였다.

const와 let 키워드가 생긴 이후 블록레벨스코프 지원이 가능해지고, var키워드가 가진 다양한 오류들을 보완할 수 있게 되었다.

🔗 함수 선언

//함수 선언 예시 - 두개의 전달인자의 합을 리턴하는 sum 함수
function sum (a, b) {
 return a + b;
}

function 이라는 키워드로 함수를 선언하는 함수 선언문은 함수를 정의할 때 사용한다. 함수 표현식과 함수 선언문은 차이점을 가지고 있으며, 함수 선언은 어떤 스코프에서 정의됐든 항상 그 맨 위에 있는 것처럼 처리하는 호이스팅 특징을 가지고 있다. 프로그램의 다른 곳에서 이 이름을 사용해 함수를 참조하고 그 코드를 실행 할 수 있다.

🔗 클래스

class User {

	constructor(name, age) {
		this.name = name;
    	this.age = age;
	}
    introduce() {
    	return console.log(`나는 ${this.name}이고, ${this.age}살 이다.`);
    }
}

ES6이후 class 선언으로 새 클래스를 생성하고 이름을 붙여 사용할 수 있게 되었다. 클래스 선언은 함수 선언과 다르게 끌어올려지지 않으며, 선언한 클래스는 선하기 전에는 사용할 수 없다.

🔗 import와 export

//constant.js 파일의 특정객체를 내보내기
export const 특정객체 {
	...
}

또는

export default const 특정객체 {
	...
}

//여러 객체를 묶어서 내보내기
exprort {특정객체1, 특정객체2}

//app.js 파일에서 constant.js 파일 받아오기
import 특정객체 from '파일경로/constant.js';

//여러 객체 한파일에서 받아오기
import {특정객체1, 특정객체2} from '파일경로/constant.js';

import와 export 선언은 다른 모듈에서 정의한 값을 사용할 수 있게 한다.
모듈은 자바스크립트 코드로 구성된 파일이며 독자적인 전역 네임스페이스를 갖고, 다른 모듈에 완전히 독립적이다.

export default는 내보내는 값이 단 하나일 뿐일때 일반적으로 사용한다.

profile
성장에는 성장통이 있기 마련이다.

0개의 댓글