[ UDEMY ] 자바스크립트 완벽 가이드 : 초급 + 고급 마스터 과정 190 ~ 192

EP. 190

concat()으로 배열에 배열 추가하기

 

concat()

배열 끝에 요소를 추가해서 연결할 수 있도록 한다. push() 와 비슷한 것이라고 볼 수 있다. push()는 한 배열에 여러 항목을 넣지만, concat은 한 배열이나 여러 배열을 취한다.

const testResults = [1, 1.5, 5.3, 1.5, 10.99, -5, 10];
const storedResults = testResults.concat([3, 3.5]);
console.log(storedResults); // [1, 1.5, 5.3, 1.5, 10.99, -5, 10, 3, 3.5]

concat()은 1개나 그 이상의 배열을 취해 storedResults 배열을 testResults 배열과 연결한다. 새로운 중첩 배열로 추가하는 것은 아니다. 배열의 데이터를 기존의 배열과 합칠 때 concat()은 매우 유용하다. 

 

중첩 배열을 만들고 싶다면 push()를 사용하는 것이 좋다.

const testResults = [1, 1.5, 5.3, 1.5, 10.99, -5, 10];
testResults.push([100]);

 

 

 

EP. 191

indexOf() , lastIndexOf()

 

indexOf()

해당 값과 일치하는 인덱스를 찾게 되면 뒤에 일치하는 다른 값이 있어도 첫 번재 요소만 찾고 종료된다.

 

lastIndexOf()

배열의 오른쪽에서 부터 인덱스를 찾을 때 사용한다.

 

indexOf()와 lastIndexOf() 의 중요한 점은 원시 값에 관해서는 실행이 되지만 참조 값에 관해서는 실행이 안된다. 그래서 아래 코드와 같이 객체를 배열로 담고 해당 객체를 indexOf() 로 찾으려고 할 경우 -1이 출력된다. -1은 indexOf와 lastIndexOf에서 어떠한 값도 찾지 못하는 경우에 출력된다. 객체를 찾지 못하는 이유는 객체는 참조 값이기 때문이다. 

const personData = [{ name: "Max" }, { name: "Manuel" }];

console.log(personData.indexOf({ name: "Manuel" }));

 

 

includes()

배열의 일부인지 아닌지를 확인하는 유용한 메서드로 indexOf() 처럼 값을 확인하기 때문에 원시 값에 관해 가장 유용한 메서드이다. 하지만 indexOf() 메서드와의 차이점은 값이 있는 경우에 일치하는 값을 배출해주는 indexOf()와는 달리, 단지 true인지 false를 반환한다.

const testResults = [1, 1.5, 5.3, 1.5, 10.99, -5, 10];

console.log(testResults.includes(10.99)); // true
console.log(testResults.indexOf(10.99)); // 10.99

console.log(testResults.includes(10.98)); // false
console.log(testResults.indexOf(10.98) === -1); // false

 

그래서 값을 요하는 것이 아닌 단순히 일치하는 것이 배열에 존재하는 지 여부에 대한 것만 필요하다면 includes() 메서드를 사용하는 것이 코드가 좀 더 간편하다.

 

 

EP. 192

탐색 find() 와 findIndex()

 

find()

 

indexOf()를 사용할 수 없는 배열의 객체 찾기가 가능하다. find() 와 findIndex()는 객체가 있는 배열에만 국한되지않고, 모든 배열에서 사용가능하다. 

 

find() 안에는 익명 함수가 들어가는 데, 그 익명 함수는 최대 3개의 인수를 넣을 수 있다. 

• 첫 번째 인수 : 배열의 단일 요소
• 두 번째 인수 : 배열의 인덱스
• 세 번째 인수 : 전체 배열

const manuel = personData.find((person, idx, persons) => {
  return person.name === 'Max';
});

console.log(manuel); // { name: 'Max' }

manuel.name = 'Anna';

console.log(manuel, personData); // { name: 'Max' }

 

find()는 찾으려고 하는 요소에 관해 true 또는 false를 반환하기 때문에 return으로 반환해줘야한다.

또 한, find()는 동일한 객체의 동일한 참조 값으로 작업을 하기 때문에 복사는 사용하지 않는 다. 그래서 위의 코드를 보면 manuel.name에 Anna 로 값을 수정하는 경우, manuel 의 값 뿐만 아니라 personData 상수의 일치하는 값도 같이 변경되는 것을 확인할 수 있다.

 

findIndex()

 

find() 와 동일한 형태로 사용 가능하다. 그러나 findIndex()는 찾고자 하는 값의 index를 반환한다.

const maxIndex = personData.findIndex((person, idx, persons) => {
  return person.name === 'Max';
});

console.log(maxIndex); // 0