Koans-09_SpreadSyntax
5246 단어 Spreadsyntax스프레드Spreadsyntax
- 전개 문법(spread syntax)을 학습합니다.
const spread = [1, 2, 3];
const arr = [0, ...spread, 4];
expect(arr).to.deep.equal([0, 1, 2, 3, 4]);
const spread2 = [1, 2, 3];
const arr = [0, spread2, 4];
expect(arr).to.deep.equal([0, [1, 2, 3], 4]);
const spread3 = [];
const arr = [0, spread3, 1];
expect(arr).to.deep.equal([0, [], 1]);
const spread4 = [];
const arr = [0, ...spread4, 1];
expect(arr).to.deep.equal([0, 1]);
- 여러 개의 배열을 이어붙일 수 있습니다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concatenated = [...arr1, ...arr2];
console.log(concatenated) // [ 1, 2, 3, 4, 5, 6]
arr1.concat(arr2); 이것도 가능하다.
- 여러 개의 객체를 병합할 수 있습니다.
const fullPre = {
cohort: 7,
duration: 4,
mentor: 'hongsik',
};
const me = {
time: '0156',
status: 'sleepy',
todos: ['coplit', 'koans'],
};
const merged = {...fullPre, ...me};
console.log(merged)
//
merged= {
cohort: 7,
duration: 4,
mentor: 'hongsik',
time: '0156',
status: 'sleepy',
todos: ['coplit', 'koans'],
}
변수 'merged'에 할당된 것은 'obj1'과 'obj2'의 value일까요, reference일까요?
// value가 할당되었습니다.
만약 값(value, 데이터)이 복사된 것이라면, shallow copy일까요, deep copy일까요?
// deep copy 입니다.
- Rest Parameter는 함수의 인자를 배열로 다룰 수 있게 합니다.
자바스크립트는 (named parameter를 지원하지 않기 때문에) 함수 호출 시 인자의 순서가 중요합니다.
function returnFirstArg(firstArg) {
return firstArg;
}// 첫번째 인자를 무조건 출력합니다.
console.log(returnFirstArg('first', 'second', 'third'))//'first';
function returnSecondArg(firstArg, secondArg) {
return secondArg;
}// 매개변수가 두개일때는 가능하다.
console.log (returnSecondArg('only give first arg'))//undefined;
console.log (returnSecondArg('abc', 'cde') // 'cde';
- rest parameter는 spread syntax를 통해 간단하게 구현됩니다.
function getAllParamsByRestParameter(...args) {
return args;
}
console.log(getAllParamsByRestParameter(13)) // [13];
const restParams = getAllParamsByRestParameter('first', 'second', 'third');
console.log(restParams)//['first', 'second', 'third'];
- argument 객체 :(spread syntax 도입 이전)
arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'(유사배열객체)입니다
function getAllParamsByArgumentsObj() {
return arguments;
}
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
console.log(Object.keys(argumentsObj))//['0', '1', '2'];
console.log(Object.values(argumentsObj))//['first', 'second', 'third'];
console.log(argumentObj)// 아래와 같이 객체 형태로 소환이 됩니다.
Arguments(3) ["first", "second", "third", callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "first"
1: "second"
2: "third"
callee: ƒ getAllParamsByArgumentsObj()
length: 3
Symbol(Symbol.iterator): ƒ values()
- argumetns와 rest parmeter를 통해 배열로 된 인자(args)의 차이를 확인하시기 바랍니다.
expect(restParams === argumentsObj).to.deep.equal(false);
//restParams :배열 argumentsObj :객체
expect(typeof restParams).to.deep.equal('object');
expect(typeof argumentsObj).to.deep.equal('object');
expect(Array.isArray(restParams)).to.deep.equal(true);
expect(Array.isArray(argumentsObj)).to.deep.equal(false);
const argsArr = Array.from(argumentsObj);
expect(Array.isArray(argsArr)).to.deep.equal(true);
expect(argsArr).to.deep.equal(['first', 'second', 'third']);
expect(argsArr === restParams).to.deep.equal(false);
// 주소가 다르기 떄문에 같지 않습니다.
- Rest Parameter는 인자의 수가 정해져 있지 않은 경우에도 반복을 통해서 유용하게 사용할 수 있습니다.
function sum(...nums) {
let sum = 0;
for (let i = 0; i < nums.length; i++) {
sum = sum + nums[i];
}
return sum;
}
expect(sum(1, 2, 3)).to.equal(6);
expect(sum(1, 2, 3, 4)).to.equal(10);
- Rest Parameter는 인자의 일부에만 적용할 수도 있습니다.
function getAllParams(required1, required2, ...args) {
return [required1, required2, args];
}
expect(getAllParams(123)).to.deep.equal([123, undefined, []]);
function makePizza(dough, name, ...toppings) {
const order = `You ordered ${name} pizza with ${dough} dough and ${toppings.length} extra toppings!`;
return order;
}
expect(makePizza('original')).to.equal(`You ordered undefined pizza with original dough and 0 extra toppings!`);
expect(makePizza('thin', 'pepperoni')).to.equal(`You ordered pepperoni pizza with thin dough and 0 extra toppings!`);
expect(makePizza('napoli', 'meat', 'extra cheese', 'onion', 'bacon')).to.equal(`You ordered meat pizza with napoli dough and 3 extra toppings!`);
출처: 코드스테이츠
Author And Source
이 문제에 관하여(Koans-09_SpreadSyntax), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jelkov/Koans-09SpreadSyntax저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)