# 배열

• 코드1 concat()
  • 배열끼리 합치는 메서드
• 코드2 join() :
  • 배열내 요소를 합치는 메서드
• 코드3 push() , unshift()
  • 새로운 요소를 추가하는 메서드
• 코드4 pop(), shift()
  • 배열에서 요소를 꺼내는 메서드. 기존의 배열의 값이 변경됩니다.

• concat() : 배열끼리 합치는 메서드
  • 서로 다른 배열 2개를 합쳐서 새로운 배열을 반환합니다.
  • 어느 배열을 먼저 작성하는냐에 따라 기준이 달라지며 반환되는 배열의 순서도 달라집니다.

const nums = [1, 2, 3];
const chars = ['a', 'b', 'c', 'd'];

// 두 개의 배열 합치기
const numsChars = nums.concat(chars);
const charsNums = chars.concat(nums);
document.write(`nums+chars: ${numsChars} <br> chars+nums:${charsNums} <hr> }`);

• join() : 배열내 요소를 합치는 메서드
  • 배열 요소를 연결해 하나의 문자열로 만듭니다.
  • 이떄 각 요소사이에 원하는 구분자를 넣을수도 있는데 별도로 지정하지 않을경우 쉼표로 구분합니다.

상수 nums와 chars의 초기화는 코드 1의 반복으로 생략합니다.

const string1 = nums.join();
document.write(`구분자 없이 : ${string1}<br>`);
const string2 = chars.join('/');
document.write(`/ 구분자 지정 : ${string2}<hr>`);

• push() : 새로운 length 값 반환 - 배열끝에 추가
• unshift() : 새로운 length 값 반환 - 배열앞에 추가
  • 배열에 새로운 요소를 추가하려면 push() 나 unshift()를 사용합니다.
  • 두 메서드를 사용하면 원래 배열의 값이 변경된다는 점에 유의해야 합니다.

상수 nums와 chars 는 코드 1의 반복으로 생략합니다.

// 요소 추가 - 새로운 length 값 반환
const ret1 = nums.push(4, 5); // 배열 끝에 추가
document.write(`length: ${ret1} | 새로 태어난배열 nums :  ${nums} <br>`);
const ret2 = nums.unshift(0); // 배열 앞에 추가
document.write(`length: ${ret2} | 새로 태어난배열 nums :  ${nums} <hr>`);

• pop()
  • 배열 뒤에서 요소를 꺼낼때
• shift()
  • 배열 앞에서 요소를 꺼낼때

기존의 배열의 값이 변경됩니다.

상수 nums와 chars 는 코드 1의 반복으로 생략합니다.

// 요소 추출 - 꺼낸 요소 반환
const popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write(`꺼낸 요소 : ${popped1}  | 배열 : ${chars} <br>`);
const popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write(`꺼낸 요소 : ${popped2}  | 배열 : ${chars} <hr>`);

• 코드1 splice()
  • 원하는 위치에 요소를 추가, 삭제하는 메서드 입니다
  • 함수에 인수를 몇개 넣는가에 따라 기능이 달라집니다.
  • 🔗MDN

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.splice(2);
document.write(`반환된 배열 : ${newNumbers} <br> 변경된 배열 : ${numbers} <hr>`);

• 인수가 1개인 경우
  • numbers.splice(2); : 괄호안의 2는 배열의 인덱스 값을 가리킵니다.해당 코드는 인덱스값이 2인 요소부터 마지막 요소까지 모두 삭제 합니다.
  • 반환된 배열은 인덱스 번호 2~마지막까지의 값이 반환되며
  • 변경된 배열은 인덱스 번호 0~1 에 해당하는 값이 반환됩니다.
  • splice 메서드는 배열의 중간에 요소를 추가/삭제 할수 있습니다.

const study = ['html', 'css', 'web', 'jquery'];
const newStudy = study.splice(2, 1);
document.write(`반환된 배열 : ${newStudy} <br> 변경된 배열 : ${study} <hr>`);

• 인수가 2개인 경우
  • 인수가 2개일경우 첫번째 인수는 인덱스 값이고 두번째 인수는 삭제할 요소의 갯수입니다.
  • study.splice(2, 1); : 인덱스가 2인 web 부터 1개의 요소를 삭제합니다..
  • 반환된 배열은 인덱스 번호 2이며 1개인 web입니다.
  • 변경된 배열은 인덱스 번호 0~1 에 해당하는 값이 반환됩니다.
  • splice 메서드는 배열의 중간에 요소를 추가/삭제 할수 있습니다.

const newStudy2 = study.splice(2, 1, 'js');
document.write(`반환된 배열 : ${newStudy2} <br> 변경된 배열 : ${study} <hr>`);

• 인수가 3개 이상일 경우
  • 인수가 3개 이상일 경우 첫번째 인수는 배열에서 삭제할 시작위치를 나타내고 두번째 인수는 삭제할 갯수를 알려줍니다. 그리고 세번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정합니다.
  • const newStudy2 = study.splice(2, 1, 'js'); : 인덱스 값이 2인 jquery 1개를 삭제하고 js를 추가합니다.
  • jquery 자리에 js를 확인할수 있습니다.

기존배열을 변경하지 않으면서 요소를 꺼냅니다.

const colors = ['red', 'green', 'blue', 'white', 'black'];
const colors2 = colors.slice(2); //인덱스 2부터 끝까지
document.write(`${colors2} <br>`);
const colors3 = colors.slice(2, 4); // 인덱스 2,3
document.write(colors3);

• pop(), shift() 처럼 요소에서 값을 꺼내지만 원본 배열을 변경하지 않습니다.