본문 바로가기

프론트엔드 공부

 (134)
전개연산자(spread), rest parameter, 축약형 //전개연산자(spread) //전개연산자를 쓰는이유: 배열의 아이템을 매개변수로 넣을때 편하게 사용하기 위해 펼쳐주는것 const fruits = ['apple','banana','cherry']; console.log(fruits);//["apple","banana","cherry"] console.log(...fruits) //"apple","banana","cherry" function toObject(a,b,c){ return{ a:a, b:b, c:c } } console.log(toObject(fruits)) //"a":[ // "apple", // "banana", // "cherry" // ] console.log(toObject(...fruits)) // { // "a":"apple",..
구조분해할당(Destructing assignment) - 객체,배열 //구조분해할당(Destructing assignment) //객체내 key 값을 변수화하여 사용 // 변수내 key 값이 undefined인 경우의 값은 default 값을 구조 분해할당 변수 //내에서 지정할 수도 있음 //구조분해할당(Destructing assignment) //객체내 key 값을 변수화하여 사용 const user = { name: 'minji', age: 31, email : 'minji@gmail.com' } const {name,age : weight, address = 'korea'} = user console.log(`사용자의 이름은 ${name}입니다`); console.log(weight); //20 console.log(address); //korea //사용자의 ..
정적메서드 Object.keys(); 사용시 인덱싱사용하는 이유 //정적메서드 Object.keys //전역객체 Object안에 keys라는 정적메서드 실행하여 user 인수 받아옴 const user = { name: 'minji', age: 31, email: 'minji@gamil.com' } const keys = Object.keys(user); console.log(keys); //["name","age","email"] //보통 객체 데이터의 value값 가져올때 user.name으로 많이 가져오는데 //Object.keys는 배열값을 받아옴으로 user['name']으로 많이 사용 const values = keys.map(key => user[key]) console.log(values); //["minji",31,"minji@gmail.com"]
정적메서드 Object.assign(); 복사와 참조의 차이 //Object : 전체 영역에서 사용 가능한 전역객체(asign은 prototype메서드x) //정적메소드는 일반 객체 데이터에는 직접사용할수 x, 전역객체에 직접적으로 사용하는 메서드 const result = Object.assign(target,source); console.log(result === target) //true //assgin 정적메서드의 타겟과 출처가 복사된 결과값은 일치한다. //정적메서드 assign 사용하기 //assign()은 prototype안에 내장되어있는 함수가x 객체에 직접 부여 //Object.assgin() //열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성응ㄹ 복사하여 대상 객체를 반환 const target = {a:1, b:2}; const s..
정적 메서드와 정적 프로퍼티 정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 '전체’에 필요한 기능을 만들 때 사용할 수 있습니다. 인스턴스끼리 비교해주는 메서드나 팩토리 메서드를 만들 때 정적 메서드가 쓰입니다. 정적 메서드는 클래스 선언부 안에 위치하고 앞에 static이라는 키워드가 붙습니다. 정적 프로퍼티는 데이터를 클래스 수준에 저장하고 싶을 때 사용합니다. 정적 프로퍼티 역시 개별 인스턴스에 묶이지 않습니다. **참고자료 https://ko.javascript.info/static-properties-methods 정적 메서드와 정적 프로퍼티 ko.javascript.info
정규식표현 + .find(),.findIndex,includes() //.find(), .findIndex(), includes() const numbers =[1,2,3,4]; const fruits = ['apple','banana','cherry']; const a = fruits.find(elem=> /^b/.test(elem) //B로 시작하는 문자열 찾아서 boolean ) console.log(a); //banana const b = fruits.findIndex(elem=>/^c/.test(elem) //c로 시작하는 문자열 index ) console.log(b); //2 const c = fruits.includes('apple'); console.log(c); //true /**text()와 정규식표현 //RegExp.prototype.test() /..
map과 forEach 차이 //map & forEach //forEach는 아이템 갯수만큼 콜백함수를 반복(return값x) //map은 아이템 갯수만큼 콜백함수를 반복 + 콜백 내부에서 return 키워드로 //반환 데이터를 새로운 배열로 만들어 사용 가능 const numbers =[1,2,3,4]; const fruits = ['apple','banana','cherry']; const a = fruits.forEach(function(fruit,index){ console.log(`${fruit}-${index}`); }); //apple-0 bannan-1 cherry-2 console.log(a); //undefined const b = fruits.map(function(fruit,index){ return{ id:i..
gsap.timeline() timeline메서드를 활용하여 각 target에 timeline부여 let tl = gsap.timeline(); //total duration: tl .to(".one",{duration:2,x:500}) //2초 동안 x축으로 500px .to(".two",{duration:3,x:500},1) // 1초 후 3초동안 x축으로 500px(1은 absolute값) .to(".three",{duration:1,x:500},"

티스토리툴바