TIL Day-13

Achievement Goals

• Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다.

Spread 문법

• 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers)

Rest 문법

• 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다.
• spread와 반대로 생각하면 됨

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
sum(1,2,3) // 질문: 어떤 값을 리턴하나요?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?

배열에서 사용하기

배열합치기

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4)

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

• mergedObj에서 obj2의 foo의 value는 'baz' 값을 갖는데, key가 겹치는 경우 뒤에 할당된 value를 값으로 사용하는 것 같다.

함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");

구조 분해 (Destructing)

• 구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

분해 후 새 변수에 할당

const [a, b, ...rest] = [10, 20, 30, 40, 50];
a = 10; b= 20; rest = [30,40,50]

const{a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a= 10; b = 20; rest= {c: 30, d: 40}

checkpoint

function printMaxNums(...args) {
  console.log(args)
}
printMaxNums(10, 30, 40)

...args는 rest parameter라고 부른다. 남아있는 모든 인자를 하나의 배열에 담기 때문에 이렇게 부른다.

let arr = [10, 30, 40, 20]
let value = Math.max(arr)

Math.max는 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메소드인데, 여기서는 배열을 전달받았으므로 사용할 수 없다. 즉 NaN가 리턴된다.

let arr = [10, 30, 40, 20]
let value = Math.max(...arr)

spread parameter가 사용됐고, 문자열, 배열 요소를 '펼쳐주는' 문법을 의미한다.

let arr = [10, 30, 40, 20]
let value = [...arr]

주소값을 복사한 것이기 때문에 원본의 값이 바뀌지 않는다.

let arr = ['code', 'states']
let value = [
  ...arr,
  'pre',
  ...['course', 'student']
]

value = ['code', 'states', 'pre', 'course', 'student']

• spread systax는 요소를 펼쳐서 넣어주는 것이다.
  만약 요소를 펼쳐서 넣지 않고 배열 자체를 넣는다면,

[['code', 'states'], 'pre', ['course', 'student']]

이 리턴될 수 있다.

sprint review

• let으로 선언 된 변수는 재선언이 불가능합니다. -> ?
• const로 선언 하더라도, 참조 자료형인 배열의 요소는 추가 및 삭제를 할 수 있다.
• arguments 객체는 배열이 아니기 때문에, 배열 메소드인 push를 사용할 수 없습니다. 이 점이 * 오랫동안 자바스크립트의 불편한 점으로 남아있어, ES6에서는 rest parameter를 사용할 수 있게 되었습니다.
• 함수 선언식은 호이스팅이 됩니다. 그래서 함수 표현식과는 선언 시점이 달라서 조심해서 사용해야 합니다.

6번문항(type-part2) : Object.keys(obj).length
6번문항(type-part2) : expect(person.son === { age: 9 }).to.equal(false);
7번문항(array) : typeof 에서 객체와 배열은 object로 반환
7번문항(array) : expect(arr).to.deep.equal([1,2]);
8번문항(object) : Object.keys(객체이름)
8번문항(object) : 'key값' in 객체이름 -> boolean type!
8번문항(object) : 얕은 복사, 깊은 복사
9번문항(spread) : 배열이 들어가면 배열이 반환, 문자열들이 들어가면 첫번째 문자열이 반환 ( 함수 호출시 인자의 순서가 중요하다)

js파일 꼼꼼하게 읽으면서 공부하기

1. 테케를 다룰 줄 알아야 함 (tdd)

2. const 에서 참조 자료형이 들어간 경우 같은 주소내에선 요소를 재할당 할 수 있다!!

3. 개발할 때 같은 변수명을 쓰는일은 매우 드물기 때문에 const로 쓰는게 좋다!

4. 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

5. TDZ (Temporal Dead Zone)

6. 함수선언식 function 함수명() {

7. 함수표현식 const 함수명 = function() {

8. 이 둘의 차이는 함수선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. -> 걍 암기하셈

9. 화살표함수(const 함수명 = () => { , 화살표함수는 this를 안쓴다!!heap

10. key와 value를 합쳐서 property(속성)이라고 생각하면 된다.

11. this

12. objects.keys.length로 객체의 길이를 찾을 수 있다!!!

13. 주소값은 다르고 객체 내부의 키 값들이 primitive type이면 각자 주소값을 갖는다.

14. spread systax 외워라!

15. argument 객체는 유사배열인데 배열 관련 함수를 적용할 수 없음. length나 Array.isArray, dot notation, braket notation

16. 원시 자료형이 할당되는 경우는 값 자체가 할당되고, 참조 자료형은 주소가 할당된다고 암기하자