[JS] 배열 (추가 삭제 메소드)

만분의 일·2022년 6월 1일
0

JavaScript

목록 보기
1/1
post-thumbnail

Array (배열)

특정한 요소(element)들을 일정하게 모아 놓은 집합

  • 메모리 상에 데이터를 연속하게 배치한 자료구조
let myArray = [19, 44, 'good', false]

특징

  • 배열에 들어 갈 수 있는 데이터에는 제한이 없다.
    • 하지만 주로 동일한 데이터 타입을 나열하는 용도로 사용한다.
    • 배열 안에 다른 배열이 들어갈 수도 있다.
      let arr = [1,2,'hi', [100,200,300], false]
      
      console.log(arr[3]); // [100,200,300]
      console.log(arr[3][0]);// 100, 3번째 요소의 0번째 위치 
  • 배열에는 순서가 있다.
    • 값을 순차적으로 저장한다.
let arr = [19, 44, 'good', false]; // 각각 0 , 1, 2, 3번째 요소
let first = arr[0];

console.log(first) // 19 출력
console.log(arr[1]) // 배열의 요소에 접근하기, 44 출력
arr[0]; = 500 // 배열의 요소에 새로운 값 할당, 19 -> 500

console.log(arr.length) // 배열의 길이(요소의 개수)확인하기
arr[arr.length-1]; // 마지막 요소에 접근

배열의 요소 추가, 삭제 메서드

배열의 처음 혹은 마지막 위치에 요소를 추가하거나 제거하는 메서드

  • push 메서드: 배열의 마지막 위치에 요소 추가
    • pop 메서드로 되돌릴 수 있다.
    • 여러가지 요소를 함께 추가 할 수 있다.
	let arr = [11,12,13];
	let arr2 = [18, 19, 20];

	arr.push(14); // arr에 단일 요소 추가
	arr.push(15,16,17); // arr에 여러 요소 추가
	arr.push(arr2); // 배열 arr에 배열 arr2가 추가, [11, 12, 13, 14, 15, 16, 17, [18, 19, 20]] 
  • spread 연산자: spread(…) 연산자를 push메서드와 함께 사용해서 요소를 추가하고, 새로운 배열을 생성할 수 있다.
    • concat 연산자와 매우 유사하다.
	let arr = [11,12,13];
	let arr2 = [18, 19, 20];
	
	arr.push(...arr2); // Spread 연산자로 요소 추가, [11, 12, 13, 18, 19, 20]
	
	let arr3 = [...arr, arr2] // 새로운 배열 생성, [11, 12, 13, 18, 19, 20]
  • unshift 메서드: 배열의 첫 번째 위치에 요소를 추가
	let arr = [11,12,13];
	arr.unshift(10);
	arr.unshift(7,8,9);
	console.log(arr); // [7, 8, 9, 10, 11, 12, 13]

	let arr1 = [1,2,3];
	let arr2 = [4,5,6];

	arr1.unshift(-1,0); 
	console.log(arr1); //  [-1,0,1,2,3]

	arr1.unshift(...arr2);
	console.log(arr1); // [4, 5, 6, -1, 0, 1, 2, 3]
  • splice 메서드: 요소를 추가/ 제거하여 배열의 내용을 수정할 수 있다
    • 첫 번째 인수는 추가 또는 제거할 배열 요소의 위치(인덱스)를 설정한다.
    • 두 번째 인수는 제거할 배열 요소의 개수를 설정한다.
    • 세 번째 인수부터는 추가할 요소
    • 삭제된 요소를 반환한다.
    • 주로 댓글 삭제 기능에서 사용된다.
	let arr = ["a","b","c","d"]
	arr.splice(1,0,'E','F'); // 첫번째 요소부터 0개의 배열 요소를 제거하고 'E','F'를 추가

	console.log(arr); // ["a", "E", "F", "b", "c", "d"]

	let arr1 =[1,2,3,4]
	arr1.splice(0,3,"hi"); // 0번째 위치부터 3개의 배열 요소 제거하고 "hi"추가

	console.log(arr1); // ["hi",4]

	// 인자를 2개를 사용해서 특정 요소를 삭제할 수도 있다
	let arr = [1,2,3,4,5];
	arr.splice(0,2);
	console.log(arr); // [3,4,5]
	
	// 삭제된 요소를 반환한다.
	let arr = [1,2,3,4,5];
	let result = arr.splice(0,2);
	console.log(arr); // [3,4,5]
	console.log(result); // [1,2]
  • pop 메서드: 배열의 마지막 위치의 요소 제거
	let arr = [11,12,13];
	arr.pop()
	arr.pop()
	console.log(arr); // [11] 요소가 1개여도 여전히 배열
  • shift 메서드: 배열의 첫 번째 요소를 제거
	let arr = [11,12,13];
	arr.shift();
	console.log(arr); // [12, 13]

배열이 필요한 이유는? 🤷‍♀️

  • 배열을 사용하면 요소의 주소를 나타내는 ‘인덱스(index)’를 통해 원하는 요소에 빠르게 접근, 검색이 가능하다.

    배열은 선언되면 자료형에 따라 한 배열 항목의 크기가 결정된다.
    4byte인 데이터 타입 int를 담는 배열을 선언한다면, 항목 크기 역시 4byte가 된다.

    배열의 기본 주소는 배열의 맨 처음 부분을 가리키고, 블럭 단위로 메모리를 차지한다.
    따라서 "기본 주소 + (항목 크기 * index)"로 특정 인덱스에 위치한 항목에 접근 할 수 있다.

    예를 들어 int배열 5번 index에 접근할 때에는 (기본 주소 + 4 x 5)를 계산한 결과로 나온 메모리를 찾아 가면된다.
    때문에 위치에 상관 없이 한 번의 연산으로 항목을 찾아갈 수 있어 접근 속도가 빠르다.

  • 추가적으로 소모되는 메모리 양이 거의 없다.

참고
배열의 추가 삭제 메서드1
배열의 추가 삭제 메서드2
배열의 접근 방법

profile
1/10000이 1이 될 때 까지

0개의 댓글