[강의] 자바스크립트의 시작 : PART2 JavaScript 제어문

강의제목 : 자바스크립트의 시작
제공 : 네이버부스트코스
공부일자 : 2021.12.1

 

 

🌏2. JavaScript 제어문

💫2.1 프로그램, 프로그래밍, 프로그래머

 

HTML과 자바스크립트는 모두 컴퓨터 언어

그러나 HTML은 자바와 달리 프로그래밍 언어는 아니다

 

그렇다면, 프로그래밍 언어란 무엇인가?

 

프로그램에는 순서라는 의미가 있다

프로그래밍이란 순서를 만드는 행위를,

프로그래머란 순서를 만드는 사람을 의미한다.

 

HTML같은 경우, 

시간의 순서에 따라 실행되는 것이 아니고,

한 번 만들어지면 바뀌지 않는다

때문에 HTML은 프로그래밍 언어가 아니다

 

자바스크립트의 경우,

사용자와 상호작용하고, 

이를 위해 시간에 따라 여러 기능이 실행되어야 하기 때문에

프로그래밍 언어라고 부를 수 있다

 

 

💫2.2 조건문

 

조건문이란 프로그램이 조건에 따라서

다른 기능들이 다른 순서에 따라 실행되도록 만드는 것

 

💫2.3 비교연산자와 블리언

 

비교연산자 ===

-왼쪽과 오른쪽이 같은지 판단

-이항 연산자

 

 

불리언

-비교 연산자를 사용하면 결과로 true, faluse가 나옴

-이를 불리언타입이라함

 

비교연산자><

-두 값의 크기를 서로 비교하는 연산자

-&lt;은 <

-&gt;은 >

 

💫2.4 조건문

 

if(true)와 if(false), 그리고 else가 어떤 역할을 하길래 이런 결과가 나오는 것일까요?

if문의 괄호 안에는 불리언 데이터 타입이 옵니다. 그리고 만약 그 불리언이 true이면 첫 번째 중괄호에 있는 코드가 실행되고, else의 중괄호에 있는 코드는 무시됩니다. 반대로 그 불리언이 false이면 else의 중괄호에 있는 코드가 실행되고 첫 번째 중괄호에 있는 코드가 무시되겠죠.

지금 짠 코드에서는 괄호 안에 있는 불리언이 고정되어 있기 때문에 항상 같은 결과가 출력되게 됩니다. 하지만, 이 괄호 안에 있는 불리언이 상황에 따라서 true/false가 바뀌도록 만들어주면, 상황에 따라서 다른 코드가 실행되도록 만들어줄 수 있을 겁니다.

 

💫2.6 중복의 제거

리팩토링 - this 사용하기

리팩토링이란 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것입니다. 코드의 기능적인 면에서는 변화가 없도록 말이죠. 이번 시간에는 코드의 비효율적인 부분을 찾아내서 고쳐보는 리팩토링 작업을 진행해봅시다.

 

지난 강의에서 완성한 다음과 같은 토클 코드를 살펴봅시다.

if(document.querySelector('#night_day').value === 'night') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'day';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'night';
}

여기에서는 자기가 속한 버튼을 찾기 위해서 document.querySelector('#night_day') 라는 코드를 사용했습니다. 하지만 만약 이 코드를 복사해서 하나의 버튼을 더 만들게 된다면 어떻게 될까요?

id는 하나의 태그에만 적용될 수 있으므로 새롭게 만들어진 버튼에는 새로운 id값을 적용해줘야겠죠. 예를 들어서 새롭게 만든 버튼의 id를 #night_day2라고 만들었다고 해 봅시다. 그렇게 되면 이 코드에서 모든 #night_day를 #night_day2로 직접 바꿔주는 작업을 진행해야 합니다. 무척 비효율적이죠.

그래서 Javascript에는 자기 자신을 가리키기 위한 this라는 키워드가 있습니다. document.querySelector('#night_day') 대신 this를 써도 되는 것이죠. 그러면 다음과 같이 쓸 수 있습니다.

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

코드가 훨씬 간결해진 것을 볼 수 있습니다. 그 뿐만 아니라, 이 코드는 몇 번을 복사해서 붙여넣더라도 따로 추가적인 수정 없이 계속 사용할 수 있습니다.

 

리팩토링 - 중복 제거하기

두 번째로 리팩토링 해 볼 부분은 바로 document.querySelector('body') 입니다. 이 부분이 무려 4번이나 등장하고 있죠. 코딩을 할 때에는 중복을 없애주는 것이 중요합니다. 그렇기 때문에 이 부분을 제거해보도록 합시다.

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

이렇게 하면 target이라는 변수를 만들어서 거기에 body 태그를 찾아서 넣고, 이 target 변수만 간단하게 사용해서 코드의 길이를 줄일 수 있습니다. 그 뿐만 아니라 첫 번째 줄만 수정해주면, target이 쓰이는 네 줄을 모두 바꿀 수 있다는 장점도 가지고 있습니다.