Study/JavaScript

[JavaScript_study] 구조 분해 할당(Destructuring assignment)

* 구조 분해 할당(Destructuring assignment) 데이터 뭉치(그룹화)를 쉽게 만들 수 있다. indexing으로 값을 가져오는게 아닌 코드상에서 좀 더 의미 있는 이름으로 변수를 지정하기 변수를 배열처럼 그룹을 만들고 배열을 해당 변수에 할당한다. * 예시 코드 const fruits = ['사과', '키위', '딸기', '바나나']; const [first, second, ...others] = fruits; console.log(first); console.log(second); console.log(others); const point = [1, 2]; // defalut값 지정해주기 const [y, x, z = 0] = point; console.log(x); console.l..

[JavaScript_study] Spread operator

* Spread 연산자, 전개구문 모든 Iterable은 Spread 될 수 있다. 순회가 가능한 모든 것들을 촤르륵 펼쳐 질 수 있다. func(...iterable) [...iterable] {...obj} ECMAScript 2018년도의 최신문법이여서 예전버전에서는 호환이 안될수도 있다. (Babel을 이용해서 호환을 해주어야한다.) * Spread operator 예시 코드 function add(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; console.log(add(...nums)); // Rest parameters function sum(first, second, ...nums) { console.log(nums); } sum(1, 2..

[JavaScript_study] 제너레이터(generator)

* 이터러블을 좀 더 실플하게 만드는 방법이 제너레이터(generator)이다. 함수에 *을 붙여주어서 제너레이터를 만든다. yield는 다음 사용자가 next를 호출할 때 까지 기다렸다가 사용자가 next를 호출해야 다음 코드가 실행이 되어서 순회한다. 사용자에게 제어권을 양도한다. next를 호출하기전에 return을 하면 제너레이터가 끝이 나게 된다. throw를 이용해서 error를 던질 수 있다. [ 참고 사항 ] 이터러블과 제너레이터는 거의 구현할 일이 없다. * 제너레이터 예시코드 function* multipleGenerator() { try { for (let i = 0; i < 10; i++) { console.log(i); yield i ** 2; } } catch (error) { ..

[JavaScript_study] 이터러블(iterable)이란?

* iterable하다는건 순회가 가능하다는것이다. [Symbol.iterator](): IterableIterator; 심볼 정의를 가진 객체나, 특정한 함수가 IterableIterator를 리턴한다는것은 "순회 가능한 객체다"라는것을 의미한다. 순회가 가능하면 무엇을 할 수 있는가? 바로 빙글 빙글 도는 반복문, 연산자들을 사용할 수 있다. * 이터레이션 > 반복, 순회 * 이터레이션 프로토콜(Iteration Protocol) > 반복, 순회 가능한 규격, 약속, 인터페이스 * 클래스, 객체는 명사단위로 작명 > Iteration : 반복, 순회 * 규격, 인터페이스는 able를 붙여서 ~ 가능한(형용사)으로 작명 > Iterable : 순회가 가능한 따라서 작명을 보고 명사 : 클래스,객체 //..

[JavaScript_study] 고차함수 (Higher-Order Function)

* 일급객체 (first-class object) 일반 객체처럼 모든 연산이 가능한 것 함수의 매개변수로 전달 함수의 반환값 할당 명령문 동일 비교 대상 * 일급함수 (first-class function) 함수가 일반 객체처럼 모든 연산이 가능한 것 함수의 매개변수로 전달 함수의 반환값 할당 명령문 동일 비교 대상 [ 함수형 프로그래밍 ] 함수단위로 엮어 나가는것 for loop, if문을 이용한 이용한 절차지향이 아닌 어떤 특정한 일을 수행하는 함수끼리 엮어서 연결해놓은것 함수자체를 순수함수로 만드는것이 중요하다. 순수함수란?? 함수안에서 불변성을 유지하는것 불변성이란?? 함수안에서 전달받은 매개변수나 또는 함수밖에 있는 특정한 상태를 함수내부에서 수정하지않고 전달받은 인자를 통해서 함수에서 특정한 ..

[JavaScript_study] shallow copy

// 얕은 복사 Shallow Copy - 객체는 메모리 주소 전달 (Call by reference) // 자바스크립트에서 복사할때는 항상 얕은 복사가 이루어짐! // 아래와 같은 방법은 통해 복사를 해야한다. // Array.from, concat, slice, spread(...), Object.assign const pizza = { name: '피자', price: 2, owner: { name: 'Ellie' } }; const ramen = { name: '라면', price: 3 }; const sushi = { name: '스시', price: 1 }; const store1 = [pizza, ramen]; const store2 = Array.from(store1); console.lo..