11. 배열

연우·2023년 1월 13일
MapSOMESortarrayeveryfilterfindfindIndexflatmapforeachreduce배열
0

드림코딩

목록 보기
8/15
post-thumbnail

자료구조, 배열이란?

자료구조 Data Structure

  • 여러가지의 객체의 집합체를 나타냄

배열 Array

  • 연속된 메모리 공간에 순차적으로 저장된 데이터 모음
  • 동일한 타입의 데이터를 담아두는 것이 좋음

배열 생성 방법

  • new Array(value);
  • 일반적으로 배열은 동일한 메모리 크기를 가지며, 연속적으로 이어져 있어야함
let array = new Array(2); // 사이즈 전달
console.log(array); // [ 2 empty items]

array = new Array(1, 2, 3); // 실제 아이템 전달
console.log(array); // [ 1, 2, 3 ]

array = Array.of(1,2,3,4,5); // static 함수 이용
console.log(array); // [ 1, 2, 3, 4, 5]

const anotherArray = [1,2,3,4] // 배열 리터럴 이용
console.log(anotherArray); // [ 1, 2, 3, 4]

array = Array.from(anotherArray); //기존의 배열로부터 새로운 배열 만들 때
console.log(array); // [1,2,3,4]
  • 하지만 자바스크립트에서 배열은 연속적으로 이어져 있지 않고 오브젝트와 유사함!
  • 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체다!
  • 이걸 보완하기 위해서 타입이 정해져 있는 타입 배열이 있음 (Typed Collections)
array = Array.from({ // 오브젝트로부터 배열 만들기
	0: '안', // 인덱스 키
	1: '녕',
	length:2,
})
console.log(array); //['안', '녕']

배열 아이템 추가, 삭제

  • array 클래보다는 배열 리터럴을 많이 사용함
const fruits = ['🍌', '🍎', '🍇', '🍑'];

//배열 아이템을 참조하는 방법
console.log(fruits[0]); // ['🍌']
console.log(fruits[1]); // ['🍎']
console.log(fruits[2]); // ['🍇']
console.log(fruits[3]); // ['🍑']
console.log(fruits.length); // 4

// for 이용해서 출력
for (let i = 0; i<fruits.length; i++){
	console.log(fruits[i]);
}
// 추가, 삭제 = 좋지 않은 방식 💩
fruits[6] = '🍓'; //안좋은 방법 빈공간이 생김
console.log(fruits); // ['🍌', '🍎', '🍇', <2 empty items>, '🍑']

delete fruits[1];
console.log(fruits); // [<1 empty items>, '🍎', '🍇', '🍑'];

배열 메서드

  • 배열 자체를 변경하는지, 새로운 배열을 반환하는지
const fruits = ['🍌', '🍎', '🍇'];

// 특정한 오브젝트가 배열인지 체크
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray());  // false

// 특정한 아이템의 위치를 찾을 때
console.log(fruits.indexOf('🍎')); // 1

// 배열안에 특정한 아이템이 있는지 체크
console.log(fruits.includes('🍎')); // true

//추가 - 제일 뒤
let length = fruits.push('🍑') // 배열 자체를 수정(업데이트)
console.log(fruits); // ['🍌', '🍎', '🍇', '🍑']
console.log(length); // 4

//추가 - 제일 앞
length = fruits.unshift('🍓'); // 배열 자체를 수정(업데이트)
console.log(fruits); // ['🍓', '🍌', '🍎', '🍇', '🍑']
console.log(length); // 5

// 제거 - 제일 뒤
let lastItem = fruits.pop(); // 배열 자체를 수정(업데이트)
console.log(fruits); // ['🍓', '🍌', '🍎', '🍇']
console.log(lastItem); // 🍑

// 제거 - 제일 앞
lastItem = fruits.shift(); // 배열 자체를 수정(업데이트)
console.log(fruits); // [ '🍌', '🍎', '🍇']
console.log(lastItem); 🍓

// 중간에 추가 또는 삭제
// 1번 쩨 인덱스에서 1번째를 삭제
const deleted = fruits.splice(1, 1) // 배열 자체를 수정(업데이트)
console.log(fruits); // [ '🍌', '🍇']
console.log(deleted); // ['🍎']
// 1번째 인덱스에 🍎 ,🍓 추가
fruits.splice(1, 0, '🍎', '🍓') // 배열 자체를 수정(업데이트)
console.log(fruits); [ '🍌', '🍎', '🍓', '🍇']

const fruits = ['🍌', '🍎', '🍇'];
// 잘라진 새로운 배열을 만듬

// 시작하는 인덱스 포함하고 끝나는 인덱스는 제외
let newArr = fruits.slice(0,2); 
console.log(newArr); // ['🍌', '🍎'];
console.log(fruits); // ['🍌', '🍎', '🍇'];
newArr = fruits.slice(-1); // 제일 뒤에서 한칸 앞에서 부터 
console.log(newArr); // ['🍇'];

// 여러개의 배열을 붙여줌
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = arr1.concat(arr2);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5, 6]
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 순서를 거꾸로 
const arr4 = arr3.reverse();
console.log(arr4); // [6, 5, 4, 3, 2]

// 중첩 배열을 하나의 배열로 쫙 펴기
let arr =[
	[1,2,3],
	[4,[5,6]],
];
console.log(arr); //[[1,2,3],[4,[5,6]]]
// 기본 한 단계 까지만 플랫해줌(지정을 해줘야함)
console.log(arr.flat(2));  // [1, 2, 3, 4, 5, 6]
arr = arr.flat(2)

// 특정한 값으로 배열을 채우기
// 배열 자체를 수정
arr.fill(0) 
console.log(arr); // [0, 0, 0, 0, 0, 0]

arr.fill('s', 1, 3)
console.log(arr); // [0, 's', 's', 0, 0, 0]

arr.fill('a', 1)
console.log(arr); // [0, 'a', 'a', 'a', 'a', 'a']

// 배열을 문자열로 합하기
let text = arr.join();
console.log(text); // 0,a,a,a,a,a
text = arr.join('ㅣ');
console.log(text); // 0 ㅣ a ㅣ a ㅣ a ㅣ a ㅣ a

Shllow Copy 얇은 복사

  • 객체는 메모리 주소 전달
  • 자바스크립트에서 복사할 때는 항상 얕은 복사가 이루어짐!
  • Array.from, concat, slice, spread(...), Object.assign
const pizza = {name: '🍕', price:2, owner: {name:'Ellie'}};
const ramen = {name: '🍜', price:3};
const sushi = {name: '🍣', price:1};
const store1 = [pizza, ramen];
const store2 = Array.from(store1);
console.log('store1',store1); 
console.log('store2',store2);

store2.push(sushi)
console.log('store1',store1);
console.log('store2',store2);

pizza.price = 4;
console.log('store1',store1);
console.log('store2',store2);

고차함수

  • 고차함수는 인자로 함수를 받거나(콜백함수) 함수를 반환하는 함수

forEach()

  • 배열의 요소마다 한번씩 콜백함수를 호출
  • 총 3개의 인자를 전달
  • forEach는 break 문을 사용할 수 없어 배열의 모든 요소 순회 시 중간에 순회를 중단 할 수 없음
// 배열을 빙글 빙글 돌면서 원하는것(콜백함수)을 할때
fruits.forEach(function(value, index, array){
	console.log('--------');
	console.log(value);
	console.log(index);
	console.log(array);
})

fruits.forEach((value )=>  console.log(value));;

find()

  • 조건에 맞는(콜백함수) 아이템을 찾을 때
  • 요소를 전달 받아서 조건이 맞아서 true로 리턴이되면 해당하는 첫번째 요소를 바로 반환
  • 참인 요소 존재하지 않는다면 undefined 반환
const item1 = {name: '🧂', price : 2};
const item2 = {name: '🍘', price : 3};
const item3 = {name: '🍙', price : 1};
const products = [item1, item2,item3,item2];

const found = products.find((value)=> value.name ==='🍘');
console.log(found);

findindex()

  • 제일 먼저 조건에 맞는 아이템의 인덱스를 반환
  • 존재하지 않는다면 -1 반환
result = products.findIndex((value)=> value.name ==='🍘');
console.log(result);

some()

  • 배열의 아이템들이 부분적으로 조건(콜백함수)에 맞는지 확인
result = products.some((item)=> item.name==='🍘');
console.log(result);

every()

  • 배열의 아이템들이 전부 조건(콜백함수)에 맞는지 확인
result = products.every((item)=> item.name==='🍘');
console.log(result);

filter()

  • 원하는 조건의 요소들로만 새로운 배열로 만들고 싶을때 사용
// 조건에 맞는 모든 아이템들을 새로운 배열로!
result = products.filter((item)=> item.name==='🍘');
console.log(result);

Map()

  • 배열의 아이템들을 각각 다른 아이템으로 매핑
  • 반환해서 새로운 배열 생성
const nums =[1, 2, 3, 4, 5];
result = nums.map(item => item * 2);
console.log(result); //[ 2, 4, 6, 8, 10 ]
result = nums.map((item)=>{
	if(item%2 === 0){
		return item * 2;
	}else{
		return item
	}
});
console.log(result);//[ 1, 4, 3, 8, 5 ]

flatMap()

  • 중첩된 배열을 평탄화하여 새로운 배열 반환
result = nums.map((item)=>[1, 2]);
console.log(result);
 //[ [ 1, 2 ], [ 1, 2 ], [ 1, 2 ], [ 1, 2 ], [ 1, 2 ] ]

// flatMap: 중첩된 배열을 쫘악 펴줌
result = nums.flatMap((item)=>[1, 2]);
console.log(result);
// [
//   1, 2, 1, 2, 1,
//   2, 1, 2, 1, 2
// ]

result = ['dream','coding'].flatMap((text)=> text.split(''));
console.log(result);
// [
//   'd', 'r', 'e', 'a',
//   'm', 'c', 'o', 'd',
//   'i', 'n', 'g'
// ]

sort()

  • 배열의 아이템들을 정렬
  • 문자열 형태의 오름차순으로 요소를 정렬하고, 기존의 배열을 변경
  • 숫자 배열 정렬 arr.sort((a,b) => a - b);
    • 숫자 배열 오름차순 정렬
      • 비교 함수의 반환값이 0보다 작은 경우, a를 우선하여 정렬
    • 숫자 배열 내림차순 정렬
      • 비교 함수의 반환값이 0보다 큰 경우, b를 우선하여 정렬
const texts = ['hi','abc']
texts.sort();
console.log(texts); // ['abc', 'hi']

const number = [0, 5, 4, 2, 1 ,10] 
number.sort();
// 문자열 형태로 변환이 됨
console.log(number); // [0, 1, 10, 2, 4 ,5]
// a < 0 a가 앞으로 정렬, 오름차순
// a > 0 b가 앞으로 정렬, 내림차순
number.sort((a,b) => a - b); // 기준점을 콜백으로 전달해줘야함
console.log(number); //[ 0, 1, 2, 4, 5, 10 ]

reduce()

  • 배열의 각 요소를 순회하며 콜백함수의 실행 값을 누적하여 하나의 결과값을 반환
//reduce 배열의 요소들을 접어서 접어서 값을 하나로!
result = [1,2,3,4,5].reduce((sum, value) => (sum+= value),0);
console.log(result); // 15
profile
연우
이전 포스트

10. 빌트인 객체

다음 포스트

12. 이터러블

0개의 댓글