본문 바로가기

웹(web)/프론트엔드-javascript25

생성자 함수와 상속 개, 고양이처럼 type, name, sound (종류, 이름, 짖는 소리)에 따라 만들고 싶다면? function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; }; const dog1 = new Animal("개", "멍멍이", "멍멍"); dog1.say(); const dog2 = new Animal("개", "시바견", "머엉머엉"); dog2.say(); 공통으로 사용되는 say를 일반화 하고 싶다면? function Animal(type, name, sound) { this.type = type; .. 2020. 6. 27.
객체, 배열의 내장함수 정리 객체 내장함수 let obj = { name: 'bob', id : 1 } 를 기준으로 설명한다. 속성 이름으로만 이루어진 ["name" , "id"] 데이터를 얻고 싶다면? Object.keys(obj); 속성 값으로만 이루어진 ["bob", 1] 데이터를 얻고 싶다면? Object.values(obj); 속성별 배열로 이루어진 [["name", "bob"], ["id", 1]] 데이터를 얻고 싶다면? Object.entries(obj); 문자열에서 obj.name 값을 사용하고 싶다면? `my name is ${obj.name}` 배열 객체 내장함수 let arr = [1, 2, 3, 4, 5]; 를 기준으로 설명한다. 선언된 함수를 이용해 모든 배열 값을 출력하고 싶다면? function print.. 2020. 6. 27.
javascript 추가 기능 arrow function IE에서 지원하지 않는다. babel을 사용해서 ES5로 버전다운을 시켜주어야한다. 사용 방법은 ( parameter list ) => { function body } 와 같다. this를 사용할 수 없다. 구조 분해 할당 IE에서 지원하지 않는다. babel을 사용해서 ES5로 버전다운을 시켜주어야한다. 사용 방법은 { key1, key2} = obj; 와 같은 방식이다. switch switch 지원한다. getter, setter obj.property_name 을 사용할 수 있는데 해당 obj에 get property_name(){ } 이 정의되어 있다면 get에 해당하는 부분을 실행한다. 아래와 같이 사용 가능하다. let obj = { _name: "멍멍이", get.. 2020. 6. 27.
[Closure] 버튼을 클릭했을 때 body의 font-size를 바꾸는데 버튼 별로 12px, 14px, 16px을 위한 버튼을 만들고 싶으면 어떻게 할까? 답은 클로저를 사용하면 편리하다. function makeSizer(size) { return function() { document.body.style.fontSize = size + 'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); var size16 = makeSizer(16); 위 코드 덕에 size12()는 document.body.style.fontSize= 12px; 를 실행한 것과 같다. html 상에서 a 태그를 세개 만들고 12 14 16 스크립트로 핸들러에 등록해주면 docu.. 2020. 6. 3.