[JS] 코딩테스트 001~003 - 배열개념 정리
자바스크립트의 배열(Array) 은 여러 개의 값을 하나의 변수에 저장할 수 있는 객체 타입입니다.
배열의 선언 방법
let arr1 = []; // 빈 배열
let arr2 = [1, 2, 3, 4, 5]; // 숫자 배열
let arr3 = ["apple", "banana", "cherry"]; // 문자열 배열
let arr4 = new Array(3); // 길이가 3인 빈 배열
배열의 주요 속성
length : 배열의 길이를 반환
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // 3
배열의 주요 메서드
push() : 배열 끝에 요소 추가
pop() : 배열 끝 요소 제거
unshift() : 배열 앞에 요소 추가
shift() : 배열 앞 요소 제거
let numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]
numbers.pop(); // [1, 2, 3]
numbers.unshift(0); // [0, 1, 2, 3]
numbers.shift(); // [1, 2, 3]
배열의 순회(반복문)
let arr = ["A", "B", "C"];
// for 문
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// forEach()
arr.forEach((item, index) => {
console.log(index, item);
});
// map() (새로운 배열 반환)
let newArr = arr.map(item => item.toLowerCase());
console.log(newArr); // ["a", "b", "c"]
배열 변형 및 필터링
map() : 배열의 각 요소를 변환해 새로운 배열 생성
filter() : 조건에 맞는 요소만 필터링
find() : 조건을 만족하는 첫 번째 요소 반환
reduce() : 배열의 값을 누적하여 단일 값 반환
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
let firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2
let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
배열 정렬 및 변형
sort() : 배열 정렬 (문자열 기준이므로 숫자는 콜백 필요)
reverse() : 배열 순서 뒤집기
join() : 배열을 문자열로 변환
split() : 문자열을 배열로 변환
let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 오름차순 정렬
console.log(arr); // [1, 1, 3, 4, 5, 9]
arr.reverse();
console.log(arr); // [9, 5, 4, 3, 1, 1]
let words = ["Hello", "World"];
console.log(words.join(" ")); // "Hello World"
let str = "JavaScript,HTML,CSS";
let strArr = str.split(",");
console.log(strArr); // ["JavaScript", "HTML", "CSS"]배열 비구조화 할당 (Destructuring)
let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first); // "red"
console.log(second); // "green"
**splice에 대해서 더 자세히~!!!
splice()는 자바스크립트 배열에서 요소를 추가하거나 제거할 때 유용한 메서드(내장함수)
*기본문법
array.splice(start, deleteCount, item1, item2, ...);
| 매개변수 | 설명 |
| start | 변경을 시작할 인덱스 위치 |
| deleteCount | 삭제할 개수 |
| item1, item2, ... | 추가할 요소(생략 가능) |
2. splice()를 활용한 다양한 예제
1) 요소 삭제 ( splice(2, 2) → 2번 인덱스부터 2개 제거)
let nums = [10, 20, 30, 40, 50];
// 인덱스 2부터 2개 삭제 (30, 40 삭제)
nums.splice(2, 2);
console.log(nums); // [10, 20, 50]✅ splice(2, 2) → 2번 인덱스부터 2개 제거
2) 요소 추가 ( splice(1, 0, "orange") → 1번 인덱스에 "orange" 추가 (삭제 없음))
let fruits = ["apple", "banana", "cherry"];
// 인덱스 1에 "orange" 추가
fruits.splice(1, 0, "orange");
console.log(fruits); // ["apple", "orange", "banana", "cherry"]✅ splice(1, 0, "orange") → 1번 인덱스에 "orange" 추가 (삭제 없음)
3) 요소 교체 (삭제 후 추가) splice(1, 1, "yellow") → 1번 인덱스를 "yellow"로 교체
let colors = ["red", "green", "blue"];
// 인덱스 1의 요소("green")를 "yellow"로 교체
colors.splice(1, 1, "yellow");
console.log(colors); // ["red", "yellow", "blue"]✅ splice(1, 1, "yellow") → 1번 인덱스를 "yellow"로 교체
4) 여러 개 추가 및 삭제
let numbers = [1, 2, 3, 4, 5, 6];
// 인덱스 2부터 3개(3, 4, 5) 삭제하고, 새 요소 추가
numbers.splice(2, 3, 7, 8, 9);
console.log(numbers); // [1, 2, 7, 8, 9, 6]✅ splice(2, 3, 7, 8, 9) → 3, 4, 5를 삭제하고 7, 8, 9 추가
4) 배열 끝에서 삭제
let arr = [1, 2, 3, 4, 5];
// 마지막 2개 요소 삭제
arr.splice(-2, 2);
console.log(arr); // [1, 2, 3]✅ 음수 인덱스 사용 가능! -2부터 2개 삭제
5) 배열 끝에서 삭제
let arr = [1, 2, 3, 4, 5];
// 마지막 2개 요소 삭제
arr.splice(-2, 2);
console.log(arr); // [1, 2, 3]✅ 음수 인덱스 사용 가능! -2부터 2개 삭제
- splice(start, deleteCount, item1, item2, ...)
- 요소 삭제: splice(index, 개수)
- 요소 추가: splice(index, 0, 추가할 값)
- 요소 교체: splice(index, 1, 새로운 값)
- 원본 배열이 변경됨!
코드테스트01
* 문제1
* 배열의 삭제
*
* 다음 배열에서 400, 500를 삭제하는 code를 입력하세요.
* => 배열에서 지원하는 내장함수 사용하기let nums = [100, 200, 300, 400, 500];
■1번 (코드테스트 안내)
nums.pop();
nums.pop();
console.log(nums);* pop() 은 배열의 가장 마지막 요소를 삭제
■ 2번 (챗GPT 안내)
nums.splice(3,2); // 3번째 요소부터 2개 제거
console.log(nums);* 배열 nums의 세번째(3) 요소부터 해서 2개의 요소 삭제
■ 3번(챗GPT 안내)
let result = nums.filter(num => num !== 400 && num != 500);
console.log(result);* 400과 500을 제외하고 필터링(조건 필터링)
코드테스트02
* 문제2
* 배열의 내장함수
*
* 배열의 내장함수를 이용하여 코드를 입력하고 다음과 같이 출력되게 하세요!
* => 말로 정리하자면.....
* => 배열 arr 2번째 인덱스값으로 10000을 넣기
let arr = [200, 100, 300];
// 출력 결과
// [200,100,10000,300]arr.splice(2,0,10000);
console.log(arr);0은 삭제없이 삽입만 의미.
코드테스트03
* 문제3: 변수의 타입
* 다음 출력 값으로 올바른 것은?
*
* let arr = [100, 200, 300];
* console.log(typeof(arr));
let arr = [100, 200, 300];
console.log(typeof(arr));
/**
* 1) undefined
* 2) string
* 3) number
* 4) object
*
*
* => 정답 4) object
*/let myValue; // 변수를 선언만 하고, 값을 따로 할당하지 않을때...
console.log(myValue); // => 결과는 undefined
let myValue2 = null; // 변수를 선언하고 아직 이 변수에 아무값도 넣지 않겠다는 뜻 null
console.log(typeof(myValue2)); // => 결과는 null
console.log(typeof("abcde"));
console.log(typeof(false));
*위 포스팅은 챗GPT 답변을 토대로 작성되었습니다.