본문 바로가기

프론트엔드 공부/javscript

 (34)
삼항연산자 const grade =55; const result = (grade>80)?'distingction' :(grade>50) ? 'pass' : 'fail'; console.log(result)//pass if / else 문을 대체하는 삼항연산자가 return을 여러 번 사용하고 if 블록 내부에서 한줄만 나올때 return을 대체 할 수 있음. if else if else 구문으로도 작성 가능 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
배열구조분해할당(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
객체구조분해할당(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..

티스토리툴바