-
[JavaScript] 배열(Array), for/while 반복문JavaScript 2022. 11. 10. 21:22
1. 배열 (Array)
배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열 내부에 들어있는 값을 요소라고 하고, 요소의 순서를 인덱스라고 한다. 배열은 보통 여러개를 갖기 때문에 일반적으로 배열 이름을 복수형으로 짓는다.
const numbers = [273, 52, 103, 32] // 배열[인덱스] numbers[0] // 배열 요소 개수 확인하기 numbers.length //4 numbers[numbers.length - 1] // 맨 마지막 요소 출력 // 배열 뒷부분에 요소 추가하기 numbers.push('사과') numbers // [273, 52, 103, 32, '사과'] // 인덱스를 활용해 배열 뒷부분에 요소 추가하기 numbers[numbers.length] = '바나나' numbers // [273, 52, 103, 32, '사과', '바나나'] // 배열 요소 제거하기 - 인덱스로 제거 : splice() (splice는 접합이라는 뜻) numbers.splice(2, 1) //배열의 2번째 인덱스로부터 1개 요소 제거 numbers // [273, 52, 32, '사과', '바나나'] // 배열 요소 제거하기 - 값으로 제거 : indexOf() const 인덱스 = numbers.indexOf('사과') numbers.splice(인덱스, 1) console.log(numbers) // 배열의 특정 위치에 요소 추가하기 - slice() 메소드의 2번째 매개변수에 0을 입력 시 아무것도 제거X numbers.splice(1,0, '감') // 1번째 인덱스에 '감'추가 numbers // [273, '감', 52, 103, 32, '사과', '바나나']
cf. 자료의 비파괴와 파괴
처리 후에 원본 내용이 변경되지 않으면 비파괴적 처리, 변경되면 파괴적 처리이다. 과거에는 메모리를 절약하기 위해 대부분 파괴적 처리로 이루어졌지만, 메모리가 여유로운 현대에는 자료 보호를 위해 대부분 비파괴적 처리를 한다고한다.
2. 반복문 : for, while
- for in 반복문 : 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다. 반복 변수에 요소의 인덱스들이 들어오므로 이를 활용하여 배열 요소에 접근한다.
<script> const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업'] for (const i in todos) { console.log(`${i}번째 할 일: ${todos[i]}`) } </script>
- for of 반복문 : for in 반복문과 달리 반복 변수에 인덱스가 아닌 요소의 값 자체가 들어간다. 요소의 값을 반복할 때 안정적으로 사용할 수 있다.
<script> const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업'] for (const todo of todos) { console.log(`오늘의 할 일: ${todo}`) } </script>
- for 반복문 : 특정 횟수만큼 반복하고 싶을 때 사용한다. for in, for of 반복문과 달리 반복 변수를 let으로 선언해야한다.
<script> let output = 0 for (let i = 1; i <= 100; i++) { output += i } console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`) </script>
- while 반복문 : if 조건문과 형태가 유사하지만, if 조건문과 달리 문장을 한 번만(특정 횟수만큼) 실행하고 끝나는 것이 아니라 불 표현식이 true이면 계속해서 문장을 실행한다는 것이다. while 반복문은 조건이 변하지 않는다면 무한히 반복 실행하므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 한다. 반복문이 무한 반복되는 것을 무한 루프라고 한다.
// 무한 반복문 - 확인 버튼을 클릭하면 true가 되어 경고창이 뜨고, 취소버튼을 클릭하면 false가 되어 반복을 종료한다. let i = 0 while (true) { alert(`${i}번째 반복입니다.`) i = i + 1 }
횟수를 기준으로 반복할 때는 코드를 간결하게 구현할 수 있는 for반복문을 사용하는 것이 편하고, 조건에 큰 비중이 있을 때는 while 반복문을 사용하는 것이 좋다. 예를 들어 '특정 시간동안 어떤 데이터를 받을 때까지'와 같이 조건을 기반으로 사용하는 반복문에 while 반복문을 사용한다.
cf. break 키워드와 continue 키워드
break 키워드는 조건문이 반복문을 아예 벗어날 때 사용한다. while 반복문에서 무한 루프를 벗어나기위해 사용할 수 있다. continue 키워드는 반복문 안의 진행하고있는 반복 작업을 멈추고 처음으로 돌아가 다음 반복 작업을 진행한다. 사실 break 키워드나 continue 키워드는 반복문의 조건식을 적절하게 만들면 필요 없는 구문이기도 한다. 그러므로 최대한 자제하도록 주의하자.
'JavaScript' 카테고리의 다른 글
[JavaScript] 콜백 함수, 화살표 함수, 타이머 함수 (0) 2022.11.12 [JavaScript] 함수 (익명 함수vs선언적 함수, 나머지 매개변수, 전개 연산자, 기본 매개변수) (0) 2022.11.11 [JavaScript] preventDefault 함수 (0) 2022.09.24 [JavaScript] Event (0) 2022.09.24 [JavaScript] 자바스크립트로 시계만들기 (0) 2022.09.24