[개념 문제] 배열 07.array - 11.concat/ 12.concat응용

11. concat

Concat

Array.prototype.concat() - JavaScript | MDN

 

concat() 메서드는 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환합니다.

(concatenate 뜻 : 사슬같이 잇다; 연쇄시키다; <사건 등을> 결부[연결]시키다, 연관시키다)

 

원본 배열은 변하지 않으며 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않습니다.

let alphabet = ['a', 'b', 'c'];
let hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];

alphabet.concat(hangeul);      // [ 'a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ' ]

아래의 코드를 살펴봅시다.

둘은 매우 비슷해보이지만 다른 결과를 반환합니다. 두번째의 경우는 배열을 3개로 인식했기 때문에(이게 무슨 말?) [2, 3]을 감싸는 대괄호가 사라졌습니다.

이런식으로 배열을 변수에 지정해서 인자로 넘겨줄 수도 있고, 바로 인자에서 배열을 작성해줄 수 있습니다.

const alpha = ['a', 'b', 'c'];

// 배열 2개 이어붙이기 (변수에 지정해서 인자로 넘겨줌)
const arr = [1, [2, 3]];     
alpha.concat(arr);             // [ 'a', 'b', 'c', 1, [ 2, 3 ] ]

// 배열 3개 이어붙이기 (바로 인자에서 배열을 작성)
alpha.concat(arr);
alpha.concat(1, [2, 3]);       // [ 'a', 'b', 'c', 1, 2, 3 ]

중복된 숫자나 글자를 가진 배열을 합친다면 어떤 결과가 나올까요? 중복된 결과가 사라질까요?

const numbers = [1, 2, 3];
const numbers2 = [3, 4, 5];

numbers.concat(numbers2);      // [ 1, 2, 3, 3, 4, 5 ]

결과를 보면 그렇지 않다는 걸 알 수 있습니다. 요소의 중복과 상관없이 concat()은 배열을 합쳐줍니다.

 

 

Assignment

1.month1&2 배열을 concat()을 이용해서 하나의 배열로 합쳐주세요.

아래와 같은 결과가 나와야합니다.

[ 'July',
  'Aug',
  'Sept',
  'Oct',
  'Nov',
  'Dec',
  'Jan',
  'Feb',
  'March',
  'Apr',
  'May',
  'June' ]

2. num 배열안의 요소들을 concat()을 이용해서 하나의 배열로 합쳐지게 해주세요.

아래와 같은 결과가 나와야 합니다.

(힌트: array에서 index로 접근)

[ 11, 12, 13, 14, 15, 16, 17, 18, 19 ]

 

문제

// Assignment 1 
let month1 = ['Jan', 'Feb', 'March', 'Apr', 'May', 'June'];
let month2 = ['July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

// 아래의 함수를 완성해주세요.
function combineMonth() {

  
}


// Assignment 2  
let num = [[11, 12, 13], [14, 15, 16], [17, 18, 19]]; 

//아래의 함수를 완성해주세요. 
function makeNewArr () {


}

module.exports = { combineMonth, makeNewArr };

 

풀기

// Assignment 1 
let month1 = ['Jan', 'Feb', 'March', 'Apr', 'May', 'June'];
let month2 = ['July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

// 아래의 함수를 완성해주세요.
function combineMonth() {
  let result = month2.concat(month1)  
  return result
}
console.log(combineMonth())

// Assignment 2  
let num = [[11, 12, 13], [14, 15, 16], [17, 18, 19]]; 

//1.concat(value1,value2)를 넣는 방법
function makeNewArr () {
  let result = num[0].concat(num[1],num[2])
return result
}
console.log(makeNewArr())

//2.concat메소드 자체를 여러번 사용하는 방법
function makeNewArr () {
  let result = num[0].concat(num[1]).concat(num[2])
return result
}
console.log(makeNewArr())

복기

Assignment 2를 복기해보자면,

num[0]이 [11, 12, 13], [14, 15, 16,], [17, 18, 19] 라고 생각하여, 배열의 배열을 또 벗겨야 한다고 생각하여

11, 12, 13 에 접근하려면 num[0][1] 이 되어야 한다고 생각했다. 

 

하지만 num[0]은 [11, 12, 13] 이었다. 

 

또한 concat 메소드를 단 한번만 올 수 있다고 생각하였는데, 메소드를 여러번 사용하는 방법도 있다는 걸 배웠다.

---

12. concat 응용

우리는 이전 세션에서 concat() 에 대해 배웠습니다.

concat()을 사용하면 두 배열이 같은 요소를 가졌다해도 합쳐져서 새로운 배열을 반환할때 중복된 값이 나오는 것을 확인했습니다.

let array1 = [1,2,3,4,5];
let array2 = [3,4,5,6,7];


let result = array1.concat(array2);
console.log(result);


// 결과 (3,4,5 가 중복)
[
1, 2, 3, 4, 5,
3, 4, 5, 6, 7
]

 

그러면 이제는 중복된 값이 없는 배열이 되도록 해봅시다.

우리가 배웠던 filter() 를 사용하겠습니다.

let eraseDuplicates = result.filter((el,index)=>
result.indexOf(el)===index);


console.log(eraseDuplicates);


// 결과 (중복된 값이 사라짐)
[
1, 2, 3, 4,
5, 6, 7
]

 

filter()가 어떻게 작동됐는지 살펴봅시다.

3을 보면 3은 중복된 값으로 result.indexOf(3)은 2가 나옵니다. 처음 3은 index[2]로 조건을 만족하지만 두번째 3은 index[5]로 조건을 만족하지 않아서 통과되지 않습니다. 그래서 두번째 3은 지워지게 됩니다. 이런식으로 중복된 3, 4,5가 지워지고 하나만 남게된 것입니다!

혹은 Set 객체를 사용해서 위와 같은 결과를 얻을 수도 있습니다.

Set객체는 요소의 값이 유일하기 위해 검사를 수행하기 때문에 중복된 값을 제거하고 싶을 때 사용합니다.

 

색인index란?
The index property is a read-only property. It contains the position of a regular expression match within a string.
index 속성은 읽기 전용 속성입니다. 여기에는 문자열 내에서 정규식 일치의 위치가 포함됩니다.
*자바스크립트에서는 숫자는 0부터 셈

이번 세션에서는 Set을 다루지 않기 때문에 궁금하신 분들은 검색해서 공부하시는 것을 추천합니다 :)

console.log([...new Set(eraseDuplicates)]);


// 결과 (중복된 값이 사라짐)
[
1, 2, 3, 4,
5, 6, 7
]

 

Assignment

 

파스타와 피자의 재료가 배열로 나타나있습니다. 위의 코드를 참고해서 중복된 재료를 뺀 전체 재료의 배열 한 개를만들어주세요.

아래와 같은 결과가 나와야 합니다.

// 중복된 재료를 뺀 전체 재료
[ 'tomato', 'basil', 'onion', 'chicken', 'cheese', 'olive', 'beef' ]

문제

// Assignment
let pasta = ['tomato', 'basil', 'onion','chicken'];

let pizza = ['tomato', 'cheese', 'onion','olive','beef'];


// 아래 함수를 작성해주세요. 
function totalIngredients () {

}

풀기

function totalIngredients() {
let result = pasta.concat(pizza);
  let eraseDuplicates = result.filter((el, index) => 
    result.indexOf(el)===index);
  return result
}
console.log(totalIngredients())