Study

[JavaScript][clean-code] hasOwnProperty

* hasOwnProperty - property를 가지고 있는가? - 가지고있다면 true 없다면 false를 반환한다. const person = { name : 'hyeonwoo' } person.hasOwnProperty(name); // true person.hasOwnProperty(age); // false JavaScript는 프로퍼티 명칭으로서 hasOwnProperty를 보호하지 않는다. 그러므로 이 명칭을 사용하는 프로퍼티를 가지는 객체가 존재하려면 즉, 올바른 결과들을 얻기 위해서는 외부 hasOwnProperty를 사용해야한다. 아래의 예시를 통해 확인해보기 * 예시를 통한 확인 (hasOwnProperty) // hasOwnProperty라는 메서드와 bar라는 문자열을 가지고 ..

[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..

[React_study] React에서의 List 생성 (map)

* 자바스크립트에서의 map 함수 사용하는 방법 모든 array 자료에는 map() 메서드를 사용할 수 있다. map() 메서드가 가지고 있는 기능을 예시를 통해 확인 * 예시 코드 (기능1) - array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행 - console.log(1) 3번 실행 const array = [1,2,3]; array.map(function(){ console.log(1) }); * 예시 코드 (기능2) - 콜백함수의 첫번째 인자값을 넣어서 array안에 있던 모든 자료를 하나씩 출력해준다. - 2, 3, 4가 콘솔창에 출력된다. const array = [1,2,3]; array.map(function(a){ console.log(a) }); * 예시 코드 (기능3) ..