본문 바로가기
반응형

ES68

배열에서 원하는 객체 찾기 find() 메서드를 이용해 배열안에 원하는 객체를 찾습니다. find()는 일치하는 첫번째 요소만 반환해줍니다. const arr = [{ a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 }, { a: 7, b: 8 } ]; const result = arr.find(obj => { return obj.b === 6; // { a: 5, b: 6 } }); 원하는 값을 가진 모든 객체를 반환하려면 filter()를 이용하면 됩니다. filter()는 새 배열을 만들어 리턴해줍니다. const arr = [ { name: 'string 1', value: '1,2' }, { name: 'string 2', value: '2' }, { name: 'string 2', value.. 2020. 9. 10.
배열 유사배열 1 2 3 4 5 6 7 8 9 10 const btns = document.getElementsByClassName("btn"); btns.forEach(btn => { btn.addEventListener("click", () => console.log("클릭")) }); 버튼을 클릭할때마다 콘솔이 찍히게 하려하지만 위의 코드는 에러가 납니다. btns가 배열처럼 보이지만 사실은 유사배열이기 때문에 forEach같은 배열 메서드를 사용할 수 없습니다. Array.isArray(btns) 을 찍어보면 false가 나오는걸 보실 수 있습니다. Array.from(btns).forEach(btn => { btn.addEventListener("click", () => console.log("클릭")) }).. 2020. 6. 3.
ES6 향상된 객체 리터럴 var test = { word: 10, // ES5 look: function(){ console.log('ES5') }, // ES6 look(){ console.log('ES6') }, // ES5 image: image, // ES6 image } 기존에 객체에 함수를 만들때 look: function(){ ... } 와 같이 만들었지만, ES6에서는 function 을 생략하고 look(){ ... } 처럼 축약해서 만들 수 있습니다. 또, 객체에서 속성과 값이 같으면 한개는 생략하고 사용할 수 있습니다. 2019. 11. 24.
화살표 함수 // ES5의 함수 표현식 var es = function(){ console.log('hello'); } es(); // 'hello' // ES6의 화살표 함수 표현식 let es = () => { console.log('hello'); } es(); // 'hello' 함수내의 처리문이 하나면 중괄호를 생략할 수 있습니다. let es = () => console.log('hello'); es(); // 'hello' 매개변수를 전달받아 리턴하는 과정도 간단해집니다. // ES5의 매개변수 전달, 리턴 var add = function(a,b){ return a + b; } console.log( add(1,4) ); // 5 // ES6의 매개변수 전달, 리턴 let add = (a,b) => {.. 2019. 10. 24.
ES6의 클래스 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. https://book.naver.com/bookdb/book_detail.nhn?bid=12285042 자바스크립트 프로젝트북 실무 개발자를 위한 웹 프로그래밍 레시피!프로그래밍 언어를 공부할 때는 실무에서 많이 사용하는 코드를 조금씩 구현해보면서 익히는 것이 좋다. 이 책에서는 실무와 밀접한 내용을 다양한 유형의 웹 애플리케이션이나 UI 요소로 익힐 수 있도록 9가지 프로젝트를 구성했다. 프로젝트 주요 부분에 자바스크립트와 제이쿼리 소스를 함께 수록하여, 자바스크립트와 제이쿼리를 함께 이해하고 실무 능력을 키울 수 있게 했다. book.naver.com ECMAScript 6 Class 기존의 자바스크립트에 없던 클래스가 ES6에서부턴 선언할 수 있.. 2019. 10. 17.
스크롤했을때 나타나는 이미지 처음엔 안보이다가 스크롤을 했을때 스르륵 나타나는 이미지를 ES6를 사용해 만들어 봤습니다. .img { position: relative; background: url(http://lorempixel.com/output/nightlife-q-c-400-400-3.jpg) 50% / cover; width: 400px; height: 400px; } .fill { position: absolute; left: 0; top: 0; z-index: 5; background: #ddd; width: 100%; height: 100%; transform-origin: 100% 0; transition: all 1s ease; } .img.on .fill { transform: scaleX(0); } functi.. 2019. 9. 26.
반응형

티스토리툴바