본문 바로가기

프론트엔드 공부

 (134)
배열구조분해할당(destructing) let numbers=[10,22,33]; let [one, two,three,six = 80] = numbers; console.log(three);//33 console.log(six);//80 default value function bottle(){ return ['bottle','water']; } let[red,blue] = bottle(); console.log(red);//bottole
css grid 반응형 예제 grid 사용방법 .content_inner{ width:90%; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr;/*자연스럽게 500이하의 css 값이됨*/ grid-template-rows:auto; grid-gap:20px; } /*500이상일때는 2등분*/ @media screen and (min-width:500px){ .content_inner{ grid-template-columns:1fr 1fr; } .desc.first{ /*500이상일때 첫번째 아이템이 첫번째 컬럼부터 세번째 컬럼까지(2칸)사용*/ grid-column:1/3; } } /*800이상일때는 4등분*/ @media screen and (min..
객체구조분해할당(destructing) 예시 const person ={ name : 'Domenic', age:21 }; let{name,age,gender='Unknwon'} = person; //console.log(name);//Domenic //console.log(gender); //Unknwon //다음과 같은 방식으로 함수내 매개변수에 지정할 수 있다. function printDetails({name,age}){ console.log(`이름은 ${name}이고 나이는${age}이다`); } printDetails(person); //"이름은 Domenic이고 나이는21이다" 구조분해할당: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 var a, b, rest; [a, b] = ..
switch 열거문 const Direction = { UP:'UP', DOWN:'DOWN', LEFT:'LEFT', RIGHT:'RIGHT' }; function sayDirection(direction){ switch(direction){ case Direction.UP : console.log('we are going up'); break; case Direction.DOWN : console.log('we are going down'); break; case Direction.LEFT : console.log('we are going left'); break; case Direction.RIGHT : console.log('we are going right'); break; } }; sayDirection(Direc..
Map object let zoo = new Map(); zoo.set('ZZebra',5); zoo.set('Gorilla',7); zoo.set('Monkey',10); console.log(zoo); //{"ZZebra" => 5, "Gorilla" => 7, "Monkey" => 10} let zebraCount = zoo.get('ZZebra'); console.log(zebraCount);//5 var myMap = new Map(); // Add new elements to the map myMap.set('bar', 'foo'); myMap.set(1, 'foobar'); // Update an element in the map myMap.set('bar', 'baz'); get과 set을 사용하여 Map을 ..
reduce함수를 이용한 전체 합 구하기 let numbers = [1,2,3,4,5] let total = numbers.reduce(function(acc,cur){ return acc + cur }); console.log(total);//15 let total = [{qunt: 1}, {qunt: 2}, {qunt: 1}].reduce( (acc, cur) => acc + cur.quntity , 0 ) console.log(total) // 결과값: 4 let max = [1, 2, 3, 4, 5].reduce( ( max, cur ) => Math.max( max, cur ) ); console.log(max) // 결과값: 5 reduce 함수는 네개의 인수를 사용한다. Accumulator(누적값) Current Value(배열의..
04 array.map() let numbers = [1,2,3,4,5]; let newNumbers = numbers.map(n=>n*2); console.log(newNumbers); //2,4,6,8,10 map 메서드로 출력하기 arr.map(callback(currentValue[, index[, array]])[, thisArg]) developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
03 observer pattern(상태관리패턴) Increment class NumberModel{ constructor(){ this.number =0; this.color = 'red'; this.observers = []; } increment(){ const colors = ['orange','red','green','blue']; this.number++; this.color = colors[Math.floor(Math.random()*colors.length)]; this.notifyObservers(); } addObserver(o){ this.observers.push(o); }; notifyObservers(){ for(let o of this.observers){ o.update(this); //초기화함수? } } } class Hi..

티스토리툴바