Javascript 자료구조 시리즈(1) Array 배열

자료 구조는 많은 회사에서 가장 자주 테스트하는 주제 중 하나입니다. 서비스를 운영 하다보면 데이터를 어떻게하면 더 효율적으로 저장하고 사용할 수 있는지에 대해 고민을 할 수 밖에 없습니다.
어떻게 코드를 짜느냐에 따라 사용자가 원하는 정보를 빠르게 보여줄 수 있는지 서비스의 품질 문제가 달려있기 때문입니다.

그러므로 이번 포스트에서는 자바스크립트 데이터 구조를 다뤄보겠습니다.

총 아래 7가지 구조를 다뤄볼 예정입니다.
Arrays
Stack
Queues
Linked List
Trees
Graphs
Hashtable

자료구조란?
자료구조는 데이터를 효율적으로 사용할 수 있도록 저장하고 구성하는 방법입니다. 보다 정확하게는 자료구조는 데이터 값의 그룹, 서로 관련되는 방식, 수행할 수 있는 작업 또는 기능을 나타냅니다.
자료 구조를 통해 대규모 데이터 세트를 관리 및 활용하고, 사용자의 여러 요청을 한 번에 처리하고, 데이터 처리 속도를 높일 수 있습니다.

1.) 배열
배열은 가장 기본적인 자료 구조입니다. 인접한 메모리 위치에 함께 저장된 유사한 유형의 요소 그룹이며 각 셀에는 데이터를 선택하는 데 사용되는 해당 숫자 인덱스가 있습니다.
모든 스크립팅 언어와 마찬가지로 JavaScript에는 동적 배열이 있습니다. 즉, 크기나 데이터 유형이 미리 결정되지 않습니다.

배열 리터럴은 JavaScript 배열을 만드는 가장 쉬운 방법입니다.
배열 리터럴을 사용하여 배열을 만드는 간단한 예를 살펴보겠습니다.

그리고 배열을 잘 다루는것은 매우 중요하므로 배열 관련 함수들이 전체적으로 어떤것들이 있는지 아래의 링크에서 확인해보시는것도 좋습니다.

Array MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

concat()

concat 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

 

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']
const cakes = ['cheese cake', 'raspberry cake', 'lemon cake', 'carrot cake']

console.log('desserts.concat() : ', desserts.concat(cakes));
/*
LOG RESULT
desserts.concat() : ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding', 'cheese cake', 'raspberry cake', 'lemon cake', 'carrot cake']
*/

 

forEach()

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

 

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

desserts.forEach(data => console.log('desserts.forEach() : ', data))
/*
LOG RESULT
desserts.forEach() :  chocolate
desserts.forEach() :  ice cream
desserts.forEach() :  cookie
desserts.forEach() :  biscuit
desserts.forEach() :  pudding
*/

 

includes()

includes 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

console.log('desserts.includes() chocolate : ', desserts.includes('chocolate'));
console.log('desserts.includes() coffee : ', desserts.includes('coffee'));

/*
LOG RESULT
desserts.includes() chocolate :  true
desserts.includes() coffee :  false
*/

filter()

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

const chocolate = desserts.filter(dessert => dessert === 'chocolate')
console.log('desserts.filter() : ', chocolate);

/*
LOG RESULT
desserts.filter() :  ['chocolate']
*/

map()

map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

const idxDesserts = desserts.map((desert, idx) => {
  return (idx + 1) + desert
})

console.log('desserts.map() idxDesserts : ', idxDesserts);

/*
LOG RESULT
desserts.map() idxDesserts : ['1chocolate', '2ice cream', '3cookie', '4biscuit', '5pudding']
*/

reverse()

reverse 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

const reversed = desserts.reverse();

console.log('desserts.reverse() reversed : ', reversed);

/*
LOG RESULT
desserts.reverse() reversed : ['pudding', 'biscuit', 'cookie', 'ice cream', 'chocolate']
*/

sort()

sort 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

const sortedDesserts = desserts.sort()

console.log('desserts.sort() sortedDesserts : ', sortedDesserts);

/*
LOG RESULT
desserts.sort() sortedDesserts : ['biscuit', 'chocolate', 'cookie', 'ice cream', 'pudding']
*/

 

slice()

slice 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

console.log('desserts.slice(3) : ', desserts.slice(3));
console.log('desserts.slice(1, 3) : ', desserts.slice(1, 3));
console.log('desserts.slice(1, 5) : ', desserts.slice(1, 5));
console.log('desserts.slice(-1) : ', desserts.slice(-1));
console.log('desserts.slice(3, -1) : ', desserts.slice(3, -1));

/*
LOG RESULT
desserts.slice(3) : ['biscuit', 'pudding']
desserts.slice(1, 3) : ['ice cream', 'cookie']
desserts.slice(1, 5) : ['ice cream', 'cookie', 'biscuit', 'pudding']
desserts.slice(-1) :  ['pudding']
desserts.slice(3, -1) :  ['biscuit']
*/

splice()

splice 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

desserts.splice(2, 1, 'strawberry')

console.log('desserts.splice() desserts : ', desserts);

/*
LOG RESULT
desserts.splice() desserts : ['chocolate', 'ice cream', 'strawberry', 'biscuit', 'pudding']
*/

join()

join 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

console.log("desserts.join('#') : ", desserts.join('#'));
console.log("desserts.join(' ') : ", desserts.join(' '));
console.log("desserts.join('-') : ", desserts.join('-'));

/*
LOG RESULT
desserts.join('#') :  chocolate#ice cream#cookie#biscuit#pudding
desserts.join(' ') :  chocolate ice cream cookie biscuit pudding
desserts.join('-') :  chocolate-ice cream-cookie-biscuit-pudding
*/

push()

push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const desserts = ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding']

desserts.push('milk bread')

console.log('desserts.push() : ', desserts);

/*
LOG RESULT
desserts.push() : ['chocolate', 'ice cream', 'cookie', 'biscuit', 'pudding', 'milk bread']
*/