algml0703

map과 filter 응용 HTML 삽입 미리보기할 수 없는 소스 map은 기본적으로 배열의 내장 함수로 존재하여 아래와 같이 작동할 수 있다. 그런데 아래의 코드를 실행하면 에러가 발생하여 실행되지 않는데, 이는 querySelectorAll()로 생성된 것은 배열이 아닌 이터레이터객체이기 때문이다. 그렇기 때문에 배열의 내장함수인 map이 존재하지 않아 에러가 발생한다. log(document.querySelectorAll("*").map((e) => a + 1)); 이런 경우 아래의 코드와 같이 for of를 사용하여 직접 map 함수를 만들어 사용할 수 있다. const map = (f, products) => { let names = []; for (const a of products) { n..

이터레이터와 제너레이터 - 자바스크립트의 내장 객체인 Array, set, map 은 대표적인 이터러블 객체이다. 이터러블 객체는 다양한 자료 형태에 대한 처리를 손쉽게 할 수 있도록 한다. - 이터러블 : 이터레이터를 반환하는 [ Symbol.iterator] () 을 가진 값 - 이터레이터 : { value , done } 객체를 리턴하는 next()를 가진 값 - 이터러블/이터레이터 프로토콜 : 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약 이터레이터는 아래와 유사한 구조로 되어 있으며, 각 요소는 for of 문을 통해 순회할 수 있다. - 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수 즉 이터레이터를 반환하는 함수이다. - 제너레이터는 function* 를 통해 ..

Map과 Set map과 set은 es6에서 새롭게 등장한 자료구조 타입이다. HTML 삽입 미리보기할 수 없는 소스 map은 객체와 유사하게 키와 값으로 데이터를 저장하는 반면, 문자열만을 키로 가질 수 있는 객체와 달리 map은 다양한 자료타입을 키로 가질 수 있다. 주요 메서드 new Map() map.set(key, value) : key와 value를 저장한다. map.get(key) : 해당 key에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다. map.has(key) : 해당 key의 존재 여부에 따라 true/false를 반환한다. map.delete(key) : 해당 key에 속하는 데이터를 지운다. map.clear() : map 안의 모든 요소를 제거..

리스트 순회하기 HTML 삽입 미리보기할 수 없는 소스 for i++ HTML 삽입 미리보기할 수 없는 소스 for of 자바스크립트의 내장값 Array / Set / Map Array, map, set은 자바스크립트 내장객체로서 이터러블, 이터레이터 브로토콜을 따른다. [ Symbol.iterator ] * 이터러블 -> 이터레이터를 리턴하는 [ Symbol.iterotor]( )를 가진 값, 즉 [Symbol.iterator]()을 실행 시 이터레이터를 반환하는 값. * 이터레이터 -> { value , done} 객체를 리턴하는 next()를 가진 값. * 이터러블/이터레이터 프로토콜 -> 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약 1) Array를 통한 접근 // Sy..

함수 고급 개념 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 const log = console.log; const a = 10; const add10 = a => a+ 10; const r = add10(a); log(r); HTML 삽입 미리보기할 수 없는 소스 자바스크립트에서 함수는 일급이기 때문에, 값으로도 다뤄질 수 있다. 또한 함수가 일급이라는 의미는 함수의 결과값으로 함수가 올 수 도 있음을 의미한다. const log = console.log; // 일급은 값으로 다뤄질 수 있고, 변수에 담길 수 있다. const a = 10; const add10 = a => a+ 10; const r = add10(a); log(r); // 일급은 함수의 인자로 사용될..

화살표함수와 일반함수 화살표함수 ( ) => { } 화살표 함수는 es6에서 새롭게 나타난 문법이다. 화살표함수는 기본적으로 함수명을 가지지 않아서 항상 함수를 생성후 변수에 할당해주는 함수표현식으로 작성해주어야 한다. 화살표함수에는 this가 존재하지 않는다. 화살표함수는 생성자함수가 될 수 없다. 일반함수 function( ) { } 일반함수는 기본적으로 함수선언식으로, 호이스팅의 영향을 받아 선언위치에 상관없이 함수 호출이 가능하다. 일반함수에는 this가 존재하는데, this는 자기자신을 가리킨다. 즉 fun내부에 count가 존재하기 때문에 this.count는 fun 내부의 count를 가리키게 된다. ...args를 통해 인자를 배열형태로 받을 수 있다. 출처 https://www.youtu..

함수표현식 const 변수명 = () => { } const 변수명 = function ( ) { } 아래와 같이 함수를 변수에 할당하는 방식이다. 함수가 선언되고 그 이후 즉 아래에 구현되는 코드에서만 해당 함수를 사용 가능하다. - return을 생략한 화살표 함수 - 객체를 반환하는 경후에는 ( )안에 넣어 이와 같은 형식으로 ({}) 작성해주어야 한다. 자바스크립트는 단순 {}는 함수의 바디라고 생각해서 해당 바디안에 return을 작성하지 않는 이상 반환하지 않고, 단순 계산에 그치게된다. - 함수가 선언되기 이전에 해당 함수를 사용하려 하면 아래와 같은 에러메시지가 발생한다. 함수선언식 function 함수명 ( ) { } 아래와 같은 형식으로 함수 생성하는 것을 의미하며, 함수가 선언되기 이..

padStart / padEnd string.padStart( [인자1], [인자2] ) 형태로 사용된다. 인자1로 주어진 수만큼의 여백을 앞에서부터 인자2로 채운다. const phoneNumber = "12345678"; console.log(phoneNumber.padStart(11, "010")); //01012345678 string.padEnd( [인자1], [인자2] ) 형태로 사용된다. 인자1로 주어진 수만큼의 여백을 뒤에서부터 인자2로 채운다. const height = "153"; console.log(height.padEnd(5, "cm")); // 153cm flat 2차원 배열을 1차원으로 만들어 준다. const arr = [ [1, 2], [3, 4], [5, 6], ]; co..

Default Parameters 함수에 기본값을 줄 수 있다. 함수에 인자값을 주면 해당 인자를 사용하고, 인자값을 넣지 않으면 기본값을 사용하게 된다. const makeLatte = (shot = 1) => { return `milk1 + shot${shot}`; }; const adult = makeLatte(); console.log(adult); // milk1 + shot1 const child = makeLatte(0); console.log(child); // milk1 + shot0 const programmer = makeLatte(2); console.log(programmer); // milk1 + shot2 Conditional Operator (삼항 연산자) 문법은 [ 조건식 ..

구조 분해 할당 : Destructuring assignment 배열이나 객체의 속성을 쉽게 해체하여 변수에 담아주는 javascript 표현식이다. 구조 분해 할당은 크게 배열 구조 분해와 객체 구조 분해로 나뉘게 된다. - 배열 구조 분해 배열에 담긴 요소들을 순서대로 해당 변수에 담아준다. const numbers = ["one", "two", "three"]; const [a, b, c] = numbers; console.log(`one: ${a} | two: ${b} | three: ${c}`); // one: one | two: two | three: three 각각의 변수에 배열을 통해 값을 할당하여 줄 수 있다. let a, b; [a, b] = [1, 2]; console.log(`a: ..