비구조화 할당
·
Language/JavaScript
객체 비구조화 할당 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); console.log(b); function print({ a, b }) { console.log(a); console.log(b); } print(object); - 위와 같이 비구조화 문법을 사용하여 왼쪽 변수의 값에 오른쪽 값들을 해체하여 간편하게 할당해 줄 수 있음 const object = { a: 1 }; const { a, b = 2 } = object; console.log(a); console.log(b); 혹은 위처럼 비구조화 구조에서 b = 2 처럼 기본값을 할당해줄 수도 있다. const animal = { name: "멍멍이", typ..
객체 활용
·
Language/JavaScript
function getSound(animal) { const tasks = { 개: () => { console.log("멍멍"); }, 고양이() { console.log("야옹!"); }, 비둘기: function () { console.log("구구 구구"); } }; const task = tasks[animal]; if (!tasks[animal]) { console.log("....?"); return; } task(); } getSound("개"); getSound("비둘기"); getSound("인간");
함수의 기본 파라미터
·
Language/JavaScript
const calculateCircleArea = (r = 1) => Math.PI * r * r; // 만약 값이 주어지지 않았다면 r의 기본 값은 1이 된다. const area = calculateCircleArea(); console.log(area); - es6에서 인수가 없을 때, 함수의 매개변수에 매개변수 = 기본값 이런 형태로 지정하여 기본 값을 설정할 수 있다.
단축 평가 논리 계산법
·
Language/JavaScript
&& console.log(true && "hello"); console.log(false && "hello"); console.log("hello" && "bye"); console.log(null && "hello"); console.log(undefined && "hello"); console.log("" && "hello"); console.log(0 && "hello"); console.log(1 && "hello"); console.log(1 && 1); - &&연산자의 경우, 앞에 오는 값이 true면 뒤에 오는 값이 결과물 - &&연산자의 경우, 앞에 오는 값이 falsy한 값이면 앞에 있는 값이 결과물 보통 이럴 때 활용된다. const object = { name: 'asdf' }; /..
falsy
·
Language/JavaScript
function print(person) { if (!person) { return; } console.log(person.name); } const person = { name: "Joh" }; print(person); 여기서 !person은 person === undefined || person === null 의 의미와 같다. 자바스크립트에서 undefiend, null,0, '', NaN,false은 falsy한 값이라고 해서, false로 간주함.
window.history.pushState / window.history.replaceState
·
Language/JavaScript
페이지 reload 하지 않고 브라우저의 url만 바꿔주는 작업을 할 때 쓰는 함수이다. window.history.pushState(null, null, '경로값') 첫번째 인자 값에 브라우저로 넘겨줄 데이터. 두번째 인자 값은 브라우저 제목으로 설정할 값. 세번째 인자 값은 url바꿔줄 해당 경로 값. 브라우저 앞 / 뒤 버튼 클릭시 onPopState라는 함수 실행되고, onPopState 함수에서 state 데이터를 넘겨준다고 함. history.pushState => 이전 url의 주소가 남아있어서 브라우저의 뒤로가기 버튼이 활성화된다. history.replaceState => 동일한 기능이지만, 이전 url의 주소를 활성화하지 않기 때문에 뒤로가기 버튼 활성화 되지 않음.
자바스크립트 - 클래스의 활용
·
Language/JavaScript
es6부터 class라는 개념이 도입되면서, 기존의 객체 생성자로 구현했던 코드들을 깔끔하게 구현할 수 있게 되었다. class Food { constructor(name){ this.name = name; this.brands = []; } addBrand(brand){ this.brands.push(brand); } print(){ console.log(`${this.name}을 파는 음식점들:`); console.log(this.brands.join(', ')); } } const pizza = new Food("피자"); pizza.addBrand('피자헛'); pizza.addBrand('도미노 피자'); const chicken = new Food('치킨'); chicken.addBrand('..
Javascript - reduce()함수
·
Language/JavaScript
배열.reduce((누적값,현재값) => return 결과 , 초기값); 여기서 초기값은 누적값에 처음 대입하는 값을 의미한다. const numbers = [1, 2, 3, 4, 5]; // let sum = 0; // numbers.forEach(n=>{ // sum == n; // }) // console.log(sum); //위의 주석 코드를 reduce()를 이용하여 구현하면 다음과 같다 // 초기값은 0 const sum = numbers.reduce((accumulator,current) => accumulator + current, 0); console.log(sum); 배열.reduce((누적값,현재값,인덱스,배열) => return 결과 , 초기값); const numbers = [1,..
자바스크립트 join함수
·
Language/JavaScript
const array = [1,2,3,4,5]; console.log(array.join()); // 1,2,3,4,5 console.log(array.join(' ')); // 1 2 3 4 5 console.log(array.join(', ')); // 1, 2, 3, 4, 5 배열의 모든 요소를 연결해서 하나의 문자열로 만들어주는 join함수입니다. 벨로퍼트님의 자바스크립트 강의를 듣고 정리하였습니다.
takoyummy
'Language/JavaScript' 카테고리의 글 목록 (2 Page)