안녕하세요! 오늘도 모던 JavaScript에 대해 배운 것을 아웃풋 해 가고 싶습니다!
오늘은 분할 할당, 기본값, 스프레드 구문에 대한 것입니다.

분할 대입

const myProfile = {
  name: 'ジョーダンヘンダーソン',
  age: 31,
 }

 const message = `私の名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`
 console.log(message);

주목해야 할 템플릿 문자열의 값을 호출하는 부분. 이번에는 myProfile에서 2개의 프로퍼티를 호출하는 것만으로 끝났습니다만, 설정하는 프로퍼티가 늘어나, 취득하는 횟수가 늘어나거나, 오브젝트명이 긴 때라든지 하나 하나 기술하는 것이 귀찮아요.

그래서 분할 대입입니다.

const myProfile = {
  name: 'ジョーダンヘンダーソン',
  age: 31,
 }

 const {name, age} = myProfile;

 const message = `私の名前は${name}です。年齢は${age}歳です。`
 console.log(message);

분할 대입을 이용하는 것으로 지정의 프로퍼티를 꺼내, 자유롭게 이용하는 것이 가능하기 때문에 편리하네요. 기술량도 적기 때문에 즐겁게.
또한 이거는 배열에서도 사용할 수 있습니다.

const moSarah = ["足が速い",28];
const [character, age] = moSarah;
const message = `彼の特徴は${character}ことです。年齢は${age}歳です。`
console.log(message);

기본값

const sadioMane = (character) => console.log(`あなたは${character}ですね!`);
sadioMane();

이제 콘솔을 보면,


라고 표시됩니다. 그럼 인수의 부분을 비워, sadioMane()로 했다고 합시다.

const sadioMane = (character) => console.log(`あなたは${character}ですね!`);
sadioMane();

JavaScript가 아무것도 값을 설정하지 않으면 undefined로 출력됩니다!
이럴 때는 character 안에 초기값으로 설정하고 싶은 값을 넣어 문제를 해결할 수 있습니다!

const sadioMane = (character　= 'セネガル代表') => console.log(`あなたは${character}ですね!`);
sadioMane();

스프레드 구문

스프레드(spread)의 화역으로서는, 「늘린다」 「넓히다」라고 하는 의미의 동사인 것 같습니다.
명사로 이용될 때는 「퍼짐」이라고 하는 의미가 된다고 합니다.

배열 확장

배열의 요소를 합산하는 경우를 예로 들어 보겠습니다.

const ary = [1,2];

const sumAry = (num1, num2) => console.log(num1 + num2);
sumAry(ary[0], ary[1]);

　スプレッド構文を利用
sumAry(...ary);

스프레드 구문을 이용하면 요소가 차례로 설정되어 가기 때문에, 기술량이 적어지네요.
Ruby라면 이런 구문이 없기 때문에 (있으면 죄송합니다.) 배열의 덧셈은 inject 메서드나 sum 메서드를 이용합니다!

　## 배열 정리

const ary = [1,2,3,4,5];

const [num1, num2, ...ary2] = ary;
console.log(num1);
console.log(num2);
console.log(ary2);

출력 결과


분할 대입과 조합하는 것으로 일부의 배열을 정리하고 싶을 때에도 스프레드 구문을 이용할 수 있습니다.

배열 사본, 짱코

const student1 = ['悠仁', '恵', '野薔薇'];
const studentCopy = [...student1];
console.log(studentCopy);

const student2 = ['棘','真希', 'パンダ'];

const majicStudents = [...student1, ...student2];
console.log(majicStudents);

출력 결과


배열의 결합은 Ruby라면 push 메소드와 flatten 메소드를 이용하는 것으로 (조금 귀찮습니다) 처리를 실시할 수 있습니다만, JavaScript는 스프레드 구문을 이용할 수 있으므로, 간단하네요.

배열의 카피에 스프레드 구문은 이용하지 않더라도 에엔 버리는가? 라고 생각했습니다.
조금 해보겠습니다.

const students1 = ['悠仁', '恵', '野薔薇'];
const newStudents = students1;
newStudents[0] = '虎杖'
console.log(students1);

newStudents에 students1이라는 배열을 할당했습니다.
그리고 newStudents의 0 번째 요소를 다시 작성했습니다.
console.log에서 students1의 배열을 확인하러 가면 무려 newStudents 측에서 설정한 값과 같이 설정되어 버렸습니다! !
원래의 장소를 참조되기 때문에, 이러한 영향을 받게 되네요!
이것을 방지하기 위해 스프레드 구문을 사용하는 것 같습니다. 재미 있습니다.