38일차 - 조건문 심화, 불리언값의 활용, 반복(loop)문
조건문의 심화
어제는 조건문에 대해 간단히 알아보았다. 이 조건문에는 세 가지가 있는데 어제는 if문에 대해서만 보았다.
여기서 만약 if문이 충족되지 않으면 실행되어야 할 코드를 만들 수 있는데, 이럴 경우 else문을 사용한다. else문은 if문의 중괄호가 닫힌 줄에서 시작하여 소괄호에 별다른 값의 입력없이 중괄호 안에 코드를 넣으면 된다.
위 이미지는 else문과 else if문이 모두 나왔는데, 어제 다뤘던 예시에 코드를 더 넣고 if문에는 사용가능한 글자수가 0일 때로 수정하고, else if문에 기존의 조건을 넣은 것이다. 또, 어제는 10글자 이하가 되었을 때 입력창의 배경색이 바뀌는 정도까지 했었는데, 이렇게 하니 10글자 이상으로 돌아갈 때 원상복구되지 않았다.
해당 코드가 없었기 때문에 그랬던 것이다. 그래서 else문에 다시 10글자 이상이 되면 해당 배경색이 원래대로 돌아가도록 remove 메서드를 사용하여 해결했다. 이처럼 기존의 조건이 더 이상 충족하지 않을 때 else문이 실행되는 것이다.
그리고 여러가지 조건을 확인하고 싶거나 추가하고 싶을 땐 else if문을 사용한다. else if문은 if문의 닫는 중괄호 이후에 붙여서 사용하며, 새 조건을 소괄호 안에 넣고 중괄호에 조건문을 넣으면 된다.
위 예시에서는 10글자 이하일 때 else if문이 실행되도록 하고, 기존에 추가했던 사용가능 글자를 카운트해주는 숫자와 배경색을 포함시키고, 0글자가 됐을 때 카운트 숫자와 배경색이 빨간색으로 변하는 것을 제거하는 코드까지 넣어주었다. 0글자에서 다시 돌아올 경우가 있기 때문이다.
이렇게 세 가지 조건문을 모두 썼을 때 작동구조는 if문을 실행하기 전 참이면 if문을 실행하고 거짓이면 else if문으로 넘어간다. 이후에도 같은 과정으로 else if문이 참이면 실행하고 거짓이면 else문으로 넘어가게 되는 구조가 된다.
불리언값의 활용
불리언 값은 조건문 외에도 변수의 값이나 객체 내 속성값으로 사용이 가능하다. 또한, 빈 문자열이나 숫자 0을 변수에 저장하여 조건문에서 해당변수를 사용했을 때, 이때의 변수의 값은 불리언값이 되므로 false라는 결과가 나온다. 만약 문자열 0이나 false 자체를 값으로 저장한 것과 공백문자도 비어있지 않은 값이기에 true라는 결과가 나온다.
이처럼 참 같은 값들을 truthy, 거짓 같은 값은 falsy라고 한다.
위 이미지는 사용자가 웹사이트에 접속했을 때 로그인을 했냐고 묻는 입력창을 뜨게 하여 사용자가 '네'를 입력하면 불리언값인 true가 저장된 변수가 실행되어 콘솔에 보여지도록 하고, 아니면 false가 보여지도록 한 것이다. 이미지에서는 '네'를 입력하여 true가 나온 것을 확인할 수 있다.
💡 prompt 메서드: 사용자가 텍스트를 입력할 수 있도록 안내하는 메세지를 가지고 있는 대화 상자를 띄우는 메서드이다.
반복문(loop)에 대하여
자바스크립트에는 반복문으로 for문, for..of문, for..in문, while문이 있다.
for문을 사용하면 기본적으로 특정 코드의 실행 횟수를 정의할 수 있다. 사용시에는 해당 반복문 코드의 실행이 일부 변수에 따라 달라진다. 이 변수는 이 반복문에 대해 정의된 도우미 변수라 할 수 있는데, let i 식으로 반복의 i를 따와서 많이 사용한다. (만약 i가 있으면 j, 이후에 k, 그 다음으로 l 이렇게 사용한다.)
이 변수를 정의하고 세미콜론 이후에 반복 조건을 작성해준다. 그 다음으로 모든 반복문의 반복에서 i가 어떻게 변경되어야 하는지 정의해주면 된다.
위 이미지는 for문을 사용하여 i라는 도우미 변수를 정의하고 i가 10보다 작을 때까지 i를 1씩 늘리고 이 반복을 콘솔에 출력하도록 하여 결과를 보여주고 있다.
for..of문을 사용하면 배열의 모든 요소를 순환한 다음 모든 배열 요소로 작업을 수행할 수 있다. 따라서 for..of문은 배열작업에 사용되고, 이는 물론 for문도 사용할 수 있지만 for문은 배열없이도 작업할 수 있다.
for..of문의 사용시 소괄호에는 개별 배열 요소를 설명할 변수나 상수를 선언하고, of를 입력한 후 반복하고자 하는 배열을 가리키면 된다.
위 이미지는 반복문 전에 users라는 배열을 상수로 저장하고 for..of문을 사용하여 배열의 개별 요소에 접근한 것을 콘솔로 출력한 것이다.
이 for..of문은 과거에는 존재하지 않았던 반복문이라 과거에는 for문을 써서 for (let i; i < someArray.length; i++) 형식으로 사용하였는데, 이 방법은 지금도 사용이 가능하다. 그러나 더 길고 복잡하여 꼭 이렇게 사용할만한 강한 이유는 없다.
for..in문은 객체의 모든 속성을 반복할 수 있다. 사용시 for..of문과 비슷하지만 중간에 in을 입력하고, 이후에 반복하고자 하는 객체를 가리키면 된다.
위 이미지는 반복문 전에 userLoggedIn이라는 객체에 사용자의 이름, 나이, 회원가입여부를 불리언값으로 넣고, for..in문을 사용하여 콘솔로 출력하고 있다.
for.in문을 사용할 때에는 객체의 키-값 쌍에 각각 접근할 수 있다. 기본적으로 객체에 for..in문을 사용하면 키가 나오게 되며, 위 이미지처럼 값이 나오게 하려면 객체의 값을 찾을 수 있는 방법인 대괄호 사용으로 값에 접근할 수 있다.
위 이미지처럼 대괄호 안에 도우미변수명을 넣으면 된다.
while문은 미리 특정 횟수를 정의하지 않고, 객체나 배열을 통해 반복하지 않고 while문을 통해 조건을 정의하게 된다. 그래서 불리언 값으로 작업해서 반복문에서 특정 조건이 충족되는 한, 반복문의 코드가 계속 실행된다.
사용법은 while 이후 소괄호에 조건을 넣고 중괄호에 조건문을 넣으면 된다.
위 이미지는 false가 저장된 isFinished 변수를 만들고 이를 while문에서 사용했는데, 사용자가 종료하겠냐는 팝업창에 확인을 누르면 '종료되었습니다.'라는 문구가 출력되며 반복이 끝나게 되고, 취소를 누르면 반복이 계속 일어나게 되는 것을 보여주고 있다.
💡 confirm 메서드: 메세지를 포함하여 예/아니오 형식의 확인과 취소 버튼을 가진 대화상자를 띄우는 메서드이다.
그런데 while문을 사용할 때는 조건을 넣으면서 무한 루프가 발생하지 않도록 조심해야 한다. 무한 루프가 발생하면 끝없이 실행되는 반복문에 의해 브라우저가 멈추게 된다.
