특정 길이의 배열 가져오기, 가변인자 받기, console.table 등

이번 시간에는
- 1. 원하는 길이의 배열만 가져오기
- 2. js에서 가변 인자를 받는 법
- 3. console값을 테이블 형태로 받기
- 4. 빈값을 가지는 배열 만들기

1. 원하는 길이의 배열만 가져오기

: 만약 아래와 같은 배열이 있다고 해보자.
: 이때 여러분이 안, 녕, 하 만 담은 배열을 원한다면 어떻게 할 수 있을까
: 첫번째 방법으로 array.slice(start [,end])가 있다.

const array2 = ['안', '녕', '하', '세', '요', '!'];
const slicedArr = array2.slice(0, 3);

console.log(slicedArr);   //['안', '녕', '하']
console.log(array2);      //['안', '녕', '하', '세', '요', '!']

하지만 slice는 원본 배열은 바꾸지 않는다. 만약 원본 배열을 바꾸고 싶다는 아래 방법이 있다!

: 바로, 우리가 원하는 배열의 길이를 array.length에 할당하면 된다.
: 아래 코드를 보면 알 수 있듯이 원본 배열이 변경된 걸 알 수 있다!

let array = ['안', '녕', '하', '세', '요', '!'];
array.length = 3;    //원하는 배열의 길이
console.log(array)   //['안', '녕', '하']

2. js에서 가변 인자를 받는 법

: 만약 우리가 정의한 함수에서 특정 개수의 인자가 아닌 여러 개의 인자를 받고 싶다면 어떻게 해야할까?
: 먼저 소개할 방법은 arguments를 이용하는 방법이다.

(1). arguments로 가변 인자 받기

: arguments는 함수에 전달된 인수로, 유사배열객체이다.
: 함수 내부에서 arguments를 사용하면 함수에 전달된 모든 인자에 접근할 수 있다!
: 유사배열객체이지만, 배열일 때 사용할 수 있는 함수는 쓸 수 없다. (단 arguments.length는 가능)
: 사용 방법은 가변 인자를 사용하고 싶은 함수 내부에서 아래와 같이 arguments를 사용하면 된다.

function hello() {
  //함수내부에서 arguments를 사용
  console.log(arguments);     //{0:"안", 1:"녕", 2:"!"}
}
hello('안', '녕', '!');      

: 출력 형태를 보면 왜 유사배열객체라고 불리는지 알 수 있다.
: 그 이유는 바로 객체 형태를 띄기 때문이다.

그럼 가변인자 중 첫 번째 인자만 사용하고 싶으면 어떻게 하나요?

: 앞서 arguments를 유사배열객체라고 한 이유가 있다.
: 그건 바로 특정 순서의 값에 접근하려면 argument[key]형태로 써야 하기 때문이다.
: 방법은 아래 코드를 보면 알 수 있다 :)
(접근방식이 배열의 특정 인덱스에 접근하는 방식과 유사함)

function hello() {
  //인덱스로 접근
  console.log(arguments[0]);      //안
}
hello('안', '녕', '!');         

그럼, 특정함수에 인자를 이미 넣은 상태에서는 arguments는 어떤 값을 가리킬까?

: hello함수에 이미 a, b, c라는 인자가 있다.
: 이때 hello함수 내부에서 arguments와 a, b, c를 호출하면, 아래와 같이 출력된다.

function hello(a,b,c) {
  console.log(a, b, c, arguments);   // 안녕! {0:"안",1:"녕",2:"!"} 

}
hello('안', '녕', '!');   

(2). rest 파라미터로 가변 인자 받기

: 앞서 설명한 argument의 단점은 바로 배열함수를 사용할 수 없다는 점이다ㅜ
: 하지만 이번에 소개할 rest 파라미터는 배열함수를 사용할 수 있다는 사실~
: 그 이유는 바로 rest 파라미터가 배열형태로 나타나기 때문이다!! 👏👏
: 아래 코드는 rest 파라미터를 사용한 예시이다.

function hello(...args) {
  console.log(args);                //["안","녕","!"]
  console.log(Array.isArray(args)); // true
}
hello('안', '녕', '!');

: rest 파라미터는 배열이므로, 가변인자의 두번째 값부터 필요하다면 args.slice(2)를 사용하면 된다.

그럼, 특정함수에 인자를 이미 넣은 상태에서는 rest 파라미터는 어떤 값을 가리킬까?

: argument와 달리 인자들이 순서대로 가리키고 난, 나머지를 지칭하는 걸 알 수 있다.

function hello(a, b, ...args) {
  console.log(a, b, args);     //안 녕 ["!"]
}
hello('안', '녕', '!');

3. console값을 테이블 형태로 받기

: 특정 객체의 데이터값을 콘솔에서 확인해야 한다고 하자.
: 이때 그냥 console.log를 해버리면 상당히~ 보기 불편한 형태로 나타난다. 😡
: 하.지.만! 데이터를 보기 편하게 테이블 형태로 보여주는 함수가 있다, 그건 바로 console.table 😘

: 만약 여러 개의 객체를 보기 편한 형태로 출력하고 싶다면?
: console.table() 내부에 [객체, 객체, 객체]를 넣으면 된다.

const minji = { name: '민지', age: 25, hasDesktop: true };
const eugene = { name: '유진', age: 43, hasDesktop: true };
const wonjin = { name: '원진', age: 33, hasDesktop: false };

console.table([minji, eugene, wonjin]);   //꼭! array로 감쌀 것!

: 그러면 아래와 같은 형태로 출력된다. (나는 이 편한 걸 왜 몰랐을까😫)

4. 빈값을 가지는 배열 만들기

: "배열이 필요한데~ 나는 빈값을 가진 길이가 5인 배열이 필요해~" 라는 순간이 온다면...?
: 아래 방법은 사용해보자 😁

(1). array.fill 사용하는 법

: Array(n)을 하면 n개의 원소를 가진 배열객체가 생성된다.
: 이 객체를 그냥 출력하면 아래와 같이 undefined원소를 가진다.

const array = Array(5);
console.log(array);         //[undefined, undefined, undefined, undefined, undefined]

: 하지만 생성된 배열 객체에 array.fill()을 사용하면 원소를 특정 값으로 변경할 수 있다.

const array = Array(5).fill('');   
console.log(array);         // ['', '', '', '', '']

추가적으로 인덱스를 원소로 가지는 배열을 만들어보자

(2). Array(n).keys() 사용하는 법

: 이 방법은 인덱스(키)를 원소로 가지는 배열을 만들 때 사용된다.
: 먼저, Array(5).keys()을 해서 키를 값으로 가지는 object Array Iterator을 생성한다.
: 그 다음 spread operator을 사용하여 Iterator를 나타내면 된다! (간단한걸~ 좋은 걸~)

let array = [...Array(5).keys()]  
console.log(array);             // [0, 1, 2, 3, 4]

출처
아니, 아래 링크로 가면 더 알 수 있다고? 정.말. 좋.은.걸? 👍👍

• MDN Web docs, arguments란?
• jinyongp님의 포스팅, Rest parameter vs. arguments
• MDN Web docs, Array.prototype.fill()
• MDN Web docs, spread operator
• 기본기를 쌓는 정아마추어 코딩블로그 포스팅, Rest 파라미터와 Spread 연산자 정리하기