Javascript의 "배열(Array)"
오늘은 자바스크립트에서 배열(Array)를 이용하여 여러 개의 값을 저장하고 관리하는 방법,
자바스크립트의 배열과 배열 메소드에 대해 학습하였다.
1. 배열 생성
1-1. 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"];이 예제는 배열 fruits 를 생성한 예제이다. 배열을 생성할땐 대괄호 [ ~~~ ] 를 사용하고, 각 요소들은 쉼표( , )로 구분한다.
1-2. 배열의 크기 지정
let numbers = new Array(5);이 예제는 크기가 5인 배열 numbers를 생성한다. new Array( )를 사용하여 배열의 크기를 지정 가능하다.
2. 배열 요소 접근
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"이 예제는 배열 fruits의 1번째 요소부터 3번째 요소까지 출력한다. 배열의 요소에 접근하고 싶다면, 대괄호 [ ] 안에 인덱스 값을 입력하면 된다.
3. 배열 메소드
3-1. push( ) 메소드
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // ["사과", "바나나", "오렌지"]이 예제는 push( ) 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가한 것이다.
push( ) 메소드는 배열의 끝에 요소를 추가하는 것이다.
3-2. pop( ) 메소드
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits); // ["사과", "바나나"]이 예제는 pop( ) 메소드를 사용하여 배열 fruits의 마지막 요소를 삭제했다.
pop( ) 메소드는 배열의 마지막 요소를 삭제하는 것이다.
3-3. shift( ) 메소드
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]이 예제는 shitf( ) 메소드를 사용해, 배열 fruits의 1번째 요소를 삭제한 것이다.
shift( ) 메소드는 배열의 첫 번째 요소를 삭제한다.
3-4. unshift( ) 메소드
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]이 예제는 unshift( ) 메소드를 사용해 배열 fruits의 맨 앞에 "사과"를 추가했다.
unshift( ) 메소드는 배열의 맨 앞에 요소를 추가한다.
3-5. splice( ) 메소드
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits); // ["사과", "포도", "오렌지"]이 예제는 splice( ) 메소드를 사용해서 인덱스 값 1 부터, 1 개의 요소를 제거하고 해당 위치에 "포도"를 추가했다.
splice( ) 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다.
3-6. slice( ) 메소드
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits); // ["바나나"]이 예제는 slice( ) 메소드를 이용하여, 배열 fruits의 1번째 인덱스 값부터, 2번째 인덱스 값 전까지를 새로운 배열로 만든다.
slice( ) 메소드는 배열의 일부분을 새로운 배열로 만든다.
3-7. forEach( ) 메소드
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// 1
2
3
4
5이 예제는 forEach( ) 메소드를 사용해서 배열 numbers의 모든 요소를 출력한다.
forEach( ) 메소드는 배열의 각 요소에 대해 콜백 함수를 실행한다.
3-8. map( ) 메소드
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]이 예제는 map( ) 메소드를 사용해 배열 numbers의 모든 요소를 제곱한 새로운 배열을 생성한다.
map( ) 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환한다.
3-9. filter( ) 메소드
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]이 예제는 filter( ) 메소드를 이용해 배열 numbers에서 짝수만 추출해 새로운 배열을 만든다.
filter( ) 메소드는 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환한다.
3-10. find( ) 메소드
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
return number > 3;
});
console.log(foundNumber); // 4이 예제는 find( ) 메소드를 이용해 배열 numbers에서 3보다 큰 첫 번째 요소를 찾는다.
find( ) 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환한다.
3-11. sort( ) 메소드
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]이 예제는 sort( ) 메소드를 사용해서 배열 numbers를 오름차순으로 정렬한다.
sort( ) 메소드는 배열의 요소를 정렬한다.
배열에 대해선 쉽게 이해했지만, 배열의 메소드를 통해 원하는 값을 얻어내거나 뽑아내는건
아직까지 쉽게 응용하지 못할 것 같았다.
그래도 배열에 사용할 수 있는 메소드들이 어떤게 존재하는지
한번 둘러보고 감을 익힐 수 있어서 좋았다.
다음은 es6, 일급객체로서의 함수, Map과 Set에 대해 학습할 예정이다.
갈수록 헷갈리고 어려워지는 개념들이 많은만큼
매일 배운 내용들을 복습하는게 정말 중요할 것 같다.