목차
<WIL : What I Learned>
- 반복되는/해야 하는 코드가 무엇인지 정확하게 파악하자
<04-1 배열>
1. 배열 만들기 : [요소, 요소, ..., 요소]
2. 배열 요소에 접근 : 배열[인덱스]
3. 배열 요소 개수 확인 : 배열.length
4. 배열 뒷부분에 요소 추가 : push(), 인덱스
5. 배열 요소 제거 : splice(), indexOf()
6. 배열의 특정 위치에 요소 추가 : 배열.splice(인덱스, 0, 요소)
+. 자료의 파괴적/비파괴적 처리
<04-2 반복문>
1. for in 반복문
2. for of 반복문
+. for in/of 반복문 차이 확인
3. for 반복문
4. while 반복문
+. break 키워드
+. continue 키워드
@ 예제 문제
1-1) 피라미드 만들기(반쪽)
1-2) 피라미드 만들기(반쪽, *의 개수가 홀수로 산출)
1-3) 피라미드 만들기(반쪽, *의 개수가 짝수로 산출)
2) 피라미드 만들기
3) 다이아몬드 만들기
WIL : What I Learned
- 반복되는/해야 하는 코드가 무엇인지 정확하게 파악하자
- 피라미드 만들기(반쪽)
- 반복되는 코드는 'output +='이고, 9번 반복됨
- *은 1개씩 늘어나고, \n은 1개만 있는 형태임
- *가 1개씩 늘어나는 것을 만들기 위해 반복문을 한 번 더 만듦
04-1 배열
배열(array)? 여러 변수를 한 번에 선언해 다룰 수 있는 자료형
요소(element)? 배열 내부에 들어 있는 값
인덱스(index)? 요소의 순서 (1이 아닌 0부터 시작)
1. 배열 만들기 : [요소, 요소, ..., 요소]
- 대괄호( [...] )를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력
- 개발자 도구 콘솔창에서 배열 만들어 확인하기
> const arrays = ['bolee', 123, true, function () {}, [456, 789]]
undefined
> arrays
(5)['bolee', 123, true, ƒ, Array(2)]
// (5)은 요소 개수, ['bolee', ..., [456, 789]]은 요소
[참고] array 하단에 ▶가 활성화되어 있지 않는 경우
- array 부분에서 앤터를 치면 ▶가 나옴
2. 배열 요소에 접근 : 배열[인덱스]
[참고] 배열명은 복수형으로
배열은 여러 개의 요소를 갖기 때문에 일반적으로 복수형(arrays 등)으로 이름을 지음
> const numbers = [1, 2, 3, 4]
undefined
> numbers[0]
1
> numbers[1 + 2] // numbers[3]으로 3번째에 위치한 4가 출력됨
4
3. 배열 요소 개수 확인 : 배열.length
> const fruits = ['사과', '귤', '딸기', '바나나']
undefined
> fruits.length
4
> fruits[fruits.length - 1] // fruits[3]으로 3번째에 위치한 '바나나'가 출력됨
"바나나"
4. 배열 뒷부분에 요소 추가 : push(), 인덱스
1) 배열.push(요소) 사용해 추가
> const arrays = ['bolee', 123, true, function () {}, [456, 789]]
undefined
> arrays
(5) ['bolee', 123, true, ƒ, Array(2)]
> arrays.push('system')
6
> arrays
(6) ['bolee', 123, true, ƒ, Array(2), 'system'] // 배열 뒷부분에 요소가 추가됨
2) 인덱스 사용해 추가
- 배열의 길이는 고정이 아니므로 9번째에 요소를 추가하면 6~8번째 인덱스는 아무 것도 없는 empty가 됨
> const arrays = ['bolee', 123, true, function () {}, [456, 789], 'system']
undefined
> arrays[9] = 100
100
> arrays
(10) ['bolee', 123, true, ƒ, Array(2), 'system', empty × 3, 100]
5. 배열 요소 제거 : splice(), indexOf()
1) 배열.splice(인덱스, 제거할 요소의 개수)
- splice는 접합이라는 의미
- splice() 메소드는 인덱스로 1) 요소를 제거할 때 2) 요소를 중간에 넣을 때 사용
> const arrays = ['bolee', 123, true, function () {}, [456, 789], 'system']
undefined
> arrays.splice(1, 4) // 배열의 1번째 인덱스부터 4개의 요소를 제거
(4) [123, true, ƒ, Array(2)] // 제거된 요소가 배열로 리턴됨
> arrays
(2) ['bolee', 'system'] // 배열에서 요소가 제거된 것을 확인할 수 있음
2) const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)
indexOf() 메소드?
- 배열 내부에서 특정 값의 위치를 찾는 메소드
- 출력값
1) 배열 내부에 요소가 있는 경우 인덱스를 리턴
2) 배열 내부에 요소가 없을 때는 -1을 리턴
- 문자열에서의 indexOf()
> const string = '보리 시스템에 오신 걸 환영합니다.' undefined //보 0, 리 1, 띄어쓰기 2, 시 3번째 인덱스에 위치 > string.indexOf('오신') // '오신'의 앞글자인 '오'의 위치가 8번째 인덱스에 위치하므로 8 // 8을 리턴 > string.indexOf('신') 9 > string.indexOf(' ') // '보리' 뒷부분의 띄어쓰기의 위치가 2번째 인덱스에 위치하므로 2 // 2를 리턴
- indexOf()로 값의 위치를 추출한 뒤 splice()로 요소를 제거
> const arrays = ['bolee', 'system', 123]
undefined
> const index = arrays.indexOf('system')
undefined // index를 배열 arrays의 요소'system'의 위치로 선언
> index // index는 'system'의 인덱스를 리턴(1번째 요소이므로 1을 출력)
1
> arrays.splice(index, 1) // 'system'부터 1개의 요소를 제거
['system'] // 제거되는 요소를 나타냄
> arrays // arrays를 확인해보면
['bolee', 123] // 요소 'system'는 제거되어 'bolee', 123만 남음
> arrays.splice(index, 3) // 'system'부터 3개의 요소를 제거
[123] // 제거되는 요소를 나타냄
> arrays // arrays에는
['bolee'] // 요소 'bolee'만 남음
> arrays.indexOf('system') // 'system' 요소는 이미 제거되었기 때문에
-1 // -1을 리턴
- filter()로 배열 내부에서 특정 값을 가진 요소 모두 제거
> const arrays = ['bolee', 123, 'system', 123]
undefined
> arrays.filter((array) => array !== 123)
(2) ['bolee', 'system']
6. 배열의 특정 위치에 요소 추가 : 배열.splice(인덱스, 0, 요소)
- 자주 사용하는 코드는 아니지만 간혹 사용하므로 참고
> const arrays = ['bolee', 'system', 123, 456]
undefined
> arrays.splice(0, 3, 'add') // 0번째 요소를 기준으로, 3개의 요소 제거, 'add'를 0번째에 추가
(3) ['bolee', 'system', 123] // 제거되는 3개의 요소를 나타냄
> arrays
(2) ['add', 456] // 0번째에 'add'가 추가된 것을 확인할 수 있음
+. 자료의 파괴적/비파괴적 처리
자료의 비파괴/파괴적 처리?
- JS는 자료 처리를 위해 다양한 연산자, 함수, 메소드를 제공하고, 이는 파괴적/비파괴적 처리로 구분
- [구분 기준] 처리후 원본 상태의 변화
1) 파괴적 처리 : 처리후 원본내용 변경됨
2) 비파괴적 처리 : 처리후 원본내용 변경 안됨
- [사용 이유] 메모리(과거/파괴적 처리)와 자료 보호(현재/비파괴적 처리)
=> 초기에 표준화된 것들은 파괴적 처리로, 최근 표준화된 것들은 비파괴적 처리로 많이 함
1) 파괴적 처리
과거에는 컴퓨터 메모리가 부족했기 때문에 배열처럼 거대해질 수 있는 자료는 메모리 절약을 위해 대부분 파괴적 처리로 이루어짐
*결과가 기본 자료형인 경우 메모리를 조금만 차지하기 때문에 원본, 결과를 모두 메모리에 저장해도 크게 무리가 없었으나, 배열처럼 크기를 모르는 대상의 원본과 결과를 모두 메모리에 저장하는 것은 위험할 수 있었음
2) 비파괴적 처리
메모리가 여유로운 현재는 자료 보호를 위해 대부분 비파괴적 처리를 함
1) 비파괴적 처리
- a, b를 연결해 c를 만들어도 a, b의 원본내용은 변경되지 않았음
> const a = 'bolee'
undefined
> const b = 'system'
undefined
> const c = a + b
undefined
> c
'boleesystem'
> a
'bolee'
> b
'system'
2) 파괴적 처리
- push() 메소드를 실행한 뒤에는 arrays의 원본내용이 변경됨
> const arrays = ['bolee', 'system']
undefined
> arrays.push(123)
3
> arrays
(3) ['bolee', 'system', 123]
04-2 반복문
for in 반복문? 배열의 인덱스를 기반으로 반복할 때 사용 => 몇 번째?
for (const 반복변수 in 배열 또는 객체) { 문장 }
for of 반복문? 배열의 값을 기반으로 반복할 때 사용 => 값?
for (const 반복변수 of 배열 또는 객체) { 문장 }
for 반복문? 횟수를 기반으로 반복할 때 사용for (let i = 0; i < 반복횟수; i++) { 문장 }
while 반복문? 조건을 기반으로 반복할 때 사용 / 무한루프(if 반복문과의 차이점)
*무한루프가 되므로 조건을 거짓으로 만들 수 있다는 내용이 문장에 포함되어 있어야 함while (불 표현식) { 문장 }
무한루프(infinite loop)? 반복문이 무한 반복되는 것
* while 반복문의 경우 조건이 변하지 않는다면 무한히 반복 실행함
break 키워드? switch 조건문이나 반복문을 벗어날 때 사용
while (true) { } break
continue 키워드? 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
=> break, continue 키워드는 조건식을 적절하게 만들면 필요없는 구문임
=> 해당 키워드를 적당히 사용하면 코드가 간결해 보이지만, 그런 적당한 경우는 드묾
=> 해당 키워드가 필요 없는 부분에 무리하게 사용하는 경우가 있는데 최대한 자제할 수 있도록 주의해야 함
1. for in 반복문
for (const 반복 변수 in 배열 또는 객체) {
문장
}
- 배열 요소를 하나씩 꺼내 특정 문장을 실행할 때 사용
- for in 반복문은 아래와 같은 코드(stuffs[n] 등)를 추가해 사용해야 안정적(예상에서 벗어나지 않는 형태)으로 쓸 수 있는 조금 위험한 반복문임 => 따라서 for of, for 반복문을 활용하는 것이 더욱 좋음
- 입력 코드 1
<script>
const stuffs = ['노트북', '키보드', '마우스']
for (const i in stuffs) {
console.log(i)
}
</script>
- 출력 결과 1
- 입력 코드 2
<script>
const stuffs = ['노트북', '키보드', '마우스']
for (const i in stuffs) {
console.log(`${i}번째 준비물 : ${stuffs[i]}`)
}
</script>
- 출력 결과 2
2. for of 반복문
for (const 반복변수 of 배열 또는 객체) {
문장
}
- 요소의 값을 반복할 때 안정적으로 사용할 수 있음
- 입력 코드
<script>
const stuffs = ['노트북', '키보드', '마우스']
for (const stuff of stuffs) {
console.log(`준비물 : ${stuff}`)
}
</script>
- 출력 결과
+. for in/of 반복문 차이 확인
- 입력 코드
<script>
const array = ['사과', '배', '귤', '바나나']
console.log('# for in 반복문')
for (const i in array) {
console.log(i)
}
console.log('# for of 반복문')
for (const i of array) {
console.log(i)
}
</script>
- 출력 결과
3. for 반복문
for (let i = 0; i < 반복횟수; i++) {
문장
}
- 특정 횟수만큼 반복하고 싶을 때 사용하는 범용적인 반복문
1) for 반복문 기본
- 입력 코드
<script>
for (let i = 0; i < 5; i++) {
console.log(`${i}번째 반복입니다.`)
}
</script>
- 출력 결과
2-1) 1부터 100까지 더하기
- 입력 코드
<script>
let output = 0
for (let i = 1; i <= 100; i++) {
output += i
}
console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`)
</script>
- 출력 결과
2-2) 1부터 100까지 곱하기
- 입력 코드 : 2-1의 코드에서 output의 초기값 0을 1로 바꾸고, output += i를 output *= i로 바꾸면 됨
<script>
let output = 1
for (let i=1; i<=100; i++){
output *= i
}
console.log(`1~100까지 숫자를 모두 곱하면 ${output}입니다.`)
</script>
- 출력 코드
항등원(Identity)?
- 임의의 수 a와 어떤 수를 연산했을 때 a가 나오게 하는 그 어떤 수
- 어떤 대상에 여러 번 처리하는 코드를 작성할 때!
3) 배열 출력하기
- 입력 코드
<script>
const stuffs = ['노트북', '키보드', '마우스']
for (let i = 0; i < stuffs.length; i++){
console.log(`${i}번째 준비물 : ${stuffs[i]}`)
}
</script>
- 출력 결과
4) 반대 순서로 배열 출력하기
for (let i = 0; i < stuffs.length; i++)의 출력 결과의 순서를 반대로 하려면
for (let i = stuffs.length - 1; i >= 0; i--)
- 입력 코드
<script>
const stuffs = ['노트북', '키보드', '마우스']
for (let i = stuffs.length - 1; i >= 0; i--){
console.log(`${i}번째 준비물 : ${stuffs[i]}`)
}
</script>
- 출력 결과
4. while 반복문
while (불 표현식) {
문장
}
- if 조건문과 공통점? 형태가 매우 비슷
- if 조건문과 차이점? 문장을 한 번만 실행하고 끝나는 것이 아닌 불 표현식이 true면 계속해서 문장을 실행함
1) 무한 반복문
- 입력 코드
<script>
let i = 0
while (true) {
alert(`${i}번째 반복입니다.`)
i += 1
}
</script>
- 출력 결과 : 확인 버튼을 클릭할 때마다 숫자가 하나씩 증가하며 경고창이 계속 뜸
- 다른 프로그래밍 언어에서는 '데이터를 전달받을 때까지 기다린다'와 같은 목적으로 무한 반복문을 사용하기도 함
- JS에서 무한 반복을 사용하면 페이지 전체가 먹통이 되는 문제가 발생함
- break 구문 등을 활용해 반드시 무한 반복을 벗어나도록 코드를 구현해야 함
2) while 반복문 기본
- 입력 코드
<script>
let i = 0
while (confirm('계속 진행하시겠습니까?')) {
alert(`${i}번째 반복입니다.`)
i += 1
}
</script>
- 출력 결과 : 확인 버튼을 누르면 'i번째 반복입니다.' 경고창이 뜨고, 취소를 누르면 반복이 종료됨
3) 배열 출력하기
- 입력 코드
<script>
let i = 0
const arrays = [1, 2, 3, 4, 5]
while (i < arrays.length) {
console.log(`${i}번째 숫자 : ${arrays[i]}`)
i++
}
</script>
- 출력 결과
+. break 키워드
while (true) {
} break
- 입력 코드 : 몇 번째 반복문인지 경고창을 출력하고 사용자에게 한 번 더 반복 작업을 수행할지 묻는 프로그램
<script>
for (let i = 0; true; i++) {
alert(i + '번째 반복문입니다.')
const isContinue = confirm('계속 진행하시겠습니까?')
if (!isContinue) {
break
}
}
alert('프로그램 종료')
</script>
- 출력결과
+. continue 키워드
- 반복문 안의 반복 작업을 맘추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
- 입력 코드 : 0~10 사이의 짝수의 합 구하기
<script>
let output = 0
for (let i = 1; i <= 10; i++){
if (i % 2 === 1){
continue
}
output += i
}
alert(output)
</script>
- 출력 결과 : 홀수일 때는 continue 키워드를 만나 바로 다음 반복 작업으로 넘어가므로 짝수의 합(30)만 출력
@ 예제 문제
1-1) 피라미드 만들기(반쪽)
- 입력 코드 1 : 중첩 반복문 사용
<script>
let output = ''
for (let i = 0; i < 9; i++) { // 9줄의 피라미드를 만들어야 하므로 9번 반복
for (let j = 0; j < i + 1; j++){
output += '*'
}
output += `\n`
}
console.log(output)
</script>
- 입력 코드 2
<script>
let output = ''
let num = ''
for (let i = 0; i < 9; i++) {
output += '*'
num += output + `\n`
}
console.log(num)
</script>
- 출력 결과
- 이해하는 방법
1. 반복되는 코드는 'output +='이고, 9번 반복됨
=> for 반복문으로 i를 9번까지 반복
=> for (i = 0; i < 9; i++)
2. *은 1개씩 늘어나고, \n은 1개만 있는 형태임
=> output += '*'와 output += '\n'으로 분리해서 작성
3. *가 1개씩 늘어나는 것을 만들기 위해 반복문을 한 번 더 만듦
=> *는 j를 1번 반복, **는 j를 2번 반복, ***는 j를 3번 반복하는 즉, i + 1만큼 반복함
=> for (j = 0; j < i + 1; j++)
+. i가 1인 경우로 보면
=> for (let j = 0; j < 4; j++) { }를 2번 반복함
=> output은 '*\n**\n'로 아래의 형태를 출력됨
*
**
<script>
let output = ''
output += '*\n'
output += '**\n'
output += '***\n'
output += '****\n'
output += '*****\n'
output += '******\n'
output += '*******\n'
output += '********\n'
output += '*********\n'
</script>
1-2) 피라미드 만들기(반쪽, *의 개수가 홀수로 산출)
- 입력 코드 : 1-1번 문제의 코드에서 j < i + 1를 j < (2 * i +1)로 바꾸면 됨
<script>
let output = ''
for (let i = 0; i < 9; i++){
for (let j = 0; j < (2 * i + 1); j++){
output += '*'
}
output += '\n'
}
console.log(output)
</script>
- 출력 결과
1-3) 피라미드 만들기(반쪽, *의 개수가 짝수로 산출)
- 입력 코드 : 1-2번 문제의 코드에서 j < (2 * i +1)를 j < (2 * i)로 바꾸면 됨
<script>
let output = ''
for (let i = 0; i < 9; i++){
for (let j = 0; j < (2 * i); j++){
output += '*'
}
output += '\n'
}
console.log(output)
</script>
- 출력 결과
2) 피라미드 만들기
- 입력 코드
<script>
let output = ''
for (let i = 0; i < 14; i++) {
for (let j = 0; j < 13 - i; j++) { // for (let j = 14; j > i; j--)로 작성해도 됨
output += ' '
}
for (let k = 0; k < (2 * i + 1); k++){ // *가 1, 3, 5...개로 증가하려면 2*i에 1을 더하면 됨
output += '*'
}
output += '\n'
}
console.log(output)
</script>
- 출력 결과
3) 다이아몬드 만들기
- 입력 코드
<script>
let output = ''
for (let i = 0; i < 9; i++){
for (let k = 0; k < 9 - i; k++){
output += ' '
}
for (let j = 0; j < (2 * i + 1); j++){
output += '*'
}
output += `\n`
}
for (let i = 0; i < 10; i++){
for (let k = 0; k < i; k++){
output += ' '
}
for (let j = 0; j < (2 * (9 - i) + 1); j++){
output += '*'
}
output += `\n`
}
console.log(output)
</script>
- 출력 결과
※ [출처] 이 게시글은 복습의 목적으로 작성하였습니다. <혼자서 공부하는 자바스크립트(한빛미디어)>에서 발췌한 내용이 포함되어 있으니 자세한 내용은 꼭 해당 서적을 참고하셔서 학습 이해에 도움 받으시길 바라겠습니다.
'언어 > JavaScript' 카테고리의 다른 글
[혼공스] (JavaScript) 챕터3. 조건문(if, if else, 중첩, if else if, switch, 짧은 조건문, 조건부 연산자) (0) | 2022.11.01 |
---|---|
[혼공스] (JavaScript) 챕터2. 자료형, 상수, 변수, 자료형 변환 (0) | 2022.10.31 |
[혼공스] (JavaScript) 챕터1. JS 개요, 개발환경 설정, 기본용어 (0) | 2022.10.31 |