[REAL Deep Dive into JS] 8-2. 제어문

young_pallete·2022년 8월 27일

REAL JavaScript Deep Dive

목록 보기

9/46

🌈 시작하며

후! 드디어 제어문이군요.
사실 이 파트, 중요성에 비해 생각보다 내용이 그렇게 어렵지는 않아요.
그렇지만, 코드 블록 안의 흐름을 제어한다는 측면에서 스코프를 알아야 했기에, 이전 글에서는 스코프에 집중하여 글을 썼죠.

어찌 보면, 미리 공부한 것에 대한 보람이라고 할까요? 🥰
자, 편안히 시작해보죠!

🚦 본론

블록문

우리, 스코프의 종류 중에 블록도 있다는 것을 살펴봤죠?
블록을 통해 우리는 코드의 영역을 구분할 수 있고, 별도로 처리할 수 있어요.
못 보신 분들을 위해, 이에 대한 예시는 다음과 같습니다.

// 아래는 매우 신기하게도 동작해요! 왜냐하면, 코드를 평가할 때 스코프를 블록으로 인식하기 때문입니다.
{
	const a = 1;
  	console.log(a); // 1
}
{
    const a = 2;
	console.log(a); // 2;
}

이런 블록을 통해 자바스크립트는 각 코드를 독립적인 렉시컬 환경을 만들어내기 때문에, 전역 네임스페이스에 무리가 가지 않도록 작성할 수 있는 거에요.

이런 블록을 어디서 사용할까요? 안정적인 애플리케이션을 만들기 위해 사용하겠죠!
대표적인 게 조건문, 반복문, 함수에서 많이 사용한답니다! 😉
(다만 함수에서의 스코프는 var의 영역을 구분짓는다는 측면에서 함수 레벨 스코프로 엄격히 구분하기도 한답니다)

const a = [1,2,3]
// 블록문
if (a.length) {
	...
}
// 반복문
for (let i = 0; i < a.length; i += 1) {
	...
}
// 함수
function sumArray(a) {
	return a.reduce((acc, cur) => acc + cur, 0)
}

위의 모든 문들이, 블록을 통해 독립적으로 매개변수를 사용하며 사용할 수 있게 되었죠?
따라서, 블록 덕분에 우리는 변수명 걱정 없이 살 수 있게 된 거에요! 😆

이때, 문은 일반적으로 "내가 끝이다!"라는 의미를 이미 내포하고 있어요. 따라서 세미콜론(;)을 붙이지 않는 것이 관례입니다.

조건문

음, 대표적인 조건문으로는 if문과 switch문이 있죠.
대개는 if문을 많이 쓰는 편입니다. case 문법을 쓰기엔 대개 더 낯설고, 추가적인 코드들을 생산해야 하기 때문이죠. (ex: default)

다만, switch문법이 주는 if문과 다른 가독성 때문에 정~말 가끔 switch문을 보게 되는 것 같아요. 거의 97:3의 수준입니다!

if문

정말 간단해요.

if: 조건을 만족하는 블록
else if: 이전 조건문을 만족하지 않는 나머지 문들 중 다른 조건에 해당하는 경우에 접근 가능한 블록
else: 모든 케이스를 만족하지 않는 경우 접근 가능한 블록

이때, if문을 너무 많이 중첩하는 것 역시 가독성을 떨어뜨리는 경우가 많아서, 의미 없는 조건문 중첩은 지양해야 하는 것! 기억해주세요 😉

if(a) {
	...
} else if(b) {
	...
} else {
  c
}

switch문

switch 문에서 자주 언급되지 않는 내용이 있는데요.
case문도 블록을 만들어서 쓰는 게 좋아요. 이유는 indent로 switch를 정리한다고는 하지만, 이를 가끔가다 에러를 내뱉는 케이스도 존재하기 때문이에요.

따라서 저는, 대개 다음과 같이 스코프를 넣어주어 처리한답니다 😉

switch (expression) {
  case a: {
  	...
    break;
  }
  case b: {
  	...
    break;
  }
  default: {
  	...
  }
}

어때요, 괜찮으신가요 ?
조건문은 크게 어려운 게 없어요. "조건에 해당하는 특정 표현식이 truthy하다면 다음 블록 안의 로직을 처리해라!"라는 의미로만 기억하면 좋을 거 같아요.

반복문

반복문에서 가장 대표적인 건 for문이에요. while문도 어쩌다 한 번 쓰기는 합니다. (아무래도 예측지 못한 무한루프는 만인의 고민이니까요)
실제로 do...while문은 잘 쓰지 않아서 패스할게요. (실무에서 한 번도 보지 못했습니다 😭)

이유는 while문으로 충~분히 대체 가능한 문법이기도 하고, do...while문은 실행 -> 평가한다는 괴랄(?!)한 로직으로 인해, 착각하기 쉬워 유지보수를 어렵게 한다고 생각하기 때문입니다.

따라서 이를 빼고, for과 while문을 살펴볼게요.

`for`

괄호 안에는 변수 선언 및 할당문; 조건식; 증감식의 순서로 전개된다는 점, 참고해주세요.
그래서 가끔 저 증감식 및 조건식을 굉장히 어렵게 작성하는 경우가 있는데, 이 역시 표현식이 들어간다고 생각하면서 이해해주시면 될 거 같아요.

for (let i = 0; i < 10; i += 1){
	...
}

`while`

while문은 for문보다 단점들이 몇 개가 있어요.
대표적인 이유로, 조건식을 위한 변수를 독립적으로 환경을 구분짓지 않아서, 네임스페이스 오염을 일으킬 수 있다는 것이에요.

하지만 분명 코드를 살펴볼 때 while문으로 처리할 때의 이점도 있는 편이라, 안정적인 코드를 작성할 수 있다면 매력적인 조건문이 되겠군요!

while문은 조건식이 항상 참일 때까지 계속해서 반복하여 실행합니다.


let flag = false;
while (!flag) {
	...
}

break

반복문을 언젠간 멈추고 싶을 때가 있을 거에요!
그럴 때 사용하는 문입니다.

여기서 특이한 게 있어요. 만약 스코프가 중첩되면 어떻게 할까요?
이런 케이스에서 break를 제대로 걸어주기 위해, 우리는 스코프에도 이름을 달아줄 수 있습니다! 한 번 살펴볼까요?

let a = 0;
level1: {
    let a = 5;
    level2: for (a; a < 10; a++) {
        if (a === 5) break level2;
    }
    
    console.log(a) // 5
}
console.log(a) // 0

let a = 0;
level1: {
    let a = 5;
    level2: for (a; a < 10; a++) {
        if (a === 5) break level1;
    }
    
    console.log(a) // 이미 반복문을 처리할 때 `level1`스코프까지 탈출해버리므로 실행 X
}
console.log(a) // 0

이렇게, 각 블록에도 이름을 달아줄 수 있다는 점! 기억해주세요~

continue

이 친구는 탈출의 개념이 아니라, skip의 개념이에요!
완전히 반복문을 탈출하지는 않을 건데, 지금 거는 생략할게~의 의미가 있는 문입니다.

따라서 다음을 살펴보면 될 거 같아아요!

for (let i = 0; i < 5; i += 1) {
  if (i % 2) continue;
  console.log(i) // 0 2 4
}

다만 이러한 continue도 일반적인 반복문의 흐름을 강제로 제어한다는 측면에서, 때로는 좋지 않은 코드를 만들 가능성이 높아요.

이유는, 반복문이 정말 커지는 경우에는, 하나하나 디버깅하기 쉽지 않은데, continue로 인해 이 의미를 예측하기 어렵기 때문입니다.

따라서 가능하다면 실제로는 continue문보다는 조건문을 사용하기를 권장하는 편입니다! ~~하지만 우리의 코테는 그렇지 않지~~

for (let i = 0; i < 5; i += 1) {
  if (i % 2 === 0) console.log(i) // 0 2 4
}

✨ 마치며

제어문은 크게 어려운 게 없어요.
오히려 가장 실무적인 측면이 강한 파트라, 직접 해보시는 것이 나을 거에요.
이때, 저는 개인적으로 알고리즘 문제를 통해 제어문을 익히시는 걸 추천드려요.
예제도 충분히 있을 뿐더러, 동시에 자신의 컴퓨팅 사고도 기를 수 있기 때문이죠!