출처 : https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/

배열 선언 방법

배열 초기화 방법

let myBox = [];

다양한 타입의 데이터를 섞어 사용하는 것도 가능

let myBox = ['hello', 1, 2, 3, true, 'hi'];

ES6 기준 array 의 다양한 활용 방법 - method 소개

주의깊게 봐야 될 부분은 신규 배열 생성 vs 기존 배열 변형 부분 입니다. 메소드에 따라 해당 부분이 상이하니 약간의 주의가 필요합니다.

toString()

배열을 컴마로 구분된 문자열로 변환 시켜줍니다.

let colors = ['green', 'yellow', 'blue'];
colors.toString();
console.log(colors); // "green,yellow,blue"

join()

toString()과 유사하나 구분자를 지정하여 문자열을 연결 할 수 있습니다.

let colors = ['green', 'yellow', 'blue'];
colors.join('-');
console.log(colors); // "green-yellow-blue"

concat

2개 이상의 배열을 합칠 수 있습니다. (합쳐진 배열은 신규 배열을 생성합니다.)

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

push()

배열의 마지막에 요소를 추가하며, 원래 배열을 변형 시킵니다.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

배열의 마지막에 요소를 배열에서 제거 후 반환합니다.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

shift()

배열의 첫번째에 요소를 배열에서 제거 후 반환합니다.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

unshift()

배열의 첫번째에 요소를 값을추가하며 원래 배열을 변형 시킵니다.
한번에 여러 아이템을 추가하는 것 또한 가능

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

splice()

배열에 값을 추가/제거/삽입 하여 변형 시킵니다.
splice() 메소드 사용 이후 원래 배열에서 제거된 값을 반환합니다.

• 문법 : array.splice(index[, deleteCount, element1, ..., elementN])
• index : 배열의 제거 시작지점
• deleteCount : index 이후부터 제거할 숫자
• element1, ..., elementN : 추가될 요소
• 시작 - 제거카운트 - 항목추가 : 원본 소스에서 제거된 항목 위치에 항목들이 추가되는 것임에 유의

3번째 이후 모두 제거

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

삭제 추가 예제 : 0번째 항목에서 4개 제거 및 항목 추가 후 남은 값을 포함

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

항목 추가 예제 : 5번째 항목에서 0개 제거 후 항목을 추가함

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

slice()

splice()와 유사하나 subarray 를 리턴 합니다. (원본 배열은 유지 하며, 서브 배열을 신규 생성하여 반환)

• 문법 : array.slice(start, end)

0번째에서 3개를 잘라냄

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // returns the original array

잘라낸 이후 신규 변수를 할당하면 좋습니다.

let message = 'congratulations'
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // returns "congrats!"

split()

• 문자열을 나눌때 많이 사용 합니다.

문자열을 배열로 변환합니다.

let firstName = 'Bolaji';
// return the string as an array
firstName.split() // ["Bolaji"]

, 기준으로 문자열을 나누고 2개를 반환하여 배열 생성

let firstName = 'hello, my name is bolaji, I am a dev.';
firstName.split(',', 2); // ["hello", " my name is bolaji"]"]

모든 단어 수준으로 나눠주기

let firstName = 'Bolaji';
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

일단 넘 길어서

tobe continued ... 낼 봐요 ~

더 알아보기

• MDN Array