[ES6] [Part2] default parameter, arguments, rest parameter, spread

🔖TAG 💡arguments, 💡Default, 💡REST, 💡SPREAD 📗

자바스크립트 함수 업그레이드하기 (default parameter/arguments)

 

<script>
// 함수의 default 파라미터 넣기
function 더하기(a, b = 10, c = 2 * 5, d = 2 * a) {
    console.log(a, b, c, d);
}
더하기(1); // 1 10 10 2

// default 파라미터엔 함수입력도 가능
function 임시함수() {
    return 10
}
function 더하기(a, b = 임시함수()) {
    console.log(a + b);
}
더하기(3); // 3 + 10 = 13

//함수의 arguments (모든 파라미터들을 전부 한꺼번에 싸잡아서 다루고 싶은 경우 사용)
function 함수(a, b, c) {
    console.log(arguments);
}
함수(2, 3, 4);
</script>

 

함수에서 쓰는 점3개 Rest 파라미터

 

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

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

// rest 파라미터 주의사항
// 1. rest는 항상 마지막 파라미터로 넣어야함
function 함수3(a, ...파라미터들, b) { //Error
    //....
}
// 2. rest파라미터 2개 이상 사용 안됨
function 함수4(a, ...파라미터들, ...파라미터들2) { //Error
    //...
}
</script>

 

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

<script>
//spread는 문자의 '', 배열의 [], 객체의 {}를 벗겨주는 역할을 한다


// 1. spread 문제 1

var a = [1, 2, 3];
var b = '김밥';
var c = [...b, ...a];
console.log(c); //['김', '밥', 1, 2, 3] //string은 spreadOperator에서 쪼개져서 저장됨


// 2. spread 문제 2

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


// 3. default 파라미터 문제 1

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


// 4. default 파라미터 문제 2

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


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

function makeArray(...rest) {
    return rest;
}
var newArray = makeArray(1, 2, 3, 4, 5);
console.log(newArray); // [1, 2, 3, 4, 5]


// 6. 최댓값 구하기

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


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

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

function 정렬(글자) {
    console.log([...글자]); // ['b', 'e', 'a', 'r']
    console.log([...글자].sort()); // ['a', 'b', 'e', 'r']
    console.log([...글자].sort().join()); // a,b,e,r
}
정렬('bear');


// 8. 데이터마이닝 기능 만들기
//--1--스택오버플로우----//
function 글자세기([...문자]) {
    console.log(문자); // ['a', 'a', 'c', 'b', 'b', 'b']
    console.log(문자.sort()); // ['a', 'a', 'b', 'b', 'b', 'c']

    return 문자.sort().reduce((count, word) => {
        count[word] = (count[word] || 0) + 1;
        return count;
    }, {});
}
console.log(글자세기('aacbbb')) // { a : 2, b : 3, c : 1 }
console.log(글자세기('asldlksamdksladlwndlajsdkjlsakdasdl'));

//--2--apple쌤꺼----//
function 글자세기2(글자) {
    // console.log([...글자]); // foreach쓰기위해 글자를 array로 만들어줌 // ['a', 'a', 'c', 'b', 'b', 'b']

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

글자세기2('aacbbb') // { a : 2, b : 3, c : 1 }
</script>

JS Deep Dive  참고
10장 - 객체 리터럴
26장 - ES6 함수의 추가 기능

 

 

 

https://stackoverflow.com/questions/40102199/counting-words-in-javascript-and-push-it-into-an-object

Counting words in javascript and push it into an object