봤던 문법들인데 개인적으로 헷갈리던 개념들 정리
※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
● for-in
for-in문은 데이터 타입중 배열뿐만 아니라 Ojbect에도 사용할 수 있는 반복문이다. Object 내에 정의된 키 값의 수만큼 코드 블록을 실행
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<script>
let person = { fname: "John", lname: "Doe", age: 25 };
let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
console.log('Object person');
console.log(person);
console.log('Array brands');
console.log(brands);
console.log('=====================for-in=====================');
console.log('오브젝트 key에 해당하는 데이터(값)를 출력 person[key]');
for (let key in person) {
console.log(person[key]);
}
console.log('배열의 인덱스 번호 출력 brand');
for (let brand in brands) {
console.log(brand);
}
</script>
</body>
</html>
● for-of
for-of문은 Array, Map, String 등 iterable(반복 가능한) 객체에서 사용가능한 반복문이다.
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<script>
let person = { fname: "John", lname: "Doe", age: 25 };
let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
console.log('Object person');
console.log(person);
console.log('Array brands');
console.log(brands);
console.log('=====================for-of=====================');
console.log('배열의 각 요소들 출력 brand');
for (let brand of brands) {
console.log(brand);
}
console.log('for-of문으로 동일하게 사용하려니 에러 발생');
for (let key of person) {
console.log(person[key]);
}
</script>
</body>
</html>
인덱스 요소가 없는 타입에서 돌리려니 에러가 뜬다. 찾아보게 된 계기가 자바스크립트에는 저런식으로 쓰는게 없는지 궁금해서 찾아본 거 였는데 for-of문과 유사한 기능이라 생각하면 될 듯 하다.
그럼 그냥 전부 되는 짱짱 for-in 쓰는거 되는거 아님? 이라고 생각해서 찾아봤는데 이렇다함.
또 있을 경우 추가 예정
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_03. 내장 객체_Symbol (0) | 2023.11.29 |
|---|---|
| JavaScript_03. 내장 객체_Window (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_JSON (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Math (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Map (0) | 2023.11.28 |
