const player = '손흥민';
let message = `안녕하세요 ${player}입니다`;
function taggedLiteral(string,var){
console.log(string);
console.log(var);}
함수 taggedLiteral의 파라미터.
1번째 파라미터는 변수를 기준으로 문자열을 Array화하여 문자열을 해체한다.
2번째 파라미터는 ${var}를 문자열에서 해체 한다.
//주어진 변수
let pants = 20;
let socks = 100;
//tagged literal 정의부
function taggedLiteral(문자열, 변수1, 변수2) {
console.log(
문자열[1] + 변수1 + 문자열[0] + 변수2);
}
// 실행부
해체분석기`바지${pants}양말${socks};`;
let pants = 0;
let socks = 100;
function taggedLiteral(문자열, 변수1, 변수2) {
console.log(
문자열[1] + 변수1 + 문자열[0] + 변수2);
if (변수1 < 1) {
console.log(
문자열[0] + '안팔아요' + 문자열[1] + 변수2);
}
}
taggedLiteral`바지${pants}양말${socks};`;
function 더하기(a, b = 10) {
console.log(a + b);
}
더하기(1);
위 함수의 default 파라미터. (b = 10)
b 자리에 인자가 들어오지 않을 경우 10이 입력된다.
인자가 입력되면 default parameter는 사라진다.
default parameter에 수학 연산도 들어올 수 있고, 다른 파라미터를 인자로 사용할 수도 있다. b = 2 * a
default parameter에 함수도 입력이 가능하다.(함수를 실행된 결과가 입력됨)
1
let 어레이 = ['hello', 'world'];
...spread operator
console.log(...어레이)
// output 'hello' 'world'
2
let 문자 = 'hello';
...spread operator
console.log(...문자)
'h' 'e' 'l' 'l' 'o'
위와 같이 문자열에도 어레이 느낌을 줄 수 있다.
사용방법 2. 오브젝트 합치기
let o1 = { a: 1, b: 2 };
let o2 = { ...o1, c: 3 };
값이 중복 되면 가장 나중에 선언된 값으로 대체 된다.
spread operator는 중괄호,대괄호,함수의 소괄호 안에서만 사용이 가능하다.
함수의 파라미터로 배열내 요소들을 사용하고 싶을 때 사용한다.
const 어레이 = [10, 20, 30];
function 더하기(a, b, c) {
console.log(a + b + c);
}
더하기(...어레이); // 60
// ++ 옛날방식
더하기.apply(undefined, 어레이);
const person = {
인사: function () {
console.log('안녕');
},
};
person.인사(); //안녕
const person2 = {
name: '손흥민',
};
person2에도 person.인사 함수를 사용하고 싶을 때
person.인사.apply(person2);
person2의 키값에 person.인사()를 적용시킬 수 있다.
call도 비슷함.
차이점이라면 parameter를 추가할 때
apply는 파라미터를 array형태로 집어 넣을 수 있다.
es6 이상의 함수
함수의 arguments
function 함수(a, b, c) {
console.log(a, b, c);
}
함수(1, 2, 3);
모든 파라미터를 한꺼번에 다루고 싶을 경우 arguments를 사용할 수 있다.모든 파라미터를 감싼다. 값은 유사배열로 출력된다.
파라미터가 10개,20개 이상이라면? arguments 사용한다.
function 함수(a, b, c) {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
함수(2, 3, 4);
arguments의 단점 : 매개변수 a,b,c 파라미터만 사용하고 싶을 때 복잡해 진다.그래서 Rest 파라미터를 사용한다.
function 함수2(...파라미터들) {
console.log(파라미터들);
}
함수 소괄호 안의 ...rest파라미터는 모든 파라미터를 유사배열로 보관해준다. arguments의 단점을 보완
function 함수3(a, b, ...파라미터들) {
console.log(파라미터들);
}
함수3(1, 2, 3, 4, 6, 7, 8, 9); //[3,4,6,7,8,9]
파라미터를 1개씩 콘솔창에 출력하게 만들고 싶다면?
function 함수4(...rest) {
for (let i = 0; i < rest.length; i++) {
console.log(...rest[i]);
}
}
함수4(1, 2, 3, 4, 25324, 124123, 523, 45431, 51, 152, 415123, 32, 436);
...rest는 파라미터의 개수를 지정할 필요가 없다.
...rest는 파라미터의 가장 마지막에 사용해야한다.
...rest는 1번만 사용이 가능하다.
var a = [1, 2, 3];
var b = ['you', 'are'];
var c = function (a, b) {
console.log([[...a], ...[...b]][1]);
};
c(a, b);
// output : you
상세내용
[[...a], ...[...b]]
은 [[1,2,3], 'you', 'are']
같다
결과또한 배열의 규칙을 따르기에 인덱싱 [1]의 값인 'you'가 출력됨.
대괄호는 해체하기에 전개연산자 ...a,...b를
[...a],[...b]로 감싸더라도 대괄호는 해체됨
...b는 대괄호 바깥의 ...과 연결되는 것을 볼수 있음
function 어레이(...rest) {
return [...rest];
}
var newArray = 어레이(1, 2, 3, 4, 5);
console.log(newArray);
//문자열 배열에 담아 알파벳순 정렬하기
function 정렬(para) {
return [...para].sort();
}
정렬('bear');
//알파벳 갯수를 세어 오브젝트에 기록 후 출력하기
function 글자세기(para) {
return [...para].reduce((acc, cur) => {
if (acc[cur]) acc[cur]++;
else acc[cur] = 1;
return acc;
}, {});
}
글자세기('qwrqfqwffefkfkfk');
//문자열 배열에 담아 알파벳순 정렬하기2
const 결과 = {}; // 객체로 담을꺼니까.
[...글자].forEach(function (x) {
//만약에 결과에 x가 있으면 +1 해주시고 없으면 a : 1로 집어 넣어주세요.
if (결과[x] > 0) {
결과[x] += 1;
} else {
결과[x] = 1;
}
});
reference data type 객체의 복사
let 이름1 = { name: '김' };
function 변경(obj) {
obj = { name: 'park' };
}
변경(이름1); // 그대로 { name : '김'}을 출력한다.
새로운 사실. 파라미터는 변수를 생성하고 할당하는 것과 같다.
파라미터 변수(obj)에 = { 새로운 값 }을 넣어도 원래 이름1 오브젝트는 변화가 없다. 파라미터는 사용되고 사라지기 때문이다.