TIL - 21.07.02 👨‍💻

Spread syntax ( 전개 구문 )

배열에서의 전개 구문

배열에 있는 요소를 배열 명 앞에 점 세개 붙히는 것으로 문자열로 호출한다.
배열끼리 합치거나 배열까지 복사하는데 사용할 수 있으며 복사하거나 합쳐진 배열들은 얕은 복사가 되며 전개 구문은 원 배열에 영향이 가지 않는 Immutable한 문법이다.

• 깊은 복사와 얕은 복사는 차후 OiMW로 정리하겠다.

// 배열 합치기 예제 
let a = [1, 2, 3];
let b = [4, 5, 6];

let ab = [...a, ...b]; 
let ba = [...b, ...a];
console.log(ab) // [1, 2, 3, 4, 5, 6]; 
console.log(ba) // [4, 5, 6, 1, 2, 3]; 

// 배열 복사 예제
let a = [1 ,2 ,3]
let b = [..a] // a.slice()와 비슷하다.

b.pop(); // 3;
console.log(b) // [1, 2]
console.log(a) // [1, 2, 3]; 배열 b의 요소가 수정되었지만 원 배열 a의 요소는 변함이 없다.
// 다만 얕은 복사(shallow copy)이기에 배열의 요소로 객체, 배열등이 올때 
// 그 해당 요소들에는 해당 요소의 데이터가 있는 Heap의 주소만 저장된다.

객체에서의 전개구문

배열에서의 경우와 유사하게 객체를 복사하거나 복수의 객체를 합칠때 사용한다.
다만 복사의 경우는 배열과 비슷하지만, 복사할때는 조금 다르다.
같은 프로퍼티 키를 가지고 있는 객체끼리 합칠때가 다른데, 이 경우는 늦게 입력한 객체의 프로퍼티 밸류를 가지고 있는 객체가 반환된다.

// 객체 합치기 예제
let a ={
  name: 'sunghoon',
  job: 'officer',
};

let b ={
  job: 'dev'
  age: 26;
};

let c = {...a, ...b};
console.log(c) // { name: 'sunghoon', job: 'dev', age: 26 }
// 프로퍼티 키가 job인 프로퍼티의 값이 officer에서 dev로 바뀌었다.

// 객체 복사 예제
let a ={
  name: 'sunghoon',
  job: 'dev',
};

let b = { ...a }

delete b.job;
console.log(b) // { name: 'sunghoon' }
console.log(a) // { name: 'sunghoon', job: 'dev' }
// 복사한 객체인 b의 프로퍼티가 수정되었지만 원 객체인 a의 프로퍼티에 변경은 없다.

Rest 파라미터

rest 파라미터는 정해지지 않은 수의 요소를 가진 인수를 배열로 나타낼 수 있게 해준다.
쉽게 말해서 매개 변수를 배열 형태로 받아서 사용가능하고 매개 변수의 갯수가 가변적일때 사용할 수 있다.
단, rest 파라미터 이후에는 다른 매개 변수나 트레일링 콤마가 올 수 없다.
입력된 인자가 적어 rest 파라미터에 할당되지 못하면 빈 배열이 반환된다.

const favFruit = function(fruit1, fruit2, ...fruits) {
  console.log('My favorite fruit is ' + fruit1)
  console.log('and I also like ' + fruit2)
  console.log('and there\'s ' + fruits.length + ' more fruits that I like')
  console.log(fruits)
}
             
favFruit('grape', 'melon', 'peach', 'apple', 'pineapple')
  // My favorite fruit is grape;
  // and I also like melon;
  // and there's 3 more fruits that I like
  // ['peach', 'apple', 'pineapple']; // 나머지 인자들이 배열의 형태로 할당되었다.

구조 분해 할당

구조 분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 JavaScript의 표현식이다.
배열이나 객체를 분해할때 rest 파라미터를 이용할 수 있다.

// 배열의 경우
const [a, b, ...c] = [1, 2, 3, 4, 5]

console.log(a) // 1; 
console.log(b) // 2; a,b는 숫자열이다.
console.log(c) // [3, 4, 5]

// 객체의 경우
const {a, b, ...c} = {a:1, b:2, c:3, d:4, e:5}
console.log(a) // 1; 
console.log(b) // 2; a,b는 숫자열이다.
console.log(c) // { c:3, d:4, e:5}

// 함수 사용 예제
function orderBurger({kindOf, sauce, topping,}){
  console.log(`${sauce}소스와 ${topping}이/가 추가된 ${kindOf}버거가 주문되었습니다.`)
}
let iWant = {
  kindOf: '통새우',
  sauce: '핫케첩',
  bread: '참깨빵',
  topping: '치즈',
}
orderBurger(iWant);
// 핫케첩소스와 치즈이/가 추가된 통새우버거가 주문되었습니다.; 
// 객체(iWant)의 프로퍼티중 함수의 매개 객체에 있는 변수와 일치하지 않는게 있으면
// 그냥 무시하고 있는 것들만 찾아서 함수가 실행된다.

Shorthand notation ( 단축 표기법 )

단축 표기법은 전역에 선언되고 할당된 변수가 있는 상태에서 객체리터럴에서 해당 변수가 키로 있으면 전역 변수를 가져와서 벨류삼는 것이다.

let name = 'sunghoon'

let planet = {
  name,
  age: 26,
}

console.log(planet) // { name: 'sunghoon', age: 26 }

Koans 풀며 알아낸 것

• 사칙연산 중 + 를 제외하고 나머지는 값을 항상 숫자열로 반환한다.
• 불리언 타입과 숫자열을 계산하면 true는 1, false는 0으로 더해진다.
• 화살표 함수는 함수 내 자신의 this가 없기에 함수 바로 밖에서 this를 찾는다.
• 객체끼리 합칠땐 Object.assign(obj1, obj2)를 이용하자.

GOOD 😉

전개 구문과 rest 파라미터를 익혔다.
페어분과 Koans를 풀며 자바스크립트와 보다 친해졌다.

BAD 😥

Koans를 풀며 복습이 중요하다는걸 다시 한번 깨달았다.

TO DO 🔥

• 객체 깊은 복사, 얕은 복사
• DOM 구조
• 이벤트 객체
• 고차 함수
• React

Retrospect 🧐

벌써 한 주가 훌쩍 지났다.
숙취 때문에 생활패턴이 완전히 망가지고 정신없이 공부하다 보니 벌써 금요일이라니.
역시 뭔가에 집중하고 있으면 시간은 금방금방 흘러가는 것 같다.

시작한지 얼마 안된 것 같은데 벌써 2주 조금 안되는 시간 후에는 첫번째 HA와 맞붙게 생겼다.
강해져서 쉽게 때려 눕힐 수 있길 고대한다.

그리고 오늘은 금요일이고 뭔가 그냥 보내기 아쉬우니 맥주 한 잔 하며 마지막을 장식하는걸로.
왈왈

Reference 🙇

https://developer.mozilla.org/