[코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments)

ES6부터 함수가 많이 업그레이드 됐다. 알아보자!

1. 파라미터 2개가 들어가는 함수인데 1개만 써도 에러가 안남

엄격한 언어는 에러가 나는데, 자바스크립트는 장점이자 단점으로 에러가 안남

function 더하기(a, b) {
	console.log(a + b);
}

더하기(1,2); // 3
더하기(1); // 1 (에러가 안남)

2. 함수의 default 파라미터

b 자리에 아무것도 안넣을 경우에 넣어주세요~ 하는 defaultValue 예제를 살펴보자.

function 더하기(a, b = 10) {
	console.log(a + b);
}

더하기(1); // 11 (b자리에 파라미터를 안넣었을 때만 발동)
더하기(1,2); // 3 

수학 연산도 넣을 수 있다.

function 더하기(a, b = 2 * 5) {
	console.log(a + b);
}

더하기(1); // 11

변수를 넣을 수도 있다.

function 더하기(a, b = 2 * a) {
	console.log(a + b);
}

더하기(1); // 3 (1+2)

함수도 넣을 수 있다.

function 임시함수(){
	return 10;    
}

function 더하기(a, b = 임시함수()) {
	console.log(a + b);
}

더하기(1); // 11

3. 함수의 arguments

parameters와 arguments

function 함수(a, b, c){ // -> parameters
    console.log(a, b, c); // -> arguments
}

모든 파라미터를 한꺼번에 싸잡아서 다루고 싶을 경우

• **arguments**: 모든 파라미터를 []안에 변수를 넣어 반환한다.

function 함수(a, b, c){ 
    console.log(arguments);
}
함수(1,2,3); // Arguments(3) [1,2,3]

function 함수(a, b, c){ 
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
}
함수(1,2,3);
// 1
// 2
// 3
// undefined

입력한 파라미터를 전부 콘솔창에 출력해주는 함수?

파라미터가 많다면 모두 입력하는 건 불가능 할거다. 이때 arguments를 활용하면 된다.

function 함수(a, b, c, d, e, f){ 
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
함수(1,2,3,4,5,6);
// 1
// 2
// 3
// 4
// 5
// 6

함수에서 쓰는 점3개 Rest 파라미터를 알아봅시다

arguments는 옛날 문법이다ㅠㅠ

• 만약 a,b,c라는 파라미터만 콘솔창에 출력하고 싶다면(반복문 돌리고 싶어요)
• arguments라는 자료를 쪼개고 뭐... array 다루듯이 귀찮게 그래야.. 한다.

function 함수(임시, a, b, c){ 
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
함수(1,2,3);

Rest 파라미터

위의 방법을 더 간단하게 쓸 수 있는, ES6 문법에 Rest 파라미터 라는 게 있다. 내가 넣은 모든 파라미터들을 배열[]에 보관해준다.

쩜쩜쩜(...)의 의미 두 가지

1. spread operator
2. rest parameter

function 함수2(...파라미터들){
	console.log(파라미터들)
}
함수2(1,2,3,4,5,6,7); // [1,2,3,4,5,6,7]

arguments와 유사한데 차이점이 뭐냐면,

• **arguments**: 모든 파라미터를 []에 담아줌
• **rest parameter**: 이 자리에 오는 모든 파라미터를 []에 담아줌

function 함수2(a, b, ...파라미터들){
	console.log(파라미터들)
}
함수2(1,2,3,4,5,6,7); // [3,4,5,6,7]

arguments보다 좀 더 유연하게 파라미터를 관리할 수 있다. 그래서 함수를 더 매끄럽게 사용할 수 있다.

...rerst vs ...spread 구분하기

1. 함수 파라미터 자리에 붙으면 rest parameter
2. 나머지는 spread operator

예제

Q. 모든 파라미터들을 하나씩 콘솔창에 출력해주는 함수?

🔹확인

function 함수(...rest){
    console.log(rest);
}
함수(1,2,3,4); // [1,2,3,4]

🔹가장 쉬운 방법

function 함수(...rest){
    console.log(rest[0]);
    console.log(rest[1]);
    console.log(rest[2]);
    console.log(rest[3]);
}
함수(1,2,3,4);
// 1
// 2
// 3
// 4

🔹for문 돌리기

function 함수(...rest){
    for(var i=0; i<rest.length; i++){
        console.log(rest[i]);
    }
}
함수(1,2,3,4);
// 1
// 2
// 3
// 4

...rest는 파라미터가 몇개 들어올지 미리 지정하지 않아도 된다

몇개가 들어오든지 전부 다 array에 넣어준다.

⚠️...rest 파라미터 주의점

1. 가장 뒤에 써야함(아니면 에러뜬다)
2. 두번 이상 사용 금지. 한 번만 쓸 수 있다.

Spread, rest 파라미터 연습문제

1. spread 문제 1

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

위 코드의 출력 결과는?

➡️ ['김','밥',1,2,3]

var c = ['김','밥', 1, 2, 3]

2. spread 문제 2

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

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

➡️ you

-> [ [1,2,3], ...['you', 'are'] ]
-> [ [1,2,3], 'you', 'are' ]
여기서 [1]은 'you'

 

3. default 파라미터 문제 1

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

위 코드의 출력 결과는?

➡️ 9

a = 3, b = 3*2 = 6

 

4. default 파라미터 문제 2

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

위 코드의 출력 결과는?

➡️ 15

a = 5, b = 5*2 = 10

이기 때문.

function 함수(a, b){
    console.log(a);
}
함수(); // undefined

파라미터를 넣어주지 않으면 **a==undefined==정의안된 파라미터** 다. 그래서 undefined는 아무것도 안넣은 값과 동일하다.

함수(undefined) == 함수()

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

실용성은 0이지만 일단 해보도록 합시다.

파라미터로 자료들을 입력하면 그걸 그대로 array를 만들어주는 함수를 만들고 싶습니다.

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

var newArray = 어레이(1,2,3,4,5);
console.log(newArray); 

이렇게 작성하면 [1,2,3,4,5]가 출력되어야합니다.

함수에 숫자를 100개 집어넣으면 Array안에 숫자100개가 들어가야하고요.

어레이라는 함수를 어떻게 만들면 될까요? (new 키워드 사용금지)

➡️

function 어레이(...rest){
	return rest
}

그렇다면, 옛날 솔루션은? arguments로도 가능.

function 어레이(a,b,c,d,e){
    return arguments;
}

6. 최댓값 구하기

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

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

이렇게 쓰시면 6이라고 최댓값을 출력해줍니다. 그냥 소괄호 안에 있는 모든 숫자 중에 가장 큰 숫자를 퉤 뱉는다는 소리입니다.

근데 최댓값을 검사하고 싶은 숫자들이 좀 많습니다.

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

numbers 안에 있는 숫자들을 Math.max()에 집어넣어서 쓰고 싶은데

직접 소괄호 안에 10개넘는 숫자를 손수 기입하기 귀찮습니다.

이럴 땐 어떻게 코드를 짜면 좋을까요?

➡️

Math.max(...numbers); // 7

옛날 방식으로 하려면 **apply**하면 된다.

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

일단 자바스크립트는 array 내의 데이터를 알파벳순으로 정렬하고 싶을 때

sort()라는 array 내장함수를 붙여 사용합니다. (array에만 적용가능)

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

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

이렇게 sort()만 붙이면 쉽게 정렬이 가능합니다. 끝입니다.

그런데 우리는 **array가 아니라 문자열에도** 적용할 수 있는 알파벳순 정렬함수를 하나 만들고 싶습니다.

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

정렬('bear'); 

정렬('bear')라고 사용하면

콘솔창에 a b e r 이렇게 입력한 문자를 알파벳 순으로 출력되게 만들고 싶으면 어떻게 해야할까요?

(sort() 함수 사용가능)

➡️

function 정렬(rest){
    console.log(...[...rest].sort()); // or [...rest].sort().join()
}

(+) 문자 자료형은 .sort() 붙이기 불가능!

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

데이터분석 하는 사람들이 자주 만들어 쓰는 함수가 있습니다.

알파벳들의 출현 갯수를 세어주는 함수입니다. 우리도 한번 만들어봅시다.

**글자세기('aacbbb')** 라고 입력하면 콘솔창에

**{ a : 2, b : 3, c : 1 }**

▲ 이렇게 출력해주는 글자세기() 라는 함수를 만들고 싶습니다.

쉽게말하자면 입력한단어에 들어있는 알파벳의 갯수를 세어서 오브젝트에 기록해주고 출력까지 해주는 함수입니다.

글자세기라는 함수를 어떻게 만들면 될까요?

➡️

애플코딩 풀이

function 글자세기(글자){
    var 결과 = {};
    [...글자].forEach(function(a){
        // 만약에 결과에 a가 있으면 +1해주시고, 없다면 a: 1 집어넣으세요(할당)
        if(결과[a]>0){
            결과[a] += 1;
        }else{
            결과[a] = 1;
        }
    });
    console.log(결과);
}