04-1 배열
여러 개의 자료를 저장하려면 여러 개의 변수를 만들어야하는 불편함을 해결
대괄호를 사용하여 여러개의 변수를 한 번에 선언해 다룰 수 있는 자료형
배열 내부에 들어가 있는 값 - 요소
가장 앞에있는 요소 : 0
요소의 순서 - 인덱스
대괄호 안에 [1*3] 이런식으로 계산식을 넣을 수도 있음 배열은 여러개의 요소를 가지고 있기 때문에
numbers라고 배열의 이름을 복수형으로 정함
배열.length - 요소의 갯수 / 배열의 길이
fruits[fruits.length-1] - 배열의 마지막 요소를 선택할 때 자주 사용하는 패턴
push ()
배열 뒷부분에 요소 추가
배열,push(요소)
3개의 요소를 만들고 10번째 인덱스에 요소를 강제추가할 경우 4~9번째 인덱스는 아무 것도 없는 empty가 됨
length 요소 활용
const fruits = ["사과", "배", "바나나"]
fruits[fruits.length] = "귤" > fruits의 요소는 3개 이므로 fruits[3]에 "귤"을 추가함
fruits = ["사과", "배", "바나나", "귤"]
배열 요소 제거
1. 인덱스 기반 제거
2. 값 기반 제거
1.인덱스 기반 제거 - splice()
배열의 특정 인덱스 요소를 제거할 때 사용
splice는 접합이라는 의미 잘고 제거해서 자른 부분 접합 요소를 중간에 넣을 때도 사용
배열.splice(인덱스, 제거할 요소의 개수)
ex) itemsA.splice(2,1) - 배열의 2번째 인덱스로부터 1개 요소를 제거
2. 값 기반 제거 - index of () & splice()
배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice()메소드를 사용해 제거
const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)
indexOf()메소드는 배열내부에 요소가 있을 때 인덱스 리턴
값이 없을 경우 -1 리턴
배열 내부에서 특정 값을 가진 요소 모두 제거
1.반복문
2.filter()메소드
itemsE.filter((item) => item!=='귤'
배열의 특정 위치에 요소 추가하기
배열의 특정 위치(인덱스)에 요소를 추가할 때는 splice()메소드 사용
splice()메소드의 2번째 매개변수에 0을 입력하면 splice()메소드는 아무것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소 입력
배열.splice(인덱스, 0, 요소)
예시) const itemsD = ["사과", "귤", "바나나", "오렌지"]
itemsD.splice(1, 0, "양파")
[]
itemsD
["사과", "양파", "귤", "바나나", "오렌지"]
비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않음
파괴적 처리 : 처리 후에 원본 내용이 변경 splice , push
확인예제
<script>
const array = [1, 2, 3, 4]
console.log(array.length)
console.log(array.push(5))
</script>
array.push(5)를 하면 [1, 2, 3, 4, 5]를 출력한다고 생각할 수 있지만, 그렇지 않고 그냥 추가된 값을 출력.
“사과를 사과라고 하는 이유는 그냥 그렇게 약속해서 그렇다”라고 할 수밖에 없는 것처럼 “그냥 그렇게 설계되어 있다”라고 답할 수밖에 없음
04-2 반복문
for in 반복문
배열과 함께 사용할 수 있는 반복문
배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
for (const 반복 변수 in 배열 또는 객체) {
문장
}
<script>
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
for (const i in todos) {
console.log(`${i}번째 할 일: ${todos[i]}`)
}
</script>
for 반복문의 반복변수 (위의 코드에서 i)에는 요소의 인덱스들이 들어옴. 이를 활용해서 배열 요소에 접근
반복변수에 인덱스가 들어감
for of 반복문 - for in보다 안정적으로 사용for (const 반복 변수 of 배열 또는 객체 ){문장}
for in 반복문과 다르게 반복 변수에 요소의 값이 들어감.
<script>
//for of
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
for (const todo of todos){
console.log(`오늘의 할 일: ${todo}`)
}
</script>
for 반복문
for (let i = 0; i < 반복 횟수; i++){
문장
}
<script>
let output = 0
for (let i =1; i<=100; i++){
output+=i
}
console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`)
</script>
for 반복문으로 배열을 반대로 출력
<script>
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
for (let i = todos.length - 1; i>=0; i--){
console.log(`${i}번째 할 일: ${todos[i]}`)
}
</script>
배열의 마지막 요소부터 0까지 하나씩 빼면서 반복
while 반복문
불표현식이 true면 계속해서 문장을 실행
while (불 표현식) {
문장
}
조건이 참이면 무한히 반복 실행
조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 함. 반복문이 무한 반복되는 것을 무한루프라고 함
<script>
let i =0
while (true) {
alert(`${i}번째 반복입니다.`)
i = i+1
}
</script>
<script>
let i = 0
while (confirm('계속 진행하시겠습니까?')){
//사용자가 [확인] 버튼을 클릭하면 true가 되어 계속 반복합니다.
alert(`${i}번째 반복입니다.`)
i = i + 1
}
</script>사용자가 [확인]버튼을 누르면 true가 되어 반복문을 계속해서 반복, 반면 사용자가 [취소]버튼을 누르면 false로 바뀌어 반복 종료
while 반복문과 함께 배열 사용
배열 요소를 하나씩 출력하는 코드
break
조건문이나 반복문을 벗어날 때 사용
while은 조건이 항상 참이므로 무한 반복하는데 break 사용해서 탈출함
<html>
<head>
<title></title>
<script>
// 반복문
for (let i = 0; true; i++) {
alert(i + '번째 반복문입니다.')
// 진행 여부를 물어봅니다.
const isContinue = confirm('계속하시겠습니까?')
if (!isContinue) {
break
}
}
// 프로그램의 종료를 확인합니다.
alert('프로그램 종료')
</script>
</head>
<body></body>
</html>
continue
반복문안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행.
<html>
<head>
<title></title>
<script>
// 반복문
for (let i = 0; i < 5; i++) {
// 현재 반복 작업을 중지하고 다음 반복 작업을 수행합니다.
continue
alert(i)
}
</script>
</head>
<body></body>
</html>코드 실행 시 경고창 출력되지 않음 바로 다음 반복 작업으로 넘어가기 때문!!
확인 문제
1.for in은 인덱스 for of 는 배열의 값
2.
<script>
let i =0
const array = [1,2,3,4,5]
while (i < array.length){
console.log(`${i} : ${array[i]}`)
i++
}
</script>오류가 발생 for 반복문의 반복 변수는 for in, for of 반복문과 다르게 let 키워드로 변수로서 선언해야 합니다.
실행되게 수정 ↓
const array = []
for (let i = 0; i < 3; i++) {
array.push((i + 1) * 3)
}
console.log(array)
3. 범위설정 0으로 할거면 +1해서 i<101
1로 지정되어 있ㅁ으니 <=100
'Javascript > 혼공자스' 카테고리의 다른 글
| 08 예외처리 (0) | 2024.02.06 |
|---|---|
| 혼공자스 7 Chapter 객체 (0) | 2022.12.16 |
| 혼공자스 6 Chapter 객체 (0) | 2022.12.02 |
| 혼공자스 Chapter 5 함수 (0) | 2022.11.28 |
