본문 바로가기

Javascript

 (16)
[JS] ES6 map, filter, reduce 정리 참고 링크 https://velog.io/@decody/map-%EC%A0%95%EB%A6%AC ES6의 map, filter, reduce 정리 일반적인 Loop 구문 map() 인자값: currenValue, index, array 요소를 일괄적으로 변경 filter() 요소를 걸러내어 배열로 true/false 반환, 없으면 빈 배열 find() 단 하나의 요소만 반환, 여러 개 있으면 처음값만 velog.io
[JS/ES6] Object assign Object assign Object를 원초적, 직접적으로 할당받는 방법을 소개합니다. const healthObj = { showHealth : function() { console.log("오늘의 운동시간:" + this.healthTime); }}const myHealth = Object.assign(Object.create(healthObj), { name: "yj", healthTime: "15:00"});console.log("myhealth is ", myHealth);myHealth.showHealth(); Object.create(obj) 만 사용할 경우 object를 생성만 하고 값을 넣지 않은 형태입니다. 값을 따로 지정해주어야 합니다.Object.assign은 create 값과 넣을..
[JS/ES6] class로 객체 생성 class로 객체 생성 // 기존 js function Flower(name) { this.name = name; } Flower.prototype.showFlower = function() { console.log("꽃의 이름은 " + this.name + " 입니다."); }; const f = new Flower('장미'); f.showFlower(); // ES6 class class Flower2 { construnctor(name) { this.name = name; } showFlower() { console.log("꽃의 이름은 " + this.name + " 입니다."); } } const f2 = new Flower('튤립'); f2.showFlower(); 기존 js에서 생성자를 만들..
[JS/ES6] default parameters, rest parameters default parametersfunction gob(a, b) {return a * b;} console.log(gob(2)); // NaN함수에 선언된 파라미터의 개수만큼 호출하지 않게 되면 b는 undefined 가 되고 sum(2)의 결과로 NaN 을 출력합니다. function gob2(a, b=3) {return a * b;} console.log(gob(2)); // 6b의 파라미터 값을 초기화해두어서 파라미터가 제대로 들어오지 않았을 경우에 초기화된 파라미터 값을 사용했습니다.이렇게 파라미터의 초기 값을 지정해두는 것이 default parameters 입니다. 객체로 초기화function objGob(a, b={value:2}) {return a * b.value;} console.lo..
[JS/ES6] 화살표 함수 (Arrow function) 화살표 함수 사용법 기존 익명 함수를 만들 때 function () {} 으로 사용했던 것을 화살표 함수를 사용해서 '축약형'으로 나타냅니다. // 이전 자바스크립트 버전 setTimeout (function() {console.log('hello world');}, 1000); let newArr = [1,2,3,4,5].map(function(value, index, object) {return value * 3;}); // ES6 화살표 함수 사용 setTimeout (() => {console.log('hello world');}, 1000); let newArr = [1,2,3,4,5].map((v) => (v*3) ); 매개변수 지정법 () => {...} // 매개변수가 없을 때 x => {..
[JS/ES6] template, tagged template literals template const string1 = b + ', my ' + a + ' ' + object.c;처럼 문자열과 변수를 + 를 이용해 잇는 것을 조금 더 편하게 하기 위해 const string2 = `${b}, my ${a} ${object.c}`;이렇게 jsp의 el태그처럼 생긴 것을 사용하는 방법이 template 입니다. "", ''같은 따옴표가 아닌, 백틱 이라는 `` 따옴표를 사용하여 그 안에 문자열과 ${변수} 를 담습니다. const a = 3; const b = 'hi'; const object = { c: 'friends' } const string1 = b + ', my ' + a + ' ' + object.c; const string2 = `${b}, my ${a} ${obje..
[JS/ES6] from 메서드 (진짜 배열 만들기) from 메서드로 진짜 배열 만들기 배열 같지만 배열이 아닌 것들이 존재합니다. 예를들어 함수의 arguments 객체도 배열처럼 동작하지만 배열이 아닙니다.이런 객체를 진짜 배열로 바꿔주는 메서드가 from 입니다. function add() { let newArray = Array.from(arguments);let newData = newArray.map(function(value){return value + "~";});console.log(newData);}add(1,2,3,4,5); map은 배열에서만 상용가능한 메서드인데 arguments는 배열이 아니기 때문에 사용할 수 없습니다.from을 이용해서 진짜 배열로 동작하도록 만들고 map을 이용해서 원하는 동작을 수행할 수 있습니다.
[JS/ES6] spread operator 배열의 복사 (immutable array) spread operator를 번역하면 펼침 연산자 입니다.이 연산자는 ... 를 사용합니다.마치 String의 concat이 새로운 공간을 할당받아 이어진 문자열을 만들어 주는것 처럼,spread operator를 사용하면 새로운 공간을 할당받아 복사된 값을 가진 배열을 만듭니다. let pre = ["apple", "banana", 100]; let newData = [...pre];console.log(pre, newData);console.log(pre === newData); 물론 참조가 아닌 복사이기 때문에 === 연산자로 비교하면 false가 나옵니다. 배열을 합침 let pre = [10,20,30];let result = ['a', 'b', ...

티스토리툴바