20241025 자바스크립트 repeat(), apply(), 전개 구문, Math.max & indexOf 메서드

repeat() 메서드

특정 문자열을 반복해서 출력하고 싶을 때.
출력하고_싶은_문자열.repeat(원하는_횟수)과 같이 사용하면 된다.

예를 들어서,

console.log('-'.repeat(3));

//// 출력
// ---

apply()

배열의 요소를 함수의 인자로 사용해야 할 때(그냥 배열을 함수 인자로 사용하는게 x, ‘배열의 요소’를 함수 인자로 사용할 때 o) 아래와 같이 apply()를 사용한다.

function myFunction(x, y, z) { return x + y + z };
var myArr = [0, 1, 2];
myFunction.apply(null, myArr);

//// 출력
// 3

myArr의 요소 0, 1, 2를 각각 myFunction 함수의 x, y, z로 사용하고 싶을 때
그냥 myFunction(args)를 하는게 아니라 myFunction.apply(null, myArr)를 해야 한다.

만약 myFunction(args)를 하면 x에 0,1,2가 들어가고 y와 z는 undefined 되는 것. (출력해보면 ‘0,1,2undefinedundefined’가 출력 됨)

이 때, myFunction.apply(null, myArr)를 전개구문을 이용하면 짧게 작성할 수 있다.

전개 구문(…)

영어로는 spread syntax라고 하고 배열명 앞에 ...를 붙여 사용하는 것을 전개 구문이라고 한다.

배열의 요소를 사용하고 싶을 때 사용하는 것 같다

전개 구문은 apply 대체, new 사용해 생성자 호출, 배열과 배열 합쳐 새로운 배열 만들기, 배열 복사, 배열 연결에 이용 될 수 있다.

apply 대체

myFunction.apply(null, myArr)를 전개구문을 사용하면 myFunction(...myArr)로 똑같이 작성 가능하다.

function myFunction(x, y, z) { return x + y + z };
var myArr = [0, 1, 2];
myFunction(...myArr);

//// 출력
// 3

new 사용해 생성자 호출

var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);

배열과 배열 합쳐 새로운 배열 만들기

var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
console.log(lyrics);

//// 출력
// ["head", "shoulders", "knees", "and", "toes"] // length: 5

만약에 var lyrics = ["head", parts, "and", "toes"];라고 했다면, 길이가 4인 [“head”, [“shoulders”, “knees”] , “and”, “toes”]가 출력 됐을 것이다.

배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr];

arr2.push(4);

console.log(arr);
console.log(arr2);

//// 출력
// [1, 2, 3]
// [1, 2, 3, 4]

배열 연결

배열을 연결하기 위해 concat() 메서드를 사용했었다면,

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

arr1 = arr1.concat(arr2);
console.log(arr1)

//// 출력
// [0, 1, 2, 3, 4, 5]

전개 구문을 사용하면 concat()없이도 연결할 수 있다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
console.log(arr1)

//// 출력
// [0, 1, 2, 3, 4, 5]

Math.max(), indexOf() 메서드

배열에서 최대값과 최대값의 인덱스를 찾고 싶을 때, 반복문을 사용하지 않고도 내장메서드 Math.max()와 indexOf()를 사용하면 찾을 수 있다.

최대값이 한개일 때

const numbers = [5, 2, 9, 1, 7];

const max = Math.max(...numbers);
const maxIndex = numbers.indexOf(max);

console.log("최대 값 :", max);
console.log("인덱스 :", maxIndex);

//// 출력
// 최대 값 : 9
// 인덱스 : 2

array를 Math.max의 인자로 사용하기 위해 전개구문(...)을 사용했다.

최대값이 여러개일 때

indexOf() 메서드는 배열에서 찾고자 하는 요소가 나타난 ‘첫번째’ 위치만 리턴한다.
만약 숫자 중복이 가능하면 배열 내 최대값은 여러 위치에 존재할 것이고 이 모든 위치를 알고 싶을 수 있다.
이때는 indexOf() 메서드의 두번째 매개변수를 활용한다. 두번째 매개변수는 디폴트가 0으로, 배열에서 검색할 시작할 위치를 나타내는 인덱스 값이다.
그리고 요소를 찾을 수 없으면 -1을 리턴한다.

const numbers = [5, 2, 9, 1, 7, 9];
const indices = []; 

const max = Math.max(...numbers);
let maxIndex = numbers.indexOf(max);

while (maxIndex !== -1) {
  indices.push(maxIndex);
  maxIndex = numbers.indexOf(max, maxIndex + 1);
}

console.log("최대 값 :", max);
console.log("인덱스 :", indices);

//// 출력
// 최대 값 : 9
// 인덱스 : [2, 5]

---