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 파라미터 라는 게 있다. 내가 넣은 모든 파라미터들을 배열[]에 보관해준다.
쩜쩜쩜(...)의 의미 두 가지
- spread operator
- 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 구분하기
- 함수 파라미터 자리에 붙으면 rest parameter
- 나머지는 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 파라미터 주의점
- 가장 뒤에 써야함(아니면 에러뜬다)
- 두번 이상 사용 금지. 한 번만 쓸 수 있다.
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(결과);
}
'Front-End: Web > JavaScript' 카테고리의 다른 글
[코딩애플] js part 2-3. Object 생성기계인 constructor를 만들어 써보자 (0) | 2022.10.21 |
---|---|
[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 (0) | 2022.10.21 |
[코딩애플] js part 1-7. Spread Operator (...)와 apply / call (0) | 2022.10.09 |
[코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings) (0) | 2022.10.09 |
[코딩애플] js part 1-5. 변수 신문법 총정리 (0) | 2022.10.09 |