이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
자바스크립트, 조건문의 활용
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 비교 연산자・불리언・조건문 이 포스팅은 PC로 작성되
gogogameboy.tistory.com
지난 포스트에서는 '비교 연산자, 불리언, 조건문'을 이용해서 쓸만한 버튼을 만들어봤었습니다.
그런데 거기서 끝이 아니었습니다.
지난번에 만든 버튼 안에서도 사실 코드가 길어지게 만드는 불필요한 코드들이 있었습니다.
이번에는 그걸 짧게 줄이는 방법을 공부해보겠습니다.
this와 let target
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
지난 포스트의 소스 코드와 비교를 해보자면,
지난 소스 코드에서는 조건문에 if(document.querySelector('#night_day').value === 'night')
라고 길게 적어주고, input 태그에도 'night_day'라는 id 값을 줬었습니다.
하지만 그럴 필요가 없습니다.
input 태그의 id 값을 없애고, document.querySelector('#night_day')라는 긴 소스 코드 대신에 this만 써주면 됩니다.
그리고 또, 지난 소스 코드에서는 document.querySelector('body') 라는 긴 소스 코드들도 4번이나 중복돼서 나오는데, 그건 let target = document.querySelector('body'); 라고 지정해준 뒤에
document.querySelector('body')를 전부 target으로 바꿔주면 됩니다.
자바스크립트, 변수와 대입 연산자
지난 포스트 자바스크립트 데이터 타입, 숫자와 문자열 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트,
gogogameboy.tistory.com
위의 포스트에서도 말했었지만, 생활코딩의 강의 영상과는 다르게 요즘은 var 대신에 let을 사용합니다.
그래서 var target이 아닌, let target으로 코드를 작성했습니다.
이번 생활코딩 강의 영상 속의 가장 중요한 내용은 이것인 것 같습니다.
코딩을 잘하려면 중복된 코드들을 없애라.
다음 포스트
자바스크립트, 배열과 반복문
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 중복되는 코드 제거 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > JavaScript' 카테고리의 다른 글
| 자바스크립트, 배열과 반복문의 활용 (0) | 2021.01.30 |
|---|---|
| 자바스크립트, 배열과 반복문 (0) | 2021.01.29 |
| 자바스크립트, 조건문의 활용 (0) | 2021.01.27 |
| 자바스크립트, 비교 연산자・불리언・조건문 (0) | 2021.01.26 |
| 자바스크립트, 제어할 태그 선택하기 (0) | 2021.01.24 |
댓글