4강 공부내용 정리

아는 내용이 더 많아서 따로 공부한 내용 정리~

▶️ innerText vs textContent

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>

<!--대충 온클릭 함수 버튼 어쩌구저쩌구--> 

<script>
  function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
} 

function getTextContent() {
  const element = document.getElementById('my_div');
  alert(element.textContent);
} 
</script>

위 코드의 실행 결과는?

• innerText의 실행결과

• textContent의 실행결과

• innerText는 '사용자에게 보여지는 텍스트 그대로'를 가져온다. (띄어쓰기 무시, style 속성 반영)
• textContent는 노드가 가진 속성으로, 해당 노드가 가진 모든 텍스트를 가져온다.

---

▶️ 중복을 제거할땐 고차함수

  const func = () => {
    return () => {
      console.log('hello');
    };
  };

  const innerFunc = func();
  innerFunc(); // hello

• 중복을 제거하고 싶다면 자바스크립트의 고차함수를 활용한다.
• func 함수를 호출하면 함수를 반환한다. 반환된 함수는 다른 변수에 저장할 수 있고 변수에 저장된 함수를 다시 호출할 수도 있다.
• 일반함수에선 return을 하지 않으면 undefined가 반환되므로

  const func = (msg) => {
    return () => {
      console.log(msg);
    };
  };

  const func1 = (msg) => () => {
    console.log(msg);
  };

• 애로우 펑션을 이용한 고차함수의 경우 바로 반환되는 값이 본문에 있으면 return은 생략이 가능하다.

이 경우는 어떤 값이 출력될까 ??

  const hof = (a) => (b) => (c) => { 
    return a + (b * c); 
  }; 
  const first = hof(3); 
  const second = first(4); 
  const third = second(5); 
  console.log(third);

정답은 23이 출력된다.

---

▶️ 코드중첩 제거하기

• if문을 중첩해서 쓸 경우 가독성이 떨어지고 쓸데없이 코드가 길어질 수 있다.

• 따라서 분기를 줄여 최대한 깔끔하게 코드를 작성해야 하는데, 대략적 순서는 다음과 같다.

1. if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

2. 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.

3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.

4. else를 제거한다(이때 중첩 하나가 제거된다).

5. 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.

실습

  function test() { 
    let result = ''; 
    if (a) { 
      if (!b) { 
        result = 'c'; } 
      } 
    } else { 
      result = 'a';
    } 
    result += 'b'; 
    return result; 
  }

다음 코드를 if문 중첩을 줄여 간결하게 표기해보자.

답안

  function test() { 
    let result = ''; 
    if(!a) { 
      result = 'a';
      result += 'b'; 
      return result; 
    }  
    if (!b) { 
      result = 'c'; 
    }
    result += 'b'; 
    return result; 
  } 
  }

• 3번 절차는 이미 return이 있으니 상관이 없고 , 1과 2,4번 과정만 수행해주면 된다.

---