객체와 배열
우선 for문에 대해 들어가기 전에 객체와 배열의 차이점에 대해서 이야기하고자 한다
| 배열 | 항목 | 객체 |
| let arr = [요소1, 요소2,..] | 선언방법 | let obj = {키1:속성1, 키2:속성2,...} |
| 값(요소,item), length | 포함 값 | 키(key), 값(value) ==> 속성(property) |
| 순서가 있다. 인덱스로 설정되어 있다. | 순서여부 | 순서가 없다. |
| 배열명[인덱스] *인덱스는 차례대로 0부터 길이-1까지의 숫자 |
접근방법 | 객체명.키, 객체명['키'] *키를 통해서 값을 불러온다. |
배열과 객체를 알아보는 방법으로는 Array.isArray();를 사용할 수 도 있고, console.dir을 사용해서 프로포타입이 array인지 object인지를 확인하여 알아볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,2,3,4,5];
let obj = {0:1,1:2,2:3,3:4,4:5};
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
console.dir(arr); //Array
console.dir(obj); //Object
</script>
</body>
</html>
For문
for문에는 일반for문, for-in문, for-of문 그리고 forEach문이 있다.
| 종류 | 적용 대상 | 사용 가능한 객체 | |
| for-in | 객체 | enumerable객체 (열거가능한, 객체 속성 중 하나) |
key에 접근 |
| for-of | iterator 객체가 있는 타입 *array, String, Set 등 |
iterable 객체 (반복가능한, iterator객체가 있는 타입) |
값에 접근 |
| forEach | 배열 | iterable객체 (forEach()메서드를 포함하고 있는 타입) |
값, 인덱스, 원본배열을 인수로 사용 |
for-in
객체처럼 key와 value가 있는 경우 사용하는 반복문이다. 객체에 있는 key값을 사용하여 value를 불러올 수 있다. for-in의 경우 array에도 사용할 수는 있지만 일반적으로 object를 제외한 객체에는 사용하지 않는 것이 좋다.
- for (const 변수 in 객체명){
로직
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
val1:1,
val2:2,
val3:3
};
for (const key in obj) {
console.log(`${key} 값 : ${obj[key]}`);
}
</script>
</body>
</html>
for-of
iterator 객체가 있는 타입에서 사용이 가능하다. break, continue, return문과 함께 사용할 수 있다. 객체들 중에서 String, Array, Map, Set 등은 모두 프로토타입 객체가 symbol.iterator메서드가 있기 때문에 반복가능한 객체이다.
- for (const 변수 of iterator객체명){
로직
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "abcdefg";
let arr = [2,9,3]; //forEach(), Symbol.iterator 둘 다 있음
for (const i of str) {
console.log(`str의 값 : ${i}`);
}
for (const i of arr) {
console.log(`arr의 값 : ${i}`);
}
</script>
</body>
</html>
forEach()
배열의 각 요소를 순회하며 주어진 함수를 호출한다. 각 요소에 대해 함수를 호출할 때 요소의 값, 인덱스 그리고 원본 배열을 인수로 넘겨준다. 주어진 함수의 경우 배열의 크기만큼 반복된다. 콜백함수는 어떤 함수에 인자로 전달되어, 함수 내부에서 시행되는 함수에 전달되는 인자를 의미한다.
- 배열명.forEach((element, index, array) => {
로직
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2,9,3,8,5,6]; //forEach(), Symbol.iterator 둘 다 있음
// forEach
arr.forEach((element, index, array) => {
console.log(`arr의 element: ${element}`);
console.log(`arr의 index에 따른 값: ${arr[index]}`);
console.log(array);
});
</script>
</body>
</html>
여기서는 요소, 인덱스, 배열을 내부 함수에 인자로 전달했다. 그리고 이 배열의 길이가 6이여서 6번 반복되는 것을 볼 수 있다. 콜백함수로는 function()을 전달할 수도 있다. forEach문을 사용해서, 배열에 반복되는 함수를 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2,9,3,8,5,6]; //forEach(), Symbol.iterator 둘 다 있음
let sum = 0;
arr.forEach(function(number){
sum += number;
console.log(`숫자들의 합은 ${sum} 입니다.`);
});
</script>
</body>
</html>
function과 forEach를 사용해서 숫자들의 값이 차례대로 더해질 수 있도록 했다. 첫번째 인덱스에 있는 숫자부터 하나씩 더해지는 것을 볼 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 Spread 연산자에 대해 알아보자 (0) | 2024.07.24 |
|---|---|
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 배열 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |