챕터4. 배열과 반복문
배열
가장 많이 쓰이는 자료형
여러 자료를 묶어서 활용할 수 있다.
배열은 대괄호 ( [ ] ) 를 사용하여 구분하며
배열 내부에는 어떤 자료형도 들어갈 수 있다.
예를들어,
let arr = [
1,
'soo',
true,
fucntion(){},
{ 'name':'soo'},
[ 2,3 ]
]이런 식으로 배열 내부의 값을 해당 배열의 ‘요소’ 라고 한다.
배열에서 가장 기본이 되는 개념은 요소의 순서, index 이다.
이를 확인하기 위해
array.length 키워드를 사용한다.
let arr = [ 1,2,3,4,5]
arr.length
// 5배열요소 추가와 제거
배열에 추가적으로 요소를 할당하기 위해서 쓸 수 있는 정말 여러가지 메소드들이 있는데,
대표적으로는 push와 unshift 가 있다.
let arr = [1,2,3,4]
arr.push(5)
arr.unshift(0)
// arr = [0,1,2,3,4,5]push 는 배열의 마지막 위치에,
unshift 는 배열의 첫번째 위치에 요소를 추가한다.
또한 pop 메소드로는 마지막위치 부터의 제거를,
shift 메소드로 첫번째 위치부터의 제거를 할 수 있다.
let arr = [1,2,3,4,5]
arr.shift();
arr.pop();
// arr = [2,3,4]아예 위치를 지정하여 추가하거나 제거하려면
splice 메소드를 이용한다.
let arr = [1,2,4,5]
arr.splice(2,0,3)
// arr = [1,2,3,4,5]
arr.splice(0,2)
// arr = [3,4,5]splice 메소드의 첫번째 파라미터는 요소를 추가할 위치 (인덱스 기준)
두번째 파라미터는 제거할 요소의 수 (위의 예시처럼 0이라면 요소를 제거하지 않음)
세번째 파라미터는 배열에 추가할 요소이다. 입력하지 않으면 제거 기능만 수행한다.
배열의 값으로 요소를 제거할 수도 있는데
let arr = [1,2,3,4,5]
const index = arr.indexOf(3)
arr.splice(index,1)
// arr = [1,2,4,5]indexOf 키워드로 몇번째 인덱스인지 찾아 제거하는 방식이다.
이 경우에는 중복된 자료를 제거할 수 없는데,
그럴 땐 array.filter() 메소드를 사용하면 된다.
array.filter() 메소드는 조건식을 이용해 true 값을 반환하는 요소를 반환한다.
예를들어,
let arr = [1,2,3,4,5]
const filterArr = arr.filter((e)=> e > 3)
// filterArr = [4,5]filter 를 이용해 3보다 큰 요소들만 골라낼 수 있다.
그런데 filter 같은 메소드와 위의 push, unshift 같은 메소드를 보면 약간의 차이가 있다.
filter 함수는 ‘배열의 원본데이터를 변경하지 않는’데 반해
push 계열의 함수는 ‘배열의 원본데이터를 변경한다’
이를 비파괴적 처리 , 파괴적 처리 라는 개념으로 설명할 수 있는데,
비파괴적 처리는 처리 후 원본 데이터가 변경되지 않는 처리,
파괴적 처리는 처리 후 원본 데이터가 변경되는 처리 라고 볼 수 있다.
사실 원본데이터를 바꾸는 코드는 위험하다.
실수를 했을 경우 치명적이기 때문이다.
실수 한번으로 원본 데이터가 사라져버리면 아주 큰일이다.
과거에 컴퓨터의 메모리가 부족했을 당시에
문자, 숫자 같은 간단한 자료형은 상관 없었지만,
배열, 오브젝트 같은 크기가 어느정도일지 모르는 자료형은
데이터를 메모리에 모두 저장할 수 없었기때문에
파괴적 처리를 이용하여 메모리를 절약했다고 한다.
현재에는 그러한 문제점이 많이 해결되었기때문에
원본 데이터의 보존성을 위해 비파괴적 처리 코드를 지향한다.
그밖에 배열에 요소를 추가하는 방법으로는
let arr = [1,2,3]
let arr2 = [4,5,6]
let arr3 = arr.concat([arr2)
// arr3 = [1,2,3,4,5,6]배열과 배열을 합쳐주는 concat 메소드나
let arr = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr, ...arr2]
// arr3 = [1,2,3,4,5,6]spread operator 를 사용해 새로운 배열을 생성하는 방법도 있다.
반복문 기초
반복문을 쓰는 이유는 아주 원론적인 접근부터 시작한다.
우리가 코딩을 하는 가장 근본적인 이유는 반복작업을 컴퓨터가 대신 해줬으면 하기 때문이다.
for
자바스크립트의 가장 범용적인 반복문
for(let i=0; i < 반복횟수; i++){
반복적으로 실행할 코드
}변수( i ) 를 기준으로 설정하여 몇 번 반복할지 설정하면
그 횟수만큼 코드를 반복해주는 식으로 작동한다.
배열에서는 forEach 반복문을 쓸 수 있다.
forEach
let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach((e)=>{
arr2.push(e*2)
})
// arr2 = [2,4,6,8,10]기존의 for 문으로 배열의 반복문을 실행하기 위해서는
let arr = [1,2,3,4,5]
let arr2 = []
for(let i=0; i<arr.length; i++){
arr2.push(arr[i]*2)
}이런식으로 구현해야 했지만
forEach 는 자동으로 해당 배열의 length 만큼 반복해준다.
첫번째 파라미터로 index[0] 부터 index[arr.length] 까지의 호출을 해주는데
반복문이 도는 첫번째 구간에서의 e는 해당 배열의 0번째 인덱스를,
두번째 도는 구간에서의 e는 해당 배열의 1번째 인덱스를 가리키게된다.
forEach 의 두번째 파라미터로 처리할 현재 요소의 인덱스를 (0부터 시작하는)
세번째 파라미터로 forEach 를 호출한 배열 그 자체도 불러올 수 있으므로
굉장히 유용하다.
그밖의 반복문으로는
for…of
let arr = [1,2,3]
let arr2 = []
for (let e of arr) {
arr2.push(e*2)
}
// arr2 = [2,4,6]for 문과 더불어 범용성 있게 for of 반복문을 사용할 수도 있다.
이와 비슷한 for in 반복문도 있는데
for…in
let obj = {a:1, b:2, c:3}
for(let e in obj){
console.log(e * 2)
}위의 반복문의 경우 얼핏보면 2,4,6을 콘솔에 출력할 것 같지만
실제로는
// a
// b
// c이런식으로 출력이 된다.
for in 반복문은 주로 오브젝트의 반복문에서 쓰이는데
in 앞의 변수로 해당 오브젝트의 key 값을 가져와줄 수 있다.
for of 반복문으로 오브젝트에 반복문을 적용하려고 하면
let obj = {a:1, b:2, c:3}
for(let e of obj){
console.log(e * 2)
}
// Uncaught TypeError: obj is not iterableis not iterable 이라는 오류를 볼 수 있는데
iterable 은 말 그대로 반복가능한 요소라는 뜻.
오브젝트는 반복가능한 요소가 아니다.
반복 가능한 객체(iterable) 는
- String
- Array
- TypedArray
- Map
- Set
자료형이 있다.
typedArray 는 일반 배열에 비해 실행 시간과 메모리 사용 측면에서 효율적이라고 하는데…..
🤔…
while
if 조건문과 형태가 비슷한 반복문
조건이 true 일 경우 항상 실행한다.
while(조건) {
조건문이 참일 경우 항상 실행되는 코드
}‘true 일 때 항상 실행되는’ 이 중요한 키워드.
조건이 true 인 채로 변하지 않는다면 영원히 코드를 반복하므로
무한루프에 빠질 수 있다.
다른 프로그래밍 언어에서는 이러한 무한루프를
‘데이터를 전달받을 때 까지 기다린 후’ 같은 목적으로 사용할 수 있지만
자바스크립트에서는 페이지가 먹통이 되어버리므로 사용할 수 없다.
따라서 while 반복문은 반드시 ‘끝’ 을 정해주어야 한다.
끝을 조건문으로 정해줄 수도 있지만
강제로 끝을 내주는 키워드도 있다.
let i = 0;
while(i < 6){
if(i === 3){
break;
}
i += 1;
}
// i = 3
이런 식으로 i 가 3이 되는 순간 break 를 이용하여 반복문을 종료시킬 수 있다.
이와 비슷하게 해당 분기의 코드실행을 멈추고 다음 분기로 넘어가도록 해줄 수도 있다.
let arr = []
for(let i=0; i<10; i++){
if(i%2 ===1){
continue;
}
arr.push(i)
}
// arr = [0,2,4,6,8]이런식으로 보통 조건식과 많이 사용한다.
