모던 자바스크립트
-
[모던 자바스크립트] 세트, 문자열 패딩프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:37
set (세트) 세트란 어떠한 자료형의 값이든 각 원소를 고유하게 저장하는 객체이다. 고유한 값만 보유할 수 있는 set의 특징을 이용하여 배열에서 중복을 제거할 수 있다. const myArray = ['a', 'b', 'c', 'd', 'a', 'a', 'b', 'b']; const set = new Set(myArray); console.log(set); // Set {'a', 'b', 'c', 'd'}; // Set을 배열로 변환하기 const uniqueArray = Array.from(set); console.log(uniqueArray); // ['a', 'b', 'c', 'd']; // 한줄로도 구현가능 const uniqueArray = Array.from(new Set(myArray))..
-
[모던 자바스크립트] 루프프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:18
- 배열에 대한 반복 1. 기존 for문 var fruits = ['apple', 'banana', 'orange']; for (var i=0; i < fruits.length; i++) { console.log(fruits[i]); } // apple // banana // orange 2. for of 문 const fruits = ['apple', 'banana', 'orange']; for (const fruit of fruits) { console.log(fruits[i]); } // apple // banana // orange - 객체에 대한 반복 Object.key()로 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근하자! const car = { maker : "BM..
-
[모던 자바스크립트] 템플릿 리터럴, 디스트럭처링프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:41
템플릿 리터럴 ES6에서 문자열을 삽입하는 방식이 변경되었다. - 여러 줄 문자열 생성 전체를 백틱으로 감싸면 된다. 백슬래시의 지옥에서 벗어날 수 있다. const content = `hello, my name is jeongeun how are you?`; 객체 디스트럭처링 - 객체에서 변수를 생성하기 쉬워졌다. // 예전 var person = { first : "noh", last : "jeong eun", } var first = person.first; var last = person.last; // 현재 const person = { first : "noh", last : "jeong eun", } const {first, last} = person; 디스트럭처링을 이용하여 객체가 가진 속성..
-
[모던 자바스크립트] 함수 기본값 인수프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:19
ES6에서는 함수 기본값 인수를 매우 쉽게 설정할 수 있다. - tax나 tip 값을 할당하지 않으면 기본 값으로 0.1과 0.05이 쓰인다. function calculatePrice(total, tax = 0.1, tip = 0.05) { return total + (total * tax) + (total * tip) } - calculatePrice(100, 0.15) 처럼 매개변수를 다 전달하지 않으면 어떻게 될까? tip에 0.15를 할당하려 했더라도 이렇게 쓰면 두번째 인수 tax에 0.15가 할당된다. => calculatePrice(100, undefined,0.15) 이렇게하면 tip에 0.15를 할당할 수 있다. 그렇지만 깔끔하지 않으니 개선해보자. - 디스트럭처링으로 함수의 인수를 객..