3강 / Spread, rest 파라미터 연습문제 8개

1. spread 문제 1

let a = [1,2,3];
let b = '김밥';
let c = [...b, ...a];
console.log(c);

위 코드의 출력 결과는?

1. let a = [1, 2, 3];

   • 배열 a는 [1, 2, 3]이라는 요소를 가진다.

2. let b = "김밥";:

   • 문자열 b는 "김밥"이라는 값을 가진다.

3. let c = [...b, ...a];:

   • 여기서 spread 연산자 (...)는 각각의 요소를 개별적으로 펼치는 역할을 한다.
   • ...b는 문자열 "김밥"을 각각의 문자로 펼친다. 즉, ['김', '밥']과 동일한 효과를 가진다.
   • ...a는 배열 [1, 2, 3]의 각 요소를 펼친다. 즉, [1, 2, 3]과 동일한 효과를 가진다.
   • 따라서 c는 [...b, ...a]로 ['김', '밥', 1, 2, 3]이 된다.

따라서 최종 출력은 ['김', '밥', 1, 2, 3]이다!

---

2. spread 문제 2

let a = [1,2,3];
let b = ['you', 'are'];
let c = function(a,b){
  console.log( [[...a], ...[...b]][1] )
}
c(a,b);

대괄호가 가득한 위 코드의 출력 결과는?

1. let a = [1, 2, 3];

   • 배열 a는 [1, 2, 3]이라는 요소를 가진다.

2. let b = ['you', 'are'];

   • 배열 b는 ['you', 'are']이라는 요소를 가진다.

3. let c = function(a, b) { console.log( [[...a], ...[...b]][1] ) }:

   • 함수 c는 두 개의 매개변수 a와 b를 받는다.
   • 함수 본문에서 console.log([[...a], ...[...b]][1])를 실행한다.

이 부분을 자세히 풀어서 설명하면 다음과 같다

• [[...a], ...[...b]]는
  • [..., a]는 배열 a의 요소들을 개별적으로 펼친 것이다. 즉 [1, 2, 3]이 된다.
  • [...b]는 배열 b의 요소들을 개별적으로 펼친 것이다. 즉 ['you', 'are']이 된다.
  • 따라서 [[...a], ...[...b]]는 [[1, 2, 3], 'you', 'are']가 된다.

이제 이 배열의 두 번째 요소(인덱스 1)를 출력하는데

• [[1, 2, 3], 'you', 'are'][1]은 ['you', 'are']의 두 번째 요소인 'you'가 된다.

따라서 최종적으로 console.log([[...a], ...[...b]][1])는 'you'를 출력한다.

---

3. default 파라미터 문제 1

function test(a = 5, b = a * 2 ){
  console.log(a + b);
  return 10
}
test(3);

위 코드의 출력 결과는?

1. 함수 정의

   • a의 기본값은 5
   • b의 기본값은 a * 2

2. 함수 호출 test(3)

   • a는 인수로 3을 전달받는다. 이로 인해 기본값 5 대신 3이 사용된다.
   • b의 기본값 계산에 사용되는 a는 전달된 인수 값인 3이다. 따라서 b는 3 * 2로 계산되어 6이 된다.

3. 함수 내부

   • console.log(a + b)를 실행
     • a는 3이다.
     • b는 6이다.
     • 따라서 a + b는 3 + 6 = 9가 된다.
   • console.log(9)가 실행되어 9가 출력된다.

4. 함수 반환(return)

   • return 10;이 실행되어 함수는 10을 반환한다. 하지만 반환값은 함수 호출의 결과로 사용될 뿐, 출력에는 영향을 미치지 않는다.

따라서, test(3)을 호출했을 때 출력 결과는 9가 된다.

---

4. default 파라미터 문제 2

function test(a = 5, b = a * 2 ){
  console.log(a + b);
}
test(undefined, undefined);

위 코드의 출력 결과는?

1. 함수 정의

   • a의 기본값은 5
   • b의 기본값은 a * 2

2. 함수 호출: test(undefined, undefined)

   • a에 undefined를 전달하면 a는 기본값 5를 사용한다.
   • b에 undefined를 전달하면 b는 기본값 a * 2를 사용한다. 이때 a는 5이므로, b는 5 * 2로 10이 된다.

3. 함수 내부

   • console.log(a + b)를 실행한다
     • a는 5
     • b는 10
     • 따라서 a + b는 5 + 10 = 15가 된다.
   • console.log(15)가 실행되어 15가 출력된다.

---

5. array를 만들어주는 함수를 제작하고 싶습니다.

실용성은 0이지만 일단 해보자.
파라미터로 자료들을 입력하면 그걸 그대로 array를 만들어주는 함수를 만들고 싶다.

function arrayTest(){
  (여기 어떤코드가 들어가면 될까?)
}

let newArray = arrayTest(1,2,3,4,5);
console.log(newArray);

이렇게 작성하면 [1,2,3,4,5]가 출력되어야한다.
함수에 숫자를 100개 집어넣으면 Array안에 숫자100개가 들어가야한다.
arrayTest라는 함수를 어떻게 만들면 될까? (new 키워드 사용금지)

풀이

function arrayTest(...parameters) {
  console.log(parameters);
}

let newArray = arrayTest(1, 2, 3, 4, 5);
console.log(newArray);

rest 파라미터를 사용하여 쉽게 숫자들을 array안에 집어넣을 수 있다.
숫자를 여러개 늘려도 똑같이 array안에 집어넣을 수 있다.

---

6. 최댓값 구하기

자바스크립트에서 최댓값을 구하고 싶으면 Math.max()라는 기본 내장함수를 쓸 수 있다.

Math.max(5,6,4,3)

이렇게 쓰면 6이라고 최댓값을 출력해준다. 그냥 소괄호 안에 있는 모든 숫자 중에 가장 큰 숫자를 퉤 뱉는다는 소리이다.
근데 최댓값을 검사하고 싶은 숫자들이 좀 많다.

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

numbers 안에 있는 숫자들을 Math.max()에 집어넣어서 쓰고 싶은데
직접 소괄호 안에 10개넘는 숫자를 손수 기입하기 귀찮다.
이럴 땐 어떻게 코드를 짜면 좋을까?

풀이

먼저 array 밖으로 숫자들을 꺼내려면 spread를 사용해 숫자들을 꺼내야한다.

• console.log(...numbers);
  
  위 숫자들이 꺼내졌으면 Math.max()를 사용해 최댓값을 구해보자

let numbers = [2, 3, 4, 5, 6, 1, 3, 2, 5, 5, 4, 6, 7];
console.log(Math.max(...numbers));

가장 큰 숫자인 7이 나오는 것을 볼 수 있다.

---

7. 글자를 알파벳순으로 정렬해주는 함수를 만들고 싶습니다.

일단 자바스크립트는 array 내의 데이터를 알파벳순으로 정렬하고 싶을 때
sort()라는 array 내장함수를 붙여 사용한다. (array에만 적용가능)

 console.log( [ 'b', 'c', 'a' ].sort() );

//[ 'a', 'b', 'c' ] 출력됨

이렇게 sort()만 붙이면 쉽게 정렬이 가능하다.
그런데 우리는 array가 아니라 문자열에도 적용할 수 있는 알파벳순 정렬함수를 하나 만들고 싶다.

function sortTest(){
  (여기 어떤 코드가 들어가야할까?)
}

sortTest('bear');

sortTest('bear')라고 사용하면
콘솔창에 a b e r 이렇게 입력한 문자를 알파벳 순으로 출력되게 만들고 싶으면 어떻게 해야할까?
(sort() 함수 사용가능)

풀이

먼저 위 bear를 array안에 넣어주어야 한다. (why? sort()는 array안에서만 작동되기 때문!)

function sortTest(word) {
  console.log([...word]);
}
sortTest("bear");

위처럼 단어에 대한 argument를 word파라미터로 받고 spread를 사용해 글자를 나누어준다음 []를 통해 array안에 넣어주었다.
결과는 성공적으로 글자로 나뉘고 array안에 들어간 것을 볼 수 있다.

이제 위 array를 sort()를 통해 정렬해보자

function sortTest(word) {
  console.log([...word].sort());
}
sortTest("bear");

sort()를 통해 정렬해주었더니 array안의 글자들이 정렬된 것을 볼 수 있다.

---

8. 데이터마이닝 기능 만들기

데이터분석 하는 사람들이 자주 만들어 쓰는 함수가 있다.
알파벳들의 출현 갯수를 세어주는 함수이다. 우리도 한번 만들어보자

countingLetters('aacbbb') 라고 입력하면 콘솔창에
{ a : 2, b : 3, c : 1 }
▲ 이렇게 출력해주는 countingLetters() 라는 함수를 만들고 싶다.
쉽게말하자면 입력한단어에 들어있는 알파벳의 갯수를 세어서 object에 기록해주고 출력까지 해주는 함수입니다.
countingLetters라는 함수를 어떻게 만들면 될까?

풀이

function countingLetters(str) {
  let letterCount = {};
  [...str].forEach(char => {
    if (letterCount[char]) {
      letterCount[char]++;
    } else {
      letterCount[char] = 1;
    }
  });

  console.log(letterCount);
  return letterCount;
}
countingLetters('aacbbb');  // { a: 2, b: 3, c: 1 }

코드 설명

1. 문자열을 배열로 변환

   [...str]

   • 스프레드 연산자를 사용하여 문자열 str을 배열로 변환한다. 이렇게 하면 문자열의 각 문자를 개별 요소로 갖는 배열이 생성된다.

2. 배열의 각 문자를 반복 (forEach 사용)

   [...str].forEach(char => {

   • 변환된 배열의 각 문자를 forEach 메서드를 사용하여 반복한다.
   • forEach 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 실행한다.

3. 문자 빈도 계산

   if (letterCount[char]) {
     letterCount[char]++;
   } else {
     letterCount[char] = 1;
   }

   • letterCount 객체에 현재 문자가 이미 존재하는지 확인한다.
   • 존재하면 값을 1 증가시킨다.
   • 존재하지 않으면 객체에 문자를 추가하고 값을 1로 설정한다.

4. 결과 출력 및 반환

   console.log(letterCount);
   return letterCount;

   • 최종 결과를 콘솔에 출력한다.
   • 함수가 letterCount 객체를 반환하도록 한다.

이렇게 하면 countingLetters('aacbbb')를 호출할 때 { a: 2, b: 3, c: 1 }가 콘솔에 출력되고, 결과 객체가 반환된다. 스프레드 연산자와 forEach 메서드를 사용하여 코드가 더 간결하고 가독성이 좋아진다.

---

4강 / Spread, rest 파라미터 연습문제 답안

답안은 3강에서 문제를 풀면서 풀이도 있다.
답안