예문으로 알아보는 spreadsyntax, destructuring

🔅 배열 안에 배열로 들어가게 된다.

const spread = [1, 2, 3];
const arr = [0, spread, 4];

arr = [0, [1, 2, 3], 4]

---

🔅 배열에 아무것도 들어있지 않다면,
빈 배열로 들어가게 된다.

const spread = [];
const arr = [0, spread, 1];

arr = [0,[], 1]

---

• shallow copy / deep copy 예문

const fullPre = {
      cohort: 7,
      duration: 4,
      mentor: 'mango',
    };
const me = {
      time: '0156',
      status: 'sleepy',
      todos: ['study', 'hard'],
    };
    
const merged = { ...fullPre, ...me };

변수 merged에 할당된 것은 fullPre,me의 reference가 아닌 value이다.
spreadsyantax로 나열된 값을 반환하기 때문이다.
여기에서 value는 shallow copy / deep copy 중 무엇일까?
shallow copy는 두 변수가 독립적이지 않은 반면, deep copy는 두 변수가 완전한 독립성을 갖게된다.
위의 경우에는 shallow copy로 볼 수 있다.

shallow / deep copy에 대해선 따로 글을 작성할 예정.

---

❓함수의 매개변수는 2개인데,
리턴값으로 하나만 나오게 된다면 어떻게 될까?

function returnSecondArg(firstArg, secondArg) {
      return secondArg;
    }
///undefined로 나오게 된다.    

+)

function getAllParamsByRestParameter(...args) {
      return args;
    }
function getAllParamsByArgumentsObj() {
      return arguments;
    }    

const restParams = getAllParamsByRestParameter('one', 'two', 'three');//배열로나타남
const argumentsObj = getAllParamsByArgumentsObj('one', 'two', 'three');//객체로나타남

위의 예제에서 restParams는 ['one', 'two', 'three']
Object.keys(argumentsObj)는 [ '0', '1', '2' ]
Object.values(argumentsObj)는 ['first', 'second', 'third']
로 나타난다.
주목해야할 부분은 argumentsObj의 원소값이 value값으로 나타나고,
key값에는 순차적으로 0,1,2가 들어간 모습이다.

---

❕ 전달인자의 수가 정해져 있지 않은 경우에 restParameter를 사용해보기

function sum(...nums) {
      let sum = 0;
      for (let i = 0; i < nums.length; i++) {
        sum = sum + nums[i];
      }
      return sum;
    }

ex) sum(10,20,30) // 60

참고 + ) restParameter는 항상 배열이다.

+)restParameter이 전달인자의 일부에만 적용된다면

function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
getAllParams(30)    /// [30,undefined,[]]
//전달되지 않은 매개변수는 undefined,restParameter는 인자가 없을때 빈배열로 나타난다.

🐧 구조분해할당

🦋1)

const array = ['mango', 'is', 'a', 'dog']
const [one, two] = array<br>
one // 'mango'<br>
two //'is'<br>

🦋2)

const array = ['mango', 'is', 'a', 'dog']
const [start, ...rest] = array
start // 'mango'
rest // ['is', 'a', 'dog']

🦋3)

const name = '망고'
const age = 6

const dog = {
      name,
      age,
      level: 'anger',
    }
    
person // {name, age, level: 'anger'}

🦋4)

const student = { name: '도경', major: '세무학과' }
const { name } = student // { key } 를 student에 할당, 객체분해
	name // '도경' //name의 key와 value가 분해된 모습

🦋5)

const student = { name: '도경', major: '세무학과' }
const { name, ...args } = student //...arg는 name뒤의 키를 나열
	name // '도경'
    args // {major : '세무학과'}