자바스크립트 중첩 if문 - jabaseukeulibteu jungcheob ifmun

Question

인프런에서 렛츠기릿 자바스크립트가 무료 강의로 오픈되면서

자바스크립트 기초를 다시 다져야겠다는 생각으로 강의를 들었는데

기초부터 잘 알려주는 강의입니다.

평소 자바스크립트하더라도 헷갈렸던 부분들이 많이 생기기 마련인데

왜 이렇게 작동되는지에 대한 원리 또는 코드 작성 시, 스킬등 꿀팁들을 다양하게

알려주셔서 궁금증 해소가 많이 되는 강좌였고, 계속 진행예정입니다.

4강. if문 중첩 줄이기

const onClickNumber = ( event ) => {
	// 연산자가 비어 있지 않고, numTwo의 값이 없다면
     if (operator) { // 비어있지 않다
     	if(!numTwo) {
        	$result.value = '';
        }
         numTwo += evnet.target.textContent;
     } else { // 비어 있다
         numOne += evnet.target.textContent;
     }    
     $result.value += evnet.target.textContent;
 }

if문이 중첩이 많이 되어 있으면 코드 맥락을 확인하기가 어려워지며, 언제 실행되는 지 헷갈리는 부분도 많아진다.

처음부터 if문이 중첩이 되지 않고 코드를 작성하도록 하는 것이 좋은 방향입니다.

실제로 대부분의 if문은 순서도를 살짝 바꾸면 중첩을 피할 수 있습니다.

if중첩문 피하는 방법

1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.

3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

-> 3번을 실행하게 되면 else를 제거하게 됨으로 중첩 하나가 또 줄어드는 결과를 가져옴으로서

가독성이 더 좋아진다.

const onClickNumber = ( event ) => {
    if (!operator) { // 비어있다
    	numOne += evnet.target.textContent;
		$result.value += evnet.target.textContent;
        
        return; // 함수 중단
    }  
     
    if(!numTwo) { // 비어있지 않다
        $result.value = '';
    }
    numTwo += evnet.target.textContent;
    $result.value += evnet.target.textContent;
 }

순서

if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
else를 제거한다(이때 중첩 하나가 제거된다.)

예제

function test(){
  let result ='';
  if(a){
    if(!b){
      result = 'c';
    }
  }
  else{
    result = 'a';
  }
  result += 'b';
  return result;
}

↓ 변경 후

  let result = "";
  if (!a) {
    result = "a";
    result += "b";
    return result;
  }
  if (!b) {
    result = "c";
  }
  result += "b";
  return result;
}

출처 : 제로초 TV(자바스크립트 강좌)
https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

Published Nov 22, 2021

if 문 안에는 또 다른 if 문을 넣을 수 있습니다. 이러한 모양을 중첩 된 if 문이라고 합니다. 하나의 조건이 만족하고 또 다른 조건이 만족할 때 어떤 일을 진행해야 한다면 중첩 된 if 문을 사용할 수 있습니다.

이번에는 중첩 된 if 문을 사용해보겠습니다. 다음 내용을 입력한 뒤 실행해보세요.

<코드> IfNested.cs

// 중첩 된 if 문

using System;

class IfNested

{

static void Main()

{

string name = "C#";

int version = 10;

if (name == "C#") // 첫 번째 조건

{

if (version == 10) // 두 번째 조건

{

Console.WriteLine($"{name} {version}");

}

</코드>

<실행>

C# 10

</실행>

name과 version에 들어 있는 값이 if 문의 조건식에 맞으면 최종적으로 “C# 10” 문자열이 출력되는 예제입니다. 여러 개의 조건을 만족하고자 할 때에는 이처럼 여러 개의 if 문으로 묶어서 비교할 수 있는데 이를 중첩 된 if 문이라고 합니다.

<코드> IfNested.js

// 중첩 된 if 문

var name = "JavaScript";

var version = 2022;

if (name == "JavaScript") {

if (version == 2022) {

console.log(name + " " + version);

}

</코드>

<실행>

JavaScript 2022

</실행>

중첩 if문 예제 중첩 if문 리팩토링 다중 if문 줄이기 파이썬 중첩 if문 JavaScript 다중 if 엑셀 중첩 if문

자바스크립트 중첩 if문 - jabaseukeulibteu jungcheob ifmun

4강. if문 중첩 줄이기

순서

예제

관련 게시물

POE 중독 치명타 - POE jungdog chimyeongta

오라클 힌트 여러개 - olakeul hinteu yeoleogae

파이썬 코드 깔끔하게 - paisseon kodeu kkalkkeumhage

Python logging 중복 - Python logging jungbog

엑셀 해찾기 알고리즘 - egsel haechajgi algolijeum

결산 수정 분개 - gyeolsan sujeong bungae

OpenGL 언어 - OpenGL eon-eo

네이버 코딩테스트 준비 - neibeo kodingteseuteu junbi

Java 안드로이드 앱 만들기 - Java andeuloideu aeb mandeulgi

응용 미분 방정식 - eung-yong mibun bangjeongsig

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso

마비노기 밀 인형 - mabinogi mil inhyeong

을 보니 grammar - eul boni grammar

젤다 드래곤 안나옴 - jelda deulaegon annaom

전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi

파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi

독수리 오형제 결말 - dogsuli ohyeongje gyeolmal

타이어 공기압 보는 법 - taieo gong-giab boneun beob

정화조 20 인용 - jeonghwajo 20 in-yong

교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의