오늘은 ES6만의 주요 문법과 어제 배웠던 JS 문법들 복습하는 시간을 가졌다.
ES6에는 let
, const
키워드, 템플릿•객체 리터럴, 화살표 함수 등이 도입됐는데 그 중 spread/rest 문법과 구조 분해 할당을 배워볼 것임
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, 전개 연산자가 배열을 인수로 바꿔줬음
// 파라미터로 활용: 배열로 리턴
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
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); // 답은?!
});
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
같은 걸로 예외 처리를 잘하자
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");
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);
이거 틀림;
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이 맞지 않나
아래 코드는 화살표 + 클로저 함수를 겹친 것, 꼭 흐름 보고 가기!
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>");
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"];
pi
는 3.14라는 '값'이, 변수 arr
은 참조 자료형의 '주소'가 Stack
에 저장됨! 그 '주소'는 특별한 저장공간으로 이동시키는데 그걸 Heap
이라고 함immutable
), 참조형은 주소가(mutable
) 할당!Array는 기본적으로 Object임, 인덱스가 있는 객체랑 같아 typeof를 하면 object가 나옴
참조 데이터를 복사하면 데이터 바로아래 변수들은 복사가 되지만 변수 중 참조 데이터가 있다면 그 참조데이터들의 주소, Heap까지 복사가 안돼서 결국 수정됨! Lodash나 Ramda 라이브러리를 써야함, 9번 38줄도 함께 보기