일본 여행이슈로 새벽에 급하게 혼공단 합니당..
배열
[요소, 요소, 요소, ..., 요소]
> const array = [273, 'String', true, dunction () {}, {} , [273, 103]]
undefinde
> array
(6) [273, "String", true, f, {...}, Array(2)]
//요소 개수 , 요소
배열 요소에 접근하기
배열[인덱스]
> const number = [273, 52, 103, 32]
undefined
> numbers[0]
273
> numbers[1]
52
> numbers[1 + 1]
103
> numbers[1 * 3]
32
배열 요소에 개수 확인하기
배열.length
> const fruits = ['배', '사과', '키위', '바나나'] // 배열 이름을 복수형으로 짓습니다.
undefined
> fruits.length
4 // 배열 fruits에 4개의 요소가 들어있으므로 4를 출력합니다.
> fruits[fruits.length -1]
"바나나" // fruits[4-1], 배열의 3번째 요소인 "바나나"를 출력합니다.
배열 뒷부분에 요소 추가하기
배열.push(요소)
> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
undefined
> todos
(3)["우유 구매", "업무 메일 확인하기", "필라테스 수업"]
> todos.push('저녁 식사 준비하기')
4
> todos.push('피아노 연습하기')
5
> todos
(5) ["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기", "피아노 연습하기"]
배열 요소 제거하기
인덱스를 기반으로 제거
- 배열.splice(인덱스, 제거할 요소의 개수)
> const itemsA = ['사과', '배', '바나나']
undefined
> itemsA.splice(2,1)
["바나나"]
> itemsA
(2) ["사과", "배"]
값을 기반으로 제거
- const 인덱스 = 배열.indexOf(요소)
- 배열.splice(인덱스, 1)
> cosnt itemsB = ['사과', '배', '바나나']
undefined
> cosnt index = itemsB.indexOf('바나나')
undefined
> index
2
> itemsB.splice(index, 1)
["바나나"]
> itemsV
(2) ["사과", "배"]
> itemsB.indexOf('바나나')
-1
배열의 특정 위치에 요소 추가하기
배열.splice(인덱스, 0, 요소)
> const itemsD = ["사과", "귤", "바나나", "오렌지"]
undefined
> itemsD.splice(2, 0, "양파")
[]
> itemsD
(5) ["사과", "양파", "귤", "바나나", "오렌지"]
for in 반복문
for(const 반복 변수 in 배열 또는 객체) {
문장
}
for of 반복문
for(const 반복 변수 of 배열 또는 객체) {
문장
}
for 반복문
for(let i=0; i<반복 횟수; i++) {
문장
}
while 반복문
while(boolean 표현식) {
문장
}
break 키워드
while(true) {
} break
continue 키워드
누적예제
- 중첩반복문을 사용하는 피라미드
<html>
<head>
<title>중첩 반복문 사용하기(1)</title>
</head>
<script>
// 변수 선언합니다.
let output = ''
// 중첩 반복문
for(let i=1; i<10; i++) {
for(let j=0; j<i; j++) [
output += '*'
]
output += '\n'
}
// 출력합니다.
console.log(output)
</script>
<body>
</body>
</head>
</html><html>
<head>
<title>중첩 반복문 사용하기(2)</title>
</head>
<script>
// 변수 선언합니다.
let output = ''
// 중첩 반복문
for(let i=1; i<15; i++) {
for(let j=15; j>i; j--) [
output += ' '
]
for(let k=0; k<2*i-1; k++) {
output += '*'
}
output += '\n'
}
// 출력합니다.
console.log(output)
</script>
<body>
</body>
</head>
</html>+ git https://github.com/dltjdud-0225/13gi_hongong_js.git
기본 미션
비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
- 파괴적(destructive) 처리: 처리 후에 원본 내용이 변경되지 않습니다.
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // 원본 배열 복사 후 새 요소 추가
console.log("Original:", originalArray); // [1, 2, 3]
console.log("New:", newArray); // [1, 2, 3, 4]- 비파괴적(non-destructive) 처리: 처리 후에 원본 내용이 변경됩니다.
const originalArray = [1, 2, 3];
originalArray.push(4); // 원본 배열에 직접 추가
console.log("Original:", originalArray); // [1, 2, 3, 4]
| 구분 | 비파괴적 처리 | 파괴적 처리 |
| 원본 데이터 | 유지 | 수정 |
| 새로운 데이터 | 생성됨 (메모리 사용 증가) | 생성되지 않음 (메모리 효율적) |
| 안전성 | 높음 | 낮음 |
| 속도 | 상대적으로 느림 (복사 과정 필요) | 상대적으로 빠름 |
| 예제 코드 | const newArray = [...originalArray, 4]; | originalArray.push(4); |
| 사용 용도 | 원본 데이터 보존이 필요한 경우 | 메모리 효율이 중요하거나 원본 수정이 괜찮은 경우 |
| 구분 | 비파괴적 처리 | 파괴적 처리 |
| 장점 | 원본 데이터 유지로 안전성 높음 | 메모리 사용이 효율적 |
| 데이터 변경 이력 추적 가능 | 처리 속도가 빠름 (데이터 복사 불필요) | |
| 디버깅 및 유지보수 용이 | 코드가 간결해질 수 있음 | |
| 단점 | 새로운 데이터 생성으로 메모리 사용 증가 | 원본 데이터 수정으로 예기치 못한 부작용 위험 |
| 대량 데이터 처리 시 성능 저하 가능 | 디버깅 및 변경 이력 추적 어려움 | |
| 사용 예시 | 복잡한 연산, 원본 보존 필요 시 | 단순 연산, 메모리 제한 환경에서 유리 |
선택미션
p. 173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기
|
① 비파괴적 처리: strA 가 보존
|
② 파괴적 처리: arrayB 가 변경
|
|
> const strA = "사과,배,바나나,귤"
> strA.split(",")
(4) ["사과", "배", "바나나", "귤"]
> strA
"사과,배,바나나,귤"
|
> const arrayB = ["사과", "배", "바나나", "귤"]
> arrayB.push("감")
5
> arrayB
(5) ["사과", "배", "바나나", "귤", "감"]
|
|
③ 비파괴적 처리: arrayC 가 보존
|
④ 비파괴적 처리: strD 가 보존
|
|
> const arrayC = [1, 2, 3, 4, 5]
> arrayC.map((x) => x * x)
(5) [1, 4, 9, 16, 25]
> arrayC
[1, 2, 3, 4, 5]
|
> const strD = " 여백이 포함된 메시지 "
> strD.trim()
"여백이 포함된 메시지"
> strD
" 여백이 포함된 메시지 "
|
'13기 혼공단(js)' 카테고리의 다른 글
| [혼공JS] 5주차 (1) | 2025.02.16 |
|---|---|
| [혼공JS] 4주차 (0) | 2025.02.09 |
| [혼공JS] 2주차 (0) | 2025.01.19 |
| [혼공JS] 1주차 (0) | 2025.01.11 |