혼공단이 시작한지 어연 3주가 되었고, 지난주 조건문에 이어서 이번주에는 배열과 반복문에 대해서 나온다.
이 책을 읽으며 다음으로 읽고 싶은 책을 찾았다. SRE를 위한 시스템 설계와 구축 이라는 책이다. 이 책 역시 한빛미디어에서 번역했고,내가 현재 가장 관심있는 분야이지만 잘 모르는 분야라 많이 도움이 될 것같아서 얼른 읽고싶은 기대가 크다 :-)
1. 배열
- 배열(array) : 여러 개의 변수를 한 번에 선언해서 다룰 수 있는 자료형
- 인덱스 : 배열 요소의 순서로 0번부터 시작한다.
배열.length: 배열 내부에 들어있는 요소의 개수를 확인할 때 사용배열.push(요소): 배열의 뒷부분에 요소를 추가할 때 사용
> const str = '안녕하세요'
> str[2]
'하'
# str.length = 5
> str[str.length-1]
'요'
> const fruits = ['사과', '배', '바나나']
Undefined
> fruits.push('포도')
4
> fruits[4] = '딸기'
"딸기"
> fruits
(5) ["사과", "배", "바나나", "포도", "딸기"]
배열.splice(인덱스, 제거할 요소의 개수): 배열의 요소를 제거하거나 요소를 중간에 넣을 때 사용indexOf(): 메서드를 이용하여 값의 위치를 찾아내서 splice() 메소드를 사용해서 제거하는 방법도 있다.- 비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않는 처리
- 파괴적 처리 : 처리 후에 원본 내용이 변경되는 처리
✅ 기본 미션
비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
1. 비파괴적 처리(Non-destructive)
- 의미 : 처리 후에 원본 내용이 변경되지 않는다.
- 장점 : 원본 데이터를 갖고 있어서 언제든 원본 데이터를 확인할 수 있다.
- 단점 : 파괴적 처리에 비해 원본데이터를 갖고 있어서 메모리를 많이 차지한다.
2. 파괴적 처리(Destructive)
- 의미 : 처리 후에 원본 내용이 변경된다.
- 장점 : 메모리를 절약할 수 있다.
- 단점 : 원본 데이터가 사라진다는 것이 치명적으로 다가올 수 있다.
확인 문제
- 다음 배열들의 2번째 인덱스에 있는 값을 찾아보자.
- 1). "3"
- 2). "바나나"
- 3). 32
- 다음 코드의 실행 결과를 예측해보자.
예상 답). 4, 5
✅ 선택 미션
(p.173 확인 문제 3번 문제를 풀고, 풀이 과정 설명하기)
- 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 O표시 하세요.
-
1). 비파괴적 처리
맨 첫 줄에 선언한strA = "사과,배,바나나,귤"이 마지막 strA를 호출했을 때 변하지 않았으므로 비파괴적 처리이다. -
2). 파괴적 처리
arrayB = ["사과", "배", "바나나", 귤"]배열이 push("감")으로 인해서 변경되었으므로 파괴적 처리이다. -
3). 비파괴적 처리
arrayC에 대해서 중간에 map 메서드를 이용한 처리가 있었지만, 사실상 원본 arrayC 에 대해서는 변경사항이 없으므로 비파괴적 처리이다. -
4). 파괴적 처리
strD는 앞과 뒤에 여백이 있었지만, trim() 메서드는 앞과 뒤의 여백이 있을 경우 지워주기 때문에 원본에 변경이 생겨서 파괴적 처리이다.
2. 반복문
자바스크립트에는 기본적인 for 반복문외에 for in, for of 반복문이 존재한다.
1). for in 반복문
- 배열과 함께 사용할 수 있는 반복문
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
// const 반복 변수 in 배열/객체
for (const i in todos) {
console.log(`${i}번째 할 일: ${todos[i]}`);
}2). for of 반복문
for in반복문에서는 반복 변수에인덱스가 들어가는데, 안정성을 위해 몇 가지 코드를 더 추가해서 나온 것이for of반복문 이다. 요소의 값을 반복할 때 안정적으로 사용하라 수 있다.
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
// const 반복 변수 in 배열/객체
for (const todo of todos) {
console.log(`오늘의 할 일: ${todo}`);
}3). for 반복문
기본적으로 우리가 알고 있는 for 반복문형태이다.
for (let i = 0; i < 반복 횟수; i++) {
// 반복할 동작
}4). while 반복문
while (bool 표현식) {
// 반복할 동작
}5). break 키워드
- 조건문이나 반복문을 벗어날 때 사용하는 키워드
for (let i = 0; i < 5; i++) {
alert(i + '번째 반복문');
// 반복문을 돌다가 i=3 이되면 멈춤
if (i == 3) { break; }
}6). continue 키워드
- 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가서 다음 반복 작업을 진행한다.
for (let i = 0; i < 5; i++) {
continue;
alert(i);
}위의 코드는 alert() 함수를 한 번도 실행하지 않고 종료된다.
확인 문제
- 다음 프로그램의 실행 결과를 예측해보자.
<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>
✨ 만약, for in 반복문에서도 사과, 배, 귤, 바나나 처럼 출력하고 싶다면, console.log(array[i]); 로 출력하면 된다.
- 다음 프로그램의 실행 결과를 예측해보고, 오류를 수정해보자.
✅ 책에 나와있는데로 실행을 하면 아래와 같은 오류가 난다.
for 반복문의 경우, i의 값이 계속해서 바뀐다.
그런데 책의 예시에서는 for 문에서 사용하는 변수의 값을 const로 선언해서 i의 값을 변경불가능으로 지정했기때문에 위와 같은 constant variable 에러가 난다.
그래서 for문에서 사용하는 i를 let으로 선언하면 잘 작동한다.
<script>
const array = [];
for (let i = 0; i < 3; i++) {
array.push((i+1) * 3);
}
console.log(array);
</script>
- 1 ~ 100 까지 숫자를 모두 곱한 값을 계산하는 프로그램을 작성해보자.
<script>
let output = 0;
output = 1;
for (let i = 1; i < 101; i++) {
output *= i;
}
console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`);
</script>
- 별찍기 코드 작성하기
<script>
let output = '';
const size = 5;
// 반복문
for (let i = 1; i < 10; i++) {
if (i < 5) {
for (let j = i; j < 5; j++) {
output += ' ';
}
for (let h = 0; h < 2 * i - 1; h++) {
output += '*';
}
}
else if (i > 5) {
for (let j = i - 5; j > 0; j--) {
output += ' ';
}
for (let h = 0; h < (10-i) * 2 - 1; h++) {
output += '*';
}
}
else {
output += '*********'
}
output += '\n';
}
console.log(output);
</script>