새소식

반응형
Javascript/Data Structure Series(자료구조)

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

  • -
반응형

Javascript 자료구조 - Array 배열

javascript

 

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

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

총 아래 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

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.

developer.mozilla.org

 

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']
*/
반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.