Study/JavaScript(Clean code)
[JavaScript][clean-code] Prototype 조작 지양하기
* Prototype 조작 지양하기 - 왜 지양해야할까? 자바스크립트가 이미 굉장히 발전했기 때문에 굳이 생성자 함수를 만들고 prototype를 조작할 이유가 없다. 직접 만들어서 모듈화 하면 된다. 직접 만들어서 모듈화 > 배포 > NPM 자바스크립트의 내장객체를 애초에 건들지 말자(어렵고 위험하다.) (JS는 몽키패치 언어여서 런타임에 동작되는 것들을 멋대로 꺼낼 수 있다.) class를 활용하면 된다. (아래의 예시 참조) class Car { constructor(name, brand) { this.name = name; this.brand = brand; } sayName() { return this.brand + '-' + this.name; } } const casper = new Car(..
[JavaScript][clean-code] Object.freeze
* Object.freeze 객체 동결 Object.freeze는 기본적으로 내장되어있다. 간단하게 인자로 취해주면 동결된다. [참고내용] https://latte1114.tistory.com/362 * Object.freeze예시 코드 const STATUS = Object.freeze({ PENDING: 'PENDING', SUCCESS: 'SUCCESS', FAIL : 'FAIL', }); STATUS.PENDING = 'P2' // 변경이 되지 않는다. STATUS.NEW_PROP = 'P2' // 추가 되지 않는다. * Object.isFrozen을 이용하면 동결 여부를 알 수 있다. Object.isFrozen(STATUS) // true * Object.freeze의 경우 shallow co..
[JavaScript][clean-code] Object Destructuring (객체 구조 분해 할당)
* Object Destructuring (객체 구조 분해 할당) * 생성자 함수로 보는 예시 function Person(name, age, location) { this.name = name; this.age = age; this.location = location; } const hyeonwoo = new Person('hyeonwoo', undefined, 'korea'); - 기존에는 값을 안넣을경우 undefined를 작성해줘야한다. * 객체 구조 분해 할당 function Person( name, { age, location }) { this.name = name; this.age = age; this.location = location; } const pocoOptions = { age :..
[JavaScript][clean-code] Lookup Table
* lookup table (순람표) key와 value로 관리된 배열이 나열된 형태이다. excel의 lookup을 생각하면 된다. * 일반적인 if else예시 function getUserType(type) { if (type === 'ADMIN') { return '관리자'; } else if (type === 'INSTRUCTOR') { return '강사'; } else if (type === 'STUDENT') { return '수강생'; } else { return '해당 없음'; } } - 이렇게 if else가 길어질 경우 switch case를 사용하는것을 권한다. * switch case예시 function getUserType(type) { switch(key) { case 'AD..
[JavaScript][clean-code] Computed Property Name
* Computed Property Name (계산된 속성) 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다. 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다. 표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다. * Computed Property Name 사용 예시(리액트) const handleChange = (e) => { setState({ [e.target.name] : e.target.value; }); }; return ( ); input안의 taget이 된 name의 값과 value를 가져온다 (계산된 값들) Computed value(input안의 name과 password)를 이용하면 동적으로 계산된 값이..
[JavaScript][clean-code] Shorthand Properties
* Shorthand Properties - 내가 사용하는 문법이 무엇이고 어떤값의 축약인지 파악하자. - css는 속성을 attribute라고도 부른다. javascript에서는 property라고 한다. 이것도 하나의 예시이다. * css에서의 Shorthand Properties예시 background-color background-image background-repeat background-position /* 아래와 같이 축약가능 */ background : #000 url(...) margin-top : 10px; margin-right : 5px; margin-bottom: 10px; margin-left : 5px; /* 아래와 같이 축약 가능 */ margin : 10px 5px 10p..