자바스크립트 코드 리팩토링

주석을 표시해두었습니다 a,b를 찾아보세요. 현재 각각의 생성자 함수에서 a,b 와 같은 방법으로 new 키워드를 사용했는지 아닌지를 판단하고 있습니다. 이러한 코드를 함수로 밖으로 빼면 더 간결하게 코드를 짤 수 있는데요. 주석은 회색배경 글자로 편의상 쓰겠습니다. isInstanceof 함수, a , b 에 주목해주세요. isInstanceof 함수를 만들어줌으로써 중복되는 코드를 함수를 사용하여 리팩토링한 모습입니다. 너무 길어져서 접은글로 리팩토링 전 , 리팩토링 후 코드를 나타내겠습니다. 리팩토링 전 더보기 처음에 내가 짠 로직은 Validator 라는 함수를 만들었다. 그후 Validator 안의 this.validate 라는 메소드를 만들었다. 우선 이 로직으로 data를 validate 하..

동적인 DOM 객체 생성

다음 코드는 div 태그를 정적으로 갯수를 지정해주고 innerHTML 을 통해 값을 넣는 코드이다. 다음 코드를 보자. 뭐가 다를까? 우선 위 코드는 를 정적으로 몇개 선언해주어야했지만, 이 코드를 보면 이다. $target 변수에 의 DOM 객체를 할당한다. ($를 붙힌 이유는 DOM 객체를 할당한 변수라는 컨벤션이다.) 이제 TodoList 생성자 함수안에서 this.$target 에 createElement('ul')을 통해서 ul 태그를 만들어준다. 그 후 ul 태그를 main 태그안에 넣어주는 것이다. 는 다음과 같아질 것이다.

생성자의 파라미터를 객체로 받는것에 대하여

뭐가 좋다 나쁘다 하기에는 개인적인 스타일이지만, 이번에 생성자의 파라미터로 객체형태를 받는 것을 배웠다. 우선 기존의 내코드를 보자. 이번에는 이 코드를 보자. 아까 말했던 대로 파라미터를 객체로 받는 방법이다. 위 디자인 패턴은 RORO(Receive an object, return an object) 패턴이라고 한다. https://taegon.kim/archives/8058 자세한 내용은 위 링크에서 찾아보면 될 듯하다. 다른분께 설명할때 RORO 패턴이예요! 라고 하면 좀 더 있어보이니까. RORO 패턴으로 얻을 수 있는 이점은, 파라미터를 넘길 때 프로퍼티로 넘기기 때문에 이 데이터가 무엇을 의미하는 데이터인지 가독성 측면에서 더 낫다고 생각한다. 또한 파라미터를 던질때도 순서를 고려하지 않아..

자바스크립트 배열 내 조건에 맞는 원소 구하기 (every, some 함수)

https://heytech.tistory.com/219 [JavaScript] 배열 내 조건에 맞는 원소 구하기(every, some 함수) 💡 목표 JavaScript에서 배열 내 조건에 맞는 원소를 구하는 방법에 대해 학습한다. 1. every 함수: 모든 원소의 조건식 만족 여부 확인 함수 원형 배열.every(조건식 함수) every 함수는 배열 내 모든 원 heytech.tistory.com 위 자료를 읽고 작성한 글 입니다. 자세한 내용은 위 자료를 참고해주세요. every every 함수는 배열 내 모든 원소가 조건을 만족하면 true 를 하나라도 불만족 할 경우 false를 반환합니다. let arr1 = [1, 30, 39, 29, 10, 13]; function everyFunctio..

Object.getOwnPropertyNames() vs Object.keys()

공부 하다가 궁금해졌다.. 이녀석들이 차이.. const screen = { branch: 'Dell', size: '27inch', }; Object.getOwnPropertyNames(screen); // ['branch', 'size'] Object.keys(screen); // ['branch', 'size'] 그냥 객체로만 메서드를 사용했을때는 별 차이가 없어보인다. 그런데 defineProperties 로 추가했을때 enumerable: false 라면 keys 메서드에서는 출력되지않는다. Object.defineProperties(screen, { resolution: { enumerable: false, value: '2560 x 1440', }, }); var a = {}; Object...

typeof , instanceof 에 대한 공부

출처: https://unikys.tistory.com/260 [All-round programmer:티스토리] [Javascript] typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기 * typeof와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있는 약점들도 같이 unikys.tistory.com 위 자료를 타이핑하며 정리한 내용입니다. 자세한 내용은 위 자료를 참고해주세요. typeof 와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지를 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있..

자바스크립트 템플릿 리터럴 (Template literals)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer.mozilla.org 이글은 MDN 문서를 타이핑하며 공부한 글입니다. Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. Syntax `string text` `..

자바스크립트에서 사용자정의 생성자함수

https://yookeun.github.io/javascript/2015/03/08/javascript-construct/ Javascript에서 사용자정의 생성자함수 자바스크립트에서 객체를 만드는 방법중에 객체 리터럴, new Object(), 그리고 생성자함수를 통해 만드는 방법이 있다. 가장 좋은 것은 객체 리터럴이고, 쓰지 말아야 하는 것은 new Object()를 통해 객 yookeun.github.io 해당글은 위 자료를 타이핑하며 공부한 글입니다. 자세한 내용은 위 자료를 참고해주세요. 사용자 정의 생성자함수를 만들어보자. var Person = function(name) { this.name = name; this.say = function() { return "Hello, my name..

var, let, const 그리고 호이스팅

참고자료 https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90 var, let, const 차이점 JavaScript에서 변수 선언 방식인 `var, let, const` 의 차이점에 대해 알아보자. 1. 변수 선언 방식 우선, `var`는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 변수를 한 번 더 선언했음에도 불구하 velog.io 이 글은 위 블로그 글을 타이핑해보면서 공부한 글입니다. 자세한 내용은 위 글을 참고해주세요. JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자. 변수 선언 방식 우선 var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. v..

함수 바인딩

참고자료 https://ko.javascript.info/object-methods 메서드와 this ko.javascript.info 이 글은 위 자료를 보고 타이핑하면서 공부한 내용입니다. 자세한 설명은 위 튜토리얼을 참고해주세요. setTimeout에 메서드를 전달할 때 처럼, 객체 메서드를 콜백으로 전달할 때 this 정보가 사라지는 문제가 생깁니다. 이번 챕터에선 이 문제를 어떻게 해결할지에 대해 알아보겠습니다. 사라진 'this' 앞서 다양한 예제를 통해 this 정보가 사라지는 문제를 경험해보았습니다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this 가 사라집니다. setTimeout을 사용한 아래 예시에서 this가 어떻게 사라지는지 살펴봅시다. let user = {..