나에겐 개발자라고 하기엔 매우 안좋은 습관이 있다.
세련된 방식
을 찾아보지 않고 무식하게 개발한다.- 노가다라도 돌아가면
리팩토링
안한다.새로운 기술이나 문법
나오면 미룬다안본다.
자바스크립트를 처음 접한 것이 하필 2015년이고 그 뒤로는 아는 수준으로만 개발을 해왔던 터라 ES6에 나온 문법들도 어색하다. (라기엔 시간이 너무 흐른거 아닌가요)
비개발자 직업의 한계랄까.. 강의를 조금만 들어도 바로 나오는 내용인데 항상 바쁘게 무작정 만들기부터 하다보니 이렇게 된 것 같다. 그래서 지금 아주 기초부터 강의를 듣는, 이 시간이 너무나 행복하고 보람차고 씻어내는 기분이든다.
벨로퍼트와 함께하는 모던 자바스크립트
1장. 자바스크립트 입문
https://learnjs.vlpt.us/basics/
다음과 같은 과정으로 더 코드를 효율적으로 깔끔하게 쓸 수 있다.
아래 보기의 경우 1단계가 가장 쉬워보이지만 코드 줄이 길어지고 반복해서 쓰게되는 것을 줄일 수 있다.
1단계
function print(hero) { console.log(hero.name); }
2단계
function print(hero) { const { name, age } = hero; console.log(name); }
3단계
function print({ name, age }) { console.log(name); }
1단계
화살표 함수 const dog = { sound: ‘멍멍', say: function() { console.log(this.sound); } }
메서드 축약 표현
const dog = { sound: ‘멍멍', say() { // 축약 console.log(this.sound); } }
*화살표함수는 this를 사용할 경우 에러
const dog = { sound: ‘멍멍', say: () => { console.log(this.sound); } } // 에러 화살표 함수는 this를 모른다
get, set을 설정해서 은닉
프로퍼티명은 언더바로 설정 (getter, setter와 이름 분리)
*프로퍼티명을 _언더바로 하지 않으면 루프에 빠지는 케이스 발생할 수 있음
RangeError: Maximum call stack size exceeded
*참고 : https://pxd-fed-blog.web.app/getter-setter/
set
구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩
무슨말이냐면 보통의 함수처럼 ( )를 사용하지 않고 할당(대입)할 때 불러온다는 것
const numbers = { _a: 1, _b: 2, sum: 3, calculate() { console.log(‘calculate’); this.sum = this._a + this._b; }, get a() { return this._a; }, get b() { return this._b; }, set a(value) { this._a = value; this.calculate(); }, set b(value) { this._b = value; this.calculate(); } }; console.log(numbers.a); // getter numbers.a = 5; // setter함수이기 때문에 set a안에 this.calculate()가 실행 -> sum도 업데이트 됨 console.log(numbers.sum); // 7 *연산을 하지 않고 기존에 업데이트 값 읽음
const numbers = [0, 1, 2] for (let i of numbers) { ... }
const dog = { name: ‘강아지’, sound: ‘멍멍', age: 2 } for (let i in dog) { console.log(i); // “name”, “sound”, “age” *** key와 동일 console.log(dog[i]); // ”강아지", “멍멍", 2 *** values와 동일 } console.log(Object.entries(dog)); // [[“name”,”강아지”], [“sound”,”멍멍”],[“age”,2]] console.log(Object.keys(dog)); // [“name”, “sound”, “age”] console.log(Object.values(dog)); // [“강아지", “멍멍", 2]
위의 예시처럼 오브젝트의 메서드들이 있는데 아래의 메서드들도 자주 사용했던 것 같다.
*참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
break는 워낙 많이 사용하는데, continue는 써본 적이 없어서 볼 때마다 항상 새롭다..
for (let i = 0; i < 10; i++) { if (i===2) continue; // 다음 것 if (i===5) break; console.log(i); // 0,1,3,4 *2는 continue에 의하여, 5는 break로 종료 }
배열 내장 함수는 다음 글에서 이어서...
온라인 코드 에디터로 크롬 > 더보기 > CodeSandbox 설치
로 바로 새 창으로 설치할 수도 있다.
eslint : 코드 구현 방식을 방식을 일관성 있는 방식으로 구현
prettierrc : 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성