코드스테이츠_3주차_수,목

윤뿔소·2022년 9월 7일
1

CodeStates

목록 보기
13/47

오늘은 ES6만의 주요 문법과 어제 배웠던 JS 문법들 복습하는 시간을 가졌다.

ES6 주요 문법

ES6에는 let, const 키워드, 템플릿•객체 리터럴, 화살표 함수 등이 도입됐는데 그 중 spread/rest 문법과 구조 분해 할당을 배워볼 것임

spread 문법

  • 전개 연산자 : ( ...)
  • 주로 배열에서 활용, 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용, 객체도 가능!
  • arr.slice() 같이 얕은 복사도 가능
// 기본
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [arr1, ...arr2, ...arr3]; // immutable하기에 할당 必
 // concat의 합치기와 비슷, ...안쓰고 써주면 2차원적으로 배열 그대로 합쳐짐
console.log(arrWrap); // [[1, 2, 3], 4, 5, 6, 7, 8, 9]
// 얕은 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
console.log(arr) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 4]
// 객체도 사용 가능!
const obj1 = { a: 'A', b: 'B' };
const obj2 = { c: 'C', d: 'D' };
// const objWrap = {obj1, obj2}; 객체데이터로서 2개로만 합쳐짐
// 첫번째 방법
const objWrap = {...obj1, ...obj2};
// 두번째 방법
const objWrap = {
  ...obj1,
  c: 'C', // obj2랑 같음
  d: 'D' 
};
console.log(objWrap); // { a: 'A',  b: 'B',  c: 'C',  d: 'D'}
// 인수로 활용: 인수 목록으로 리턴
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5, 전개 연산자가 배열을 인수로 바꿔줬음

Rest 문법 : Spread 연산자를 함수에!

  • 함수의 파라미터로 쓸 수 있음, 특히 개수에 제한이 없을 때 유용함
  • 함수의 파라미터에 인수와 그 나머지(rest)를 표현해줌
  • 작성한 전개 연산자는 배열로 리턴
// 파라미터로 활용: 배열로 리턴
function sum(...args) {
  console.log(arguments); 
  // Arguments(5) [1, 2, 3, 4, 5]
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

구조 분해 할당

  • 구조화된 배열 또는 객체를 디스트럭처링(Destructuring)하여 개별적인 변수에 할당하는 것

Koans

1. JSKoans

  • 코스에선 JS의 테스팅 라이브러리인 Jest를 이용해 문제를 풂
  • expect().to, be.true., .equal 등으로 테스트 코드를 써서 그게 맞는지 안맞는지 확인함!
it("'테스트하는 값'을 '기대하는 값'과 비교한 결과가 참 인지 확인합니다.", function () {
  // '테스트하는 값'은 우리가 작성한 어떤 코드의 실제 실행 결과 값이므로 '실제 값'임
  let actualValue = 1 + 1;
  let expectedValue = actualValue;
  expect(actualValue === expectedValue).to.be.true; // to.equal로 같은지 안같은지 불린 데이터로서 사용 가능
});
it("Matcher .equal의 사용법을 학습합니다.", function () {
  let actualValue = (1 + 1).toString(); // 
  expect(actualValue).to.equal(FILL_ME_IN); // 답은?!
});

2. Type1

JS의 다양한 타입을 복습과 더불어 JS의 개같은 성질을 봤음, 링크 심심하면 읽어보자 재밌음 ㅋㅋ, 이거때메 TS가 나올 정도로 싫어하는 사람들도 있음

// JS의 변수가 동적 타입을 가짐으로써 생기는 문제임,,
expect(1 + "1").to.equal("11");
expect(123 - "1").to.equal(122);
expect(1 + true).to.equal(2);
expect("1" + true).to.equal("1true");

결론 : 일치 연산자, let, const 같은 걸로 예외 처리를 잘하자

4. Scope

4-1. 함수 선언식 vs 함수 표현식

  • 선언식은 프로그래밍 언어에서 정석적으로, 일반적으로 함수를 선언하는 방식을 따름 - 호이스팅 가능!
  • 표현식은 JS의 변수가 동적 타입을 가져 유연한 특성을 이용해 변수에 할당하는 방식으로 함수를 만듦 - 호이스팅 불가!
  • 그러면 표현식을 왜쓰냐! 호이스팅이 필요없는 함수에 쓰면 됨!
    1.클로져로 사용
    2.콜백으로 사용
    3.화살표 함수로 사용
let funcExpressed = "to be a function";
// "undefined" 같지?! 이래서 함수는 실행부분만 보고 판단해야함
expect(typeof funcDeclared).to.equal("function"); 
// 위에 선언 및 할당이 되어있으니 string
expect(typeof funcExpressed).to.equal("string");

function funcDeclared() { // 호이스팅(hoisting)
  return "this is a function declaration";
}
funcExpressed = function () { // 재할당
  return "this is a function expression";
};

const funcContainer = { func: funcExpressed };
expect(funcContainer.func()).to.equal("this is a function expression");
funcContainer.func = funcDeclared;
expect(funcContainer.func()).to.equal("this is a function declaration");

4-2. 클로저 함수 복습

  • "함수가 선언"된 "어휘적(lexical) 환경"
  • 특이하게 JS는 함수가 호출되는 환경관 별개로 기존에 선언돼있던 환경(어휘적 환경)을 기준으로 변수를 판단함
  • 클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있습니다.
  • 이를 유념하시고 클로저의 유즈 케이스를 검색해 보시기 바랍니다. 아래 검색 키워드를 활용합니다.
  • function factories, namespacing private variables/functions
function increaseBy(increaseByAmount) {
  return function (numberToIncrease) {
    return numberToIncrease + increaseByAmount;
  };
}

const increaseBy3 = increaseBy(3);
const increaseBy5 = increaseBy(5); // 함수 표현식으로 유연한 대처

expect(increaseBy3(10)).to.equal(13);
expect(increaseBy5(10)).to.equal(15);
expect(increaseBy(8)(6) + increaseBy(5)(9)).to.equal(28);

쬐끄만하지만 헷갈리기 좋은 것 (feat.JS)

이거 틀림;

function pushNum(num, arr = []) { // 이거 보면 arr이 빈 대괄호로 써줘 배열을 인수로 받는다.
  arr.push(num);
  return arr;
}

expect(pushNum(4, [1, 2, 3])).to.deep.equal([1, 2, 3, 4]); // 여기서 4, [] 를 했으니 num과 배열, 즉 arr인 인수인 거시다!
});

궁금한거,,

let name = "jin";

function outerFn() {
  name = "jimin";
  function innerFn() {
    let name = "suga";
  }
  innerFn();
  return innerFn;
}
const innerFn = outerFn();

console.log(name); // "jimin"
// 왜 jin이 아닐까 전역에선 outerFn()이 시행되지 않았으니 재할당도 실행되지 않아 name은 그대로 Jin이 맞지 않나

5. 화살표 함수

아래 코드는 화살표 + 클로저 함수를 겹친 것, 꼭 흐름 보고 가기!

const htmlMaker = (tag) => (textContent) => `<${tag}>${textContent}</${tag}>`;
expect(htmlMaker("div")("code states")).to.eql("<div>code states</div>");

const liMaker = htmlMaker("li");
expect(liMaker("1st item")).to.eql("<li>1st item</li>");
expect(liMaker("2nd item")).to.eql("<li>2nd item</li>");

6. Type2

참조로 얕은 복사? 하는 법!

let currentYear = 2020;
function afterTenYears(year) {
  year = year + 10;
}
afterTenYears(currentYear); // 2030
expect(currentYear).to.equal(2020); // 전역의 currentYear은 영향 x
function afterTenYears2(currentYear) {
  currentYear = currentYear + 10;
  return currentYear;
}
let after10 = afterTenYears2(currentYear);
expect(currentYear).to.equal(2020);
expect(after10).to.equal(2030);
// 사실 함수의 전달인자도 변수에 자료(data)를 할당하는 것
// 함수를 호출하면서 넘긴 전달인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언
});

읽기 좋은 글: 데이터의 이론

  • 참조는 원시형(string, number, bigint, boolean, undefined, symbol, (null))을 뺀 나머지
const pi = 3.14
const arr = ["hello", "world", "code", "states"];
  • 위 코드는 JS에선 다르게 저장(under the hood), 변수 pi는 3.14라는 '값'이, 변수 arr은 참조 자료형의 '주소'가 Stack에 저장됨! 그 '주소'는 특별한 저장공간으로 이동시키는데 그걸 Heap이라고 함
  • 결론은 그냥 원시형은 값 자체가(immutable), 참조형은 주소가(mutable) 할당!
  • 그러므로 참조형은 값이 변하니 일단 같은

6번 마지막 정리

7. Array

Array는 기본적으로 Object임, 인덱스가 있는 객체랑 같아 typeof를 하면 object가 나옴

slice 정리: 전체 복사랑 (5,1)왜 이렇게 되는지

8. Object

객체 기본 정리 : length 안됨 ㅠㅠ, in은 불린데이터 반환

this 정리: 호출하는 시점에 결정, 52줄 정리

얕은 복사, 깊은 복사 정리

참조 데이터를 복사하면 데이터 바로아래 변수들은 복사가 되지만 변수 중 참조 데이터가 있다면 그 참조데이터들의 주소, Heap까지 복사가 안돼서 결국 수정됨! Lodash나 Ramda 라이브러리를 써야함, 9번 38줄도 함께 보기

9. Spread

함수 인자의 구분 52줄:특히 인수는 객체로 반환이지만 0부터 시작하는 키를 갖고있음, 배열은 아님

스프레드랑 레스트 차이는 풀어줄 때와 묶어줄 때의 차이! 10번 19줄

10. Destructuring

객체 단축: 38줄

48 56 66 객체의 rest문법 해보기

profile
코뿔소처럼 저돌적으로

0개의 댓글