C, 자바, 파이썬 등 여러 언어들을 찍먹(?) 해봤지만 자바 스크립트 만큼 문법에 있어서 유연한 언어는 없는 것 같다. var 변수만 보더라도 논리적인 오류들을 전부 눈감아주는 희한한 언어다. 함수에서도 파라미터를 받을 경우 한 두개를 빼먹더라도 에러 없이 정상적으로 함수가 동작한다.
1. 함수의 파라미터 Default 값 설정
function 함수(a,b,c){
return a+b+c
}
함수(1,2) // 1+2
- 위의 경우 필요한 파라미터는 3개지만 전달받은 건 2개밖에 안된다. 즉, c를 빼먹었음에도 함수가 정상적으로 동작한다. 이 때 빼먹은 c의 경우는 undefined(정의되지 않은 값)로 처리되어 나머지 전달받은 값만 처리한다.
- 이처럼 파라미터를 빼먹었을 경우에 undefined가 아닌 기본 값(default)을 설정하기 위해서는 함수 선언식의 파라미터에 '='로 값을 지정하면 된다.
function 함수(a,b,c=10){
return a+b+c
}
함수(1,2) // 1+2+10
- 아까와 다르게 c라는 파라미터에 10이라는 디폴트 값을 설정한 경우에 똑같이 함수(1,2)를 실행하더라도 입력하지 않은 c 값이 10으로 설정되기 때문에 다른 값이 반환된다.
- 여기서 디폴트 값으로 *, / 같은 연산자 및 함수를 사용할 수도 있다.
- 만약 아무런 값도 전달하지 않는 경우- 함수(), NaN (Not a Number) 값이 반환된다. (파이썬의 Groupby 테이블에서도 값이 없을 경우 NaN으로 표기됨)
2. 파라미터를 제어하는 방법
// 옛날 문법
function 함수(a,b,c) /* parameter */ {
console.log(a,b,c); // argument
console.log(arguments); // 어레이 형태
// 확장성 없는 코드
console.log(arguments[0]); // a
console.log(arguments[1]); // b
console.log(arguments[2]); // c
for (var i = 0; i < arguments.length; i++){
// 파라미터의 개수만큼 반복문 실행
console.log(arguments[i]);
}
}
- 함수의 선언식에 작성하는 변수를 Parameter라고 하며, { } 안에서 사용되는 변수를 Argument라고 한다. 즉, 함수에서 작성한 parameter는 argument로 전달된다.
- 옛날 문법의 경우, 함수의 모든 변수에 접근하기 위해서는 반복문을 사용하여 접근해야 했다. 변수의 개수가 수십 개이거나 중간에 추가되는 경우에는 제어하기 힘들 것이다.
// Rest 문법
function 함수(...변수){
console.log(변수);
}
함수(1,2,3,4,5,6,7,8,9,10); // [1,2,3,4,5,6,7,8,9,10]
- ' ... ' 은 Spread operator로, 배열이나 오브젝트의 괄호를 벗겨 안의 내용을 가리키는 연산자였다. 하지만 함수의 파라미터 옆에 붙일 경우 Rest parameter로 사용된다. 이를 사용한다면 함수의 파라미터가 10개이든 100개이든 모두 담게 되며, 출력시 Array 형태로 출력하게 된다. 옛날 문법에 비해 파라미터 개수에 보다 유연한 코드라고 할 수 있다.
// Rest 문법
function 함수(a,b,...변수){
console.log(변수);
}
함수(1,2,3,4,5,6,7,8,9,10); // [3,4,5,6,7,8,9,10]
- 위처럼 Rest 파라미터와 일반 파라미터를 같이 쓸 경우 Rest 파라미터에 담기는 값은 일반 파라미터를 제외한 값들이다. 함수의 파라미터가 a, b, ...변수 이므로 변수가 담는 값은 첫번째, 두번째 값을 제외한 나머지 들이다.
- 만약 함수(1,2)를 실행한다면 변수의 출력 값은 [ ] (빈 어레이) 이다.
- Rest 파라미터의 경우 맨 마지막에 써야 한다.
- ( ...rest, a, b) (X)
- (a, b, ...rest) (O)
- 두 번 이상 사용 금지
- ( ...rest, ...abc ) (X)
var x = [1,2,3];
var y = '라면';
var z = [...y, ...x];
// ...y = '라','면'
// ...x = 1,2,3
var x = [1,2,3];
var y = ['My', 'name'];
var z = function(a,b){
console.log( [[...a], ...[...b]][1] )
}
z(x,y);
// ...x = 1,2,3
// ...y = 'My','name' // ...[...y] = 'My','name'
// [[...x], ...[...y]] = [[1,2,3],'My','name']
function 데이터마이닝(문자열){
var array = [...문자열]
var obj = {}
for (let i = 0; i< array.length; i++){
if (array[i] in obj){
obj[array[i]] += 1
continue
}
obj[array[i]] = 1 // 숫자를 추가할 때는 객체.키가 아니라 객체[키] 형식으로 해야함!
}
console.log(obj)
}
function 데이터마이닝2(문자열){
var obj = {};
// 문자열에 반복문 사용 forEach
[...문자열].forEach(function(a){
if ( obj[a] > 0){
obj[a] += 1
} else {
obj[a] = 1;
}
})
console.log(obj)
}
자료 출처 : https://codingapple.com/
'JavaScript > JS 문법 정리' 카테고리의 다른 글
상속, Prototype (객체지향 2) (0) | 2022.09.06 |
---|---|
Data Type, Constructor (객체 지향 1) (0) | 2022.09.06 |
literals, Spread Operator, Apply/Call 함수 (0) | 2022.09.03 |
변수 var, let, const (0) | 2022.09.02 |
ES6 Arrow Function (0) | 2022.08.31 |