09. Array랑 놀자 - 옥수수고양이편

Array랑 놀자 시리즈
1. 두둠칫편 ( push, pop, shift, unshift )
2. S편 ( slice 와 splice )
3. 거름망편 ( filter )
4. 옥수수고양이편 ( concat )

1. Array.concat

✅ 읽기

let myPet = ['강아지', '도마뱀', '고양이','토끼', '수달'];
let petFood = ['사료', '귀뚜라미', '츄르' , '풀', '연어'];

function anyFood() {
     return myPet.concat(petFood);
}
console.log(anyFood()); // ["강아지", "도마뱀", "고양이", "토끼", "수달", "사료", "귀뚜라미", "츄르", "풀", "연어"]

------------------------------------------------
anyFood라는 함수에는 
myPet 배열과 petFood라는 배열을 합쳐줘

✅ concat 메서드
주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환.
원본 배열은 변경되지 않으며, 새로운 배열이나 원본 배열을 수정해도 서로 여향을 받지 않음.

🤔 push 랑 unshift 처럼 요소를 추가해서 배열을 반환 할 수 있을까?

function anyFood() {
     return myPet.concat('햄스터');
}
console.log(anyFood()); // ["강아지", "도마뱀", "고양이", "토끼", "수달", "햄스터"]
--------------------------------------------------
원본 배열의 마지막 요소로 '햄스터'가 추가되어 새로운 배열로 반환.

🤔 그럼 push / unshift 대신 사용해도 될까?

• 대체해서 사용할 수는 있지만 차이점이 있어. 우선 push와 unshift는 원본 배열이 변경이 되지만 concat은 원본 배열은 건드리지 않고 새로운 배열로 반환이 되지.
  - concat은 반환값을 반드시 변수에 할당 받아야함.
  

let nums = [ 8, 10, 12, 14];

nums.unshift(2,4); // 요소 앞에서부터 2,4를 추가해줘
console.log(nums);//  [2, 4, 8, 10, 12, 14]

nums.push(16,18); // 요소 뒤에서부터 16,18을 추가해줘
console.log(nums); // [2, 4, 8, 10, 12, 14, 16, 18]
----------------------------------------------------
let nums1 = [ 8, 10, 12, 14];

let result = [ 2, 4 ].concat(nums1);
//난 concat이니깐 변수를 먼저 할당해주고
//unshift처럼 요소 앞에 추가해줘

console.log(result); //[2, 4, 8, 10, 12, 14]

let result1 = nums1.concat(16,18);
//난 concat이니깐 변수를 먼저 할당해주고
//push처럼 요소 뒤에 추가해줘

console.log(result1); // [8, 10, 12, 14, 16, 18]

✳️ concat메서드를 대체가능한 ES6의 스프레드 문법

let nums3 = [3,5].concat([7,9]);
console.log(nums3); // [3, 5, 7, 9]
------------------------------------------------------

nums3 = [...[3,5], ...[7,9]];
console.log(nums3); // [3, 5, 7, 9]

2. 이미지화