[JS] 배열

Cola Coca·2022년 7월 22일

JS

목록 보기
5/9

배열

  • 여러 데이터를 순차적으로 나열한 자료구조이다.
    => 배열도 객체이다. 배열과 관련된 프로퍼티와 메서드를 제공한다.
  • 배열에 포함되어 있는 데이터를 요소(element)라고 부른다.
  • 배열에 있는 데이터를 읽을 때는 인덱스(index)를 사용해 참조한다.
  • JS의 배열은 여러 자료형의 데이터를 한 배열에 담을 수 있다.

기본 사용법

  1. 배열 생성 및 값 참조
  • []안에 넣고 싶은 여러개의 값을 ,로 구분해 생성한다.
    => 배열은 순서로 값을 구분한다. 즉, 데이터를 입력하는 순서도 중요하다.
    => 중복된 값은 허용한다.
  • 배열에 있는 데이터를 참조할 때는 배열[인덱스]의 구조로 참조한다.
    => 인덱스는 0부터 시작한다. 즉, 배열[0]은 첫번째 요소를 참조한다.
  • 배열의 length 프로퍼티를 통해 배열의 길이(배열이 가진 요소의 개수)를 참조할 수 있다.
// 요소로 1,2,3 총 3개의 요소를 가진 배열 생성
let arr = [1,2,3];
// 배열의 인덱스 1 즉, 두번째 요소를 참조
console.log(arr[1]); // 2 출력
// arr.length 프로퍼티를 통해 배열의 길이(배열이 가진 요소의 개수)를 참조
console.log(arr.length); // 3 출력
  1. 배열 값 추가 및 삭제
  • 배열[인덱스] = 값; 의 형태로 원하는 인덱스에 값을 추가할 수 있다.
  • 이미 값이 있는 인덱스에 추가하면 새로운 값이 기존 값을 덮는다.
  • delete 키워드를 통해 요소를 삭제할 수 있다.
let fruits = ["apple", "banana", "grape"];

// fruits[3]에 "peach" 추가
fuirts[3] = "peach";
console.log(fruits) // ["apple", "banana", "grape", "peach"] 출력

// fruits[0]의 값을 기존 "apple"에서 "orange" 로 갱신  
fruits[0] = "orange";
console.log(fruits[0]) // "apple" 출력

// fruits[1]의 값 "banana" 삭제
delete fruits[1];
console.log(fruits) // ["orange", "grape", "peach"] 출력

배열 관련 메서드

  1. Array.prototype.push, Array.prototype.pop
  • push : 배열의 마지막에 요소들을 추가한다.
    => 변경된 length 값을 반환한다.
  • pop : 배열의 마지막 요소 1개를 제거한다.
    => 제거된 요소를 반환한다.
  • push와 pop 모두 원본 배열을 직접 변경한다.
  • 원본 배열이 변경된다.
let numArr = [1,2,3];

// numArr 배열의 마지막 요소로 1과 2를 추가
let pushResult = numArr.push(4,5); // 변경된 numArr의 length 값 5 반환
console.log(pushResult); // 5출력
console.log(numArr); // [1,2,3,4,5] 출력

let popResult = numArr.pop(); // numArr의 마지막 요소 5를 제거 후 제거 된 요소를 반환 
console.log(popResult);
console.log(numArr); // [1,2,3,4] 출력
  1. Array.prototype.unshift, Array.prototype.shift
  • unshift : 배열의 시작에 요소들을 추가한다.
    => 변경된 length 값을 반환한다.
  • shift : 배열의 시작 요소 1개를 제거한다.
    => 제거된 요소를 반환한다.
  • unshift와 shift 모두 원본 배열을 직접 변경한다.
  • 원본 배열이 변경된다.
let numArr = [3,4];

// numArr 배열의 시작 요소로 1과 2를 추가
let unshiftResult = numArr.unshift(1,2); // 변경된 numArr의 length 값 5 반환
console.log(pushResult); // 4출력
console.log(numArr); // [1,2,3,4] 출력

let shiftResult = numArr.shift(); // numArr의 첫번째 요소 1을 제거 후 제거 된 요소를 반환 
console.log(sihtResult); // 1 출력
console.log(numArr); // [2,3,4] 출력
  1. Array.prototype.splice
  • 배열의 중간에 요소를 제거 및 추가를 한다.
  • 인자로는 시작 인덱스, 삭제할 개수, 추가할 값(선택사항)...을 전달 받는다.
    => 삭제할 개수를 0으로 지정하면 배열의 중간에 요소를 추가만 할 수 있다.
  • 제거한 요소가 배열로 반환된다.
  • 원본 배열이 변경된다.
let numArr = [1,20,30,4,5];
// 두번째 인덱스부터 2개를 삭제후 2,3을 추가 후 제거한 요소 20,30을 배열로 반환
let result = numArr.splice(1,2,2,3);
console.log(result); // [20,30] 출력
console.log(numArr); // [1,2,3,4,5] 출력
  1. Array.prototype.slice
  • 배열의 요소를 지정한 범위만큼 복사하여 배열로 반환한다.
  • 인자로는 시작 인덱스, 끝 인덱스 값을 받는다.
    => 끝 인덱스의 요소는 복사에 포함되지 않는다.
    => 시작 인덱스 값만 전달할 경우 배열의 끝까지 복사를 한다.
  • 원본 배열은 변경되지 않는다.
let dogArr = ["coco", "happy", "choco"];

// dogArr의 요소를 dogArr[0]부터 dogArr[2] 이전까지의 요소를 복사하여 배열로 반환
let newDogArr = dogArr.slice(0,2);
console.log(newDogArr); // ["coco", "happy"] 출력
  1. Array.prototype.indexOf
  • 인자로 전달된 값이 인덱스 값을 반환한다.
    => 인자로 전달된 값이 배열에 존재하지 않으면 -1 반환한다.
    => 반환된 값이 -1 인지 확인하여 요소의 존재 여부 확인 가능하다.
let brandArr = ["nike", "adidas", "puma"];

// brandArr 배열 안의 "adidas"의 인덱스 값 1 반환
console.log(brandArr.indexOf("adidas")); // 1출력
]
// brandArr 배열 안에 "new balance"가 없으므로 -1 반환
console.log(brandArr.indexOf("new balance")); // -1 출력
  1. Array.prototype.includes
  • 전달된 인자가 배열에 존재하는지 true, false로 반환한다.
    => 요소의 존재여부만 확인할 때는 indexOf() 메서드 보다 가독성이 더 좋다.
let compnayArr = ["apple", "samsung", "lg"];

// compnayArr에 "apple"이 존재하므로 true 반환
console.log(companyArr.includes("apple")); // true 출력
// companyArr에 "black berry"가 없으므로 false 반환
console.log(companyArr.includes("black berry"); // false 출력

배열의 고차함수

  • 고차함수란 함수를 인자로 받거나 함수를 반환하는 함수이다.
  • 배열의 고차함수를 통해 각 요소를 순회하며 각 요소에 대한 데이터 처리를 할 수 있다.
  • 성능은 for()문이 더 좋지만 배열의 고차함수가 가독성이 훨씬 좋다.
  1. Array.prototype.forEach
  • 각 요소를 순회하며 주어진 콜백함수를 실행한다.
  • 콜백함수의 첫번째 인자로 현재 요소를, 두번째 인자로 현재 요소의 인덱스값을 전달한다.
  • forEach는 중간에 탈출할 수 없으므로 특정조건에 탈출해야하는 경우는 for() 문이 더 적절할 수 있다.
let numArr = [1,2,3,4,5];
// 각 요소에 2를 곱해 콘솔창에 출력
numArr.forEach(function(num, idx){
	console.log(idx, num * 2);
});

// 같은 코드를 for문으로 실행
for(let i = 0;i < numArr.length; i++) {
	console.log(i, numArr[i] * 2);
}

2.Array.prototype.filter

  • 각 요소를 순회하며 콜백함수의 return값이 true인 요소들만 모아 새로운 배열을 반환한다.
    => 원본 배열을 변경하는 것이 아니라 새로운 배열을 반환한다.
  • 콜백함수의 첫번째 인자로 현재 요소를, 두번째 인자로 현재 요소의 인덱스값을 전달한다.
let numArr = [-1,2,3,4,-5,6,10,-20,30,];
// 0보다 큰 숫자만 모아서 새로운 배열을 result 변수에 할당
let result = numArr.filter(function(num){
  return num > 0;
});
console.log(result); // [2,3,4,6,10,30] 출력

// 같은 코드를 for문으로 실행
let result02 = [];
for(let i = 0; i < numArr.length;i++){
	if(numArr[i] > 0) {
      result.push(numArr[i]);
    }
}
console.log(result02);
  1. Array.prototype.map
  • 각 요소를 순회하며 콜백함수의 return 값을 모아 새로운 배열로 반환한다.
    => 원본 배열을 변경하는 것이 아니라 새로운 배열을 반환한다.
  • 배열의 각 요소를 가공해 새로운 데이터로 만들 때 사용한다.
  • 콜백함수의 첫번째 인자로 현재 요소를, 두번째 인자로 현재 요소의 인덱스값을 전달한다.
let numArr = [1,2,3,4,5];
// numArr의 각 요소에 2를 곱한 값을 모아 새로운 배열로 반환
let result = numArr.map(function(num){
	return num * 2;
});
console.log(result); // [2,4,6,8,10] 출력

// 같은 코드를 for문으로 실행
let result02 = [];
for(let i = 0; i < numArr.length; i++) {
	result02.push(numArr[i] * 2);
}
  1. 콜백함수를 화살표 함수로 전달
  • 화살표 함수를 콜백함수로 등록하면 코드를 더 간략하게 표현할 수 있다.
    => 화살표 함수는 코드블록을 생략하면 값이 return되어 한줄로 표현 가능하다.
let numArr = [1, 2, 3, 4, 5];
// numArr 각 요소에 2를 곱한 값을 모아서 result 변수에 할당
let result = numArr.map(num => num *2);
console.log(result); // [2,4,6,8,10] 출력

유사배열

  • 이름처럼 배열과 유사한 객체를 말한다. 배열처럼 length 프로퍼티를 가지고 인덱스 값으로 참조를 하지만 배열의 메서드를 가지지 않는다.
  • 배열처럼 여러 데이터를 나열해서 반환하고 싶은데 배열의 메서드를 제공하고 싶지 않거나 배열에 없는 기능을 제공하고자 할 때 사용한다.
    => 대표적으로 querySeletorAll() 함수가 반환하는 NodeList가 있다.
  • Array.from() 혹은 스프레드 문법을 통해 유사배열을 배열로 바꿀 수 있다.
  1. Array.from()
  • 인자로 유사배열을 전달하면 배열로 반환한다.
  • Array 내장객체에서 호출한다.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
let boxList = document.querySelector(".box");
console.log(boxList); // NodeList(3)[div.box, div.box, div.box]

let boxArray = Array.from(boxList);
console.log(boxArray); //Array(3) [div.box, div.box, div.box];
  1. 스프레드 문법
  • 스프레드 문법을 사용해 배열로 바꾼다.
  • ...배열은 배열을 펼쳐서 나열한다.
    => [] 안에서 스프레드 문법을 사용하면 새로운 배열에 기존 배열을 펼쳐서 복사하는 효과있다.
    => 반복(iterable) 가능한 객체(배열, 유사배열 등)는 스프레드 문법을 사용할 수 있다.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
let boxList = document.querySelector(".box");
console.log(boxList); // NodeList(3)[div.box, div.box, div.box]

let boxArray = [...boxList];
console.log(boxArray); //Array(3) [div.box, div.box, div.box];
profile
Cola Coca
이전 포스트

[JS] 객체

다음 포스트

[JS] DOM

0개의 댓글