[DAY 10] VanillaJS를 통한 자바스크립트 기본 역량 강화Ⅰ(2)

 

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해

1. 명령형 : 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 

2. 선언형 : 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇이 같은 지를 설명하는 경우

👉 HTML, SQL

 

 

명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1

1. double() 함수 만들기

1) 명령형 방식

function double(arr) {
  let result = [];
  for(let i=0; i<arr.length;i++){
    result.push(arr[i]*2);
  }
  return result;
}

2) 선언형 방식

function double(arr) {
  return arr.map(number => number*2)
}

.- 코드가 간결하며, 유지보수하기 쉽다.

 

명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2, 2

💡 만약 배열에 숫자가 아닌 것들이 들어온다면 ?

1) 명령형

function double(arr) {
  let result = [];
  for(let i=0; i<arr.length;i++){
    if(typeof arr[i] === number){ // 조건이 많아질수록 더 복잡해진다
      result.push(arr[i]*2);
    }
  }
  return result;
}

2) 선언형

function double(arr) {
  return arr.filter(ele => typeof ele === number)
            .map(number => number*2)
}

- 무엇을 하는지 쉽게 보인다.

 

예시3-1: 토글 버튼 만들기

1. 명령형 방식

// 버튼 3개를 만든다
const $button1 = document.createElement('button');
$button1.textContent = "button1";

const $button2 = document.createElement('button');
$button2.textContent = "button2";

const $button3 = document.createElement('button');
$button3.textContent = "button3";

// 만든 버튼을 화면에 그린다.
const $main = document.querySelector('body');
$main.appendChild($button1);
$main.appendChild($button2);
$main.appendChild($button3);

// 버튼을 클릭하면 삭선이 그어진다.
document.querySelectorAll('button').forEach($button => {
  $button.addEventListener('click', (e) => {
    if(e.target.style.textDecoration === 'line-through'){
      e.target.style.textDecoration = 'none';
    }else {
      e.target.style.textDecoration = 'line-through';
    }
  })
})

 

2. 선언형 방식(추상화)

// 버튼 3개를 만든다
function ToogleButton({
  $target,
  text
}){
  const $button = document.createElement('button');
  $target.appendChild($button);
  
  this.render = () => {
    $button.textContent = text;
  }

  $button.addEventListener('click', (e) => {
    if(e.target.style.textDecoration === 'line-through'){
      e.target.style.textDecoration = 'none';
    }else {
      e.target.style.textDecoration = 'line-through';
    }
  })

  this.render();
}

const $app = document.querySelector('body');

new ToogleButton({
  $target: $app,
  text: 'Button1'
})

new ToogleButton({
  $target: $app,
  text: 'Button2'
})
new ToogleButton({
  $target: $app,
  text: 'Button3'
})

- 선언형 방식은 기능 추가시 ToggleButton 내 작성하면 되기 때문에 확장성 면에서 유리하다. 

 

ex) 3번째 클릭시 나타나는 이벤트

function ToogleButton({
  $target,
  text,
  onClick
}){
 ...
  let clickCount = 0;
  $button.addEventListener('click', (e) => {
    clickCount++;
    ...
    if(onClick) {
      onClick(clickCount);
    }
  })
  this.render();
}

new ToogleButton({
  $target: $app,
  text: 'Button1',
  onClick: (clickCount) => {
    if(clickCount % 3 === 0){
      alert('세번째 클릭!');
    }
  }
})

 

+ 함수내 객체 상태를 지정해 줄수 있다.

// 함수내 
 this.state = {
    clickCount: 0,
    toggled: false
 }

👉 선언적 사고방식은 중요, 다른 프레임워크에서 사용할 시 위와 같은 사고방식을 지향해야함