안녕하세요. 신기한 연구소입니다.
이전 포스팅은 for에 대해 알아봤습니다.
자바스크립트는 for..in문과 for..of문도 있답니다.
그래서 이번 포스팅은 for..in문과 for..of문에 대해 알아보겠습니다.
뭔가 특수한 경우에 사용하는 구문같은데요.
어떤 용도로 사용하는지 하나씩 살펴보겠습니다.
for..in문
for..in문은 객체를 가지고 반복문을 사용하는 구문인데요.
다음과 같습니다.
|
1
2
3
|
for (val in obj){
구문;
}
|
cs |
뭔가 어려워보입니다.
하지만 걱정 마세요.
바로 이해할 수 있게 진행해보도록 할게요.
그 전에 먼저 객체의 구성을 살펴볼께요.
객체는 다음과 같이 선언 및 할당합니다.
|
1
2
3
4
|
var obj = {key1 : value1,
key2 : value2,
...
keyn : valuen};
|
cs |
나중에 객체에 대해 더 자세히 알아보도록 하고
우선 샘플용으로 가볍게 접근해봅니다.
객체는 중괄호 { } 안에 콤마 , 로 구분하고 콜론 : 으로 키와 값을 매칭한답니다.
key1은 값을 찾을 때 사용하는 키값이고
value1은 키에 대응하는 값입니다.
샘플로 하나 만들어볼까요?
커피 전문점에서 커피를 선택했을 때 받을 데이터를 구성해봅니다.
|
1
2
3
4
|
var selectedMenu = {menu : 'Iced Americano',
shot : 2,
size : 'small',
price : 4500}
|
cs |
2샷 아이스 아메리카노 small 사이즈네요.
가격은 4500원이구요.
고객이 선택한 메뉴가 담긴 객체를 전달 받았습니다.
객체의 속성(menu, shot, size, price로 key)은 4가지 입니다.
이 속성을 반복문을 통해 하나씩 받아서 출력하고 싶다면
바로 for..in문을 사용하면 된답니다.
바로 아래와 같이 말이죠~
|
1
2
3
4
5
6
7
8
9
|
var selectedMenu = {menu : 'Iced Americano',
shot : 2,
size : 'small',
price : 4500};
for (var nm in selectedMenu){
console.log(nm);
console.log(selectedMenu[nm]);
}
|
cs |
어떤 결과가 나오는지 실행해봤나요?
nm은 selectedMenu의 속성값을 받아옵니다. (menu, shot, size, price)
selectedMenu[nm]은 해당 속성의 값을 받아오게 됩니다. ('Iced Americano', 2, 'small', 4500)
축하합니다.
이제 for..in문을 어떻게 사용하는지 알게되었습니다.
한가지 주의할 점이 있습니다.
for..in문을 배열에서 사용할 경우 다음과 같은 예상하지 못한 결과가 나타납니다.
|
1
2
3
4
5
6
7
|
var arr = ['a', 'b', 'c'];
arr['nm'] = 'arrs';
for (var arrNm in arr){
console.log(arrNm);
}
|
cs |
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 뒤에는 반복 가능한 객체만 넣을 수 있답니다.
|
1
2
3
4
5
6
7
|
var arr = ['a', 'b', 'c'];
arr['nm'] = 'arrs';
for (var arrNm of arr){
console.log(arrNm);
}
|
cs |
of를 사용했습니다.
결과는 arr의 순수한 반복 데이터(값)만 추출된답니다. ('a', 'b', 'c')
그렇다면..아래 예제는 어떨까요?
|
1
2
3
4
5
6
|
var str = 'Homerun!'
for (var arrNm of str){
console.log(arrNm);
}
|
cs |
문자열도 순서대로 문자가 붙어있는 구조입니다.
그래서 한글자씩 출력이 된답니다.
프로그래밍을 잘 하고 싶다면 절대 눈으로 보면 안됩니다.
직접 코딩해보고
이렇게 저렇게 바꾸기도 하면서
정확히 이해하는것이 중요하답니다.
이제 for문에 이어
for..in문과 for..of문에 대해 알아봤습니다.
이해가 되었나요?
오늘 포스팅은 여기까지입니다.
즐 코딩하세요
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]do while문 사용하기 편. (루프와 반복) (0) | 2022.06.27 |
|---|---|
| [자바스크립트]while문 사용하기 편. (루프와 반복) (0) | 2022.06.26 |
| [자바스크립트]for문 사용하기 편. (루프와 반복) (0) | 2022.06.22 |
| [자바스크립트]switch 문 사용하기 편. (조건문) (0) | 2022.06.19 |
| [자바스크립트]if...else문 사용하기 편. (if 조건문) (0) | 2022.06.12 |
