내가 보려고 기록하는 javascript 기초

비교연산자

=== 는 이항연산자

1===1;

를 consol창에 출력해보면 true라는 값이나온다.

왼쪽에 1과 오른쪽의1이 같다는 말.

1===2;

를 consol창에 출력해보면 false라는 값이나온다.

왼쪽에 1과 오른쪽의2는 다르니까.

 

불리언(Boolean)

또 다른 비교 연산자로 부등호가 포함된다.

<,>

script에서는 그냥 꺽쇠로 표현해도 되지만 html에서는 &lt; , &gt; 라는 기호로쓴다.

* 태그와 혼란을 줄 수 있기 때문에 기호로 쓰는것을 추천.

1+1 > 1+2

이것의 값은 false다.

 

 

리팩토링 - this 사용하기

코드의 비효율적인 부분을 찾아내서 고쳐보는 리팩토링 작업 입니다.

if(document.querySelector('p').value === 'love') {
  document.querySelector('body').style.backgroundColor = 'pink';
  document.querySelector('p').style.color = 'white';
  document.querySelector('p').value = 'loveday';
}
else {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('p').style.color = 'white';
  document.querySelector('p').value = 'day';
}

id는 하나의 태그에만 적용될 수 있으므로 새롭게 만들어진 엘리먼트에는 새로운 id값을 적용해야합니다.

자기 자신= this라는 키워드가 있습니다.

document.querySelector('p') 대신 this를 써도 되는 것이죠.

 

if(this.value === 'love') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  this.value = 'loveday';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  this.value = 'day';
}

리팩토링 - 중복 제거하기

리팩토링 해 볼 부분은 바로 document.querySelector('body') 입니다.

4번이나 등장하는 이 부분을 변수로 지정하여 중복제거 해봤습니다.

var = body = document.querySelector('body');
if(this.value === 'love') {
  body.style.backgroundColor = 'black';
  body.style.color = 'white';
  this.value = 'loveday';
}
else {
  body.style.backgroundColor = 'white';
  body.style.color = 'black';
  this.value = 'day';
}