신기한 연구소

안녕하세요. 신기한 연구소입니다.

for문에 이어 또 다른 반복문 while문에 대해 알아볼게요.

while문은 for문과 달리 정말 심플하게 생겼습니다.

달랑 조건만 있네요.

조건이 참이면 while문의 블록문을 계속 실행하게 됩니다.

반대로 거짓이라면 while문 안의 구문 실행을 멈추고 블록문을 벗어나고

다음 구문을 실행하게 됩니다.

{} 블록문이 필수는 아니지만 2줄 이상의 구문을 사용하거나

또는 한 줄이라도 가독성을 높이기 위해 { }를 사용합니다.

무슨 의미일까요?

while문 뒤 (조건) 이 부분이 중요한데요.

조건을 평가하면 true나 false 또는 그 값을 대신할 수 있는 조건이 오면 된다는 의미입니다.

예를 들어 살펴볼게요.

먼저 평가값이 true나 false라고 했으니 직접 그 값을 넣어볼 수 있겠네요.

아래처럼요.

while(true)

이 구문의 의미는 그냥 계속 반복해라~입니다. 무한루프라고 한답니다.

while(false)

이 구문은 아예 반복을 안 하겠네요.

while(a < 3)

변수 a값이 3보다 작은 상태면 true가 되어 계속 반복하고 

3과 같거나 크면 while문을 종료하게 된답니다.

이 경우는 && 연산사를 사용했습니다.

둘 다 true인 경우만 실행이 됩니다.

console.log는 3까지는 증가하고 로그를 보여주기 때문에

결과는 a=>3 b=>3까지 출력하고 a < 3에서 false가 돼서 while문을 빠져나옵니다.

예상대로 || 연산자로 변경해서 테스트해봅니다.

결과는 a=>4 b=>4까지 출력하고 a < 4 와 b < 4에서 

둘 다 false가 돼서 while문을 빠져나옵니다.

|| 연산자는 첫 비교문이 true면 뒤 비교문을 실행하지 않고

첫 비교문에 false이면 뒤 비교문을 실행합니다.

이때 ||연산자는 둘 다 true이거나 둘 중 하나만 true면 

평가는 true가 된다는 특징이 있습니다.

결국 둘 다 false가 돼야 false로 평가돼서 while문을 벗어날 수 있다는 의미입니다.

어떤 응답 값을 받을 때까지 기다렸다가 

값을 받게 되면 다음 구문을 실행하고 싶은 경우가 있을 겁니다.

엄마 올 때까지 여기서 기다리고 있어.

이 구문을 이해하셨나요?

우선 반복적으로 엄마가 왔는지 확인을 합니다.

그래서 while문을 사용했고

기다리다가 엄마가 오면 break문으로 while을 빠져나오면서

기다림을 그만하게 됩니다.

어떤 결과가 나올까요?

selectedMenu 객체가 리터럴로 초기 할당이 되었기에 true가 되어

while문이 실행된답니다.

하지만 실행 구문을 보면 selectedMenu를 빈 값 {}으로 변경했습니다.

빈 값과 null은 다르답니다.

빈 값으로 할당이 된 것이기에 true가 되어 무한루프가 실행된답니다.

그럼 어떻게 하면 빠져나올 수 있을까요?

바로 null로 할당하면 된답니다.

selectedMenu = null;

이렇게 while문은 () 안의 조건을 평가해서 true값이 나오면 

while 블럭문 { } 내의 구문들을 실행합니다.

false가 될 때 까지요.

지금까지 while문에 대해 알아봤습니다.

이제 실전에서 while문으로 반복문을 만들 수 있게 되었습니다.

이번 포스팅은 여기까지 입니다.

즐 코딩하세요.

안녕하세요. 신기한 연구소입니다.

이전 포스팅은 for에 대해 알아봤습니다.

자바스크립트는 for..in문과 for..of문도 있답니다.

그래서 이번 포스팅은 for..in문과 for..of문에 대해 알아보겠습니다.

뭔가 특수한 경우에 사용하는 구문같은데요.

어떤 용도로 사용하는지 하나씩 살펴보겠습니다.

for..in문

for..in문은 객체를 가지고 반복문을 사용하는 구문인데요.

다음과 같습니다.

뭔가 어려워보입니다.

하지만 걱정 마세요.

바로 이해할 수 있게 진행해보도록 할게요.

그 전에 먼저 객체의 구성을 살펴볼께요.

객체는 다음과 같이 선언 및 할당합니다.

나중에 객체에 대해 더 자세히 알아보도록 하고

우선 샘플용으로 가볍게 접근해봅니다.

객체는 중괄호 { } 안에 콤마 , 로 구분하고 콜론 : 으로 키와 값을 매칭한답니다.

key1은 값을 찾을 때 사용하는 키값이고

value1은 키에 대응하는 값입니다.

샘플로 하나 만들어볼까요?

커피 전문점에서 커피를 선택했을 때 받을 데이터를 구성해봅니다.

2샷 아이스 아메리카노 small 사이즈네요.

가격은 4500원이구요.

고객이 선택한 메뉴가 담긴 객체를 전달 받았습니다.

객체의 속성(menu, shot, size, price로 key)은 4가지 입니다.

이 속성을 반복문을 통해 하나씩 받아서 출력하고 싶다면

바로 for..in문을 사용하면 된답니다.

바로 아래와 같이 말이죠~

어떤 결과가 나오는지 실행해봤나요?

nm은 selectedMenu의 속성값을 받아옵니다. (menu, shot, size, price)

selectedMenu[nm]은 해당 속성의 값을 받아오게 됩니다. ('Iced Americano', 2, 'small', 4500)

축하합니다.

이제 for..in문을 어떻게 사용하는지 알게되었습니다.

한가지 주의할 점이 있습니다.

for..in문을 배열에서 사용할 경우 다음과 같은 예상하지 못한 결과가 나타납니다.

arr은 3개의 값을 가지고 있습니다.

arr[nm]으로 사용자 정의 속성을 추가했습니다.

만약 arr에서 3개의 값만 추출해서 사용하고 싶다면

for문을 사용하세요.

for..in문을 사용하면 네번째로 nm도 같이 받게 되어

원치 않은 결과가 나올 수 있습니다.

for문은 순수한 배열 인덱스로 추출할 수 있지만

for..in문은 배열 인덱스 뿐만 아니라 추가된 사용자 속성까지 전부 가져오거든요.

for..of문

이제 for..of문을 알아보겠습니다.

for..of문은 반복 가능한(Iterating) 객체(배열, Map, Set, argument 객체 등)

활용해서 해당 값을 가져옵니다.

반복 가능해야 하기에 위에서 사용한 객체 selectedMenu는 사용할 수 없답니다.

배열처럼 인덱스가 들어가고 반복이 가능한 객체만 가능하다는거죠.

중요한 점은 위에서 만든 배열에서 nm 속성을 추가했는데요.

nm은 arr배열의 순수한 반복 데이터가 아니고 임의로 넣은 데이터라

for..of에서 호출되지 않습니다.

다음 예를 보면 이해가 될거에요.

구조는 for..in문과 동일하지만

in 대신 of를 넣고 of 뒤에는 반복 가능한 객체만 넣을 수 있답니다.

of를 사용했습니다.

결과는 arr의 순수한 반복 데이터(값)만 추출된답니다. ('a', 'b', 'c')

그렇다면..아래 예제는 어떨까요?

문자열도 순서대로 문자가 붙어있는 구조입니다.

그래서 한글자씩 출력이 된답니다.

프로그래밍을 잘 하고 싶다면 절대 눈으로 보면 안됩니다.

직접 코딩해보고

이렇게 저렇게 바꾸기도 하면서

정확히 이해하는것이 중요하답니다.

이제 for문에 이어

for..in문과 for..of문에 대해 알아봤습니다.

이해가 되었나요?

오늘 포스팅은 여기까지입니다.

즐 코딩하세요