entNode / parentElement / stringify / parse / forEach / filter

10107 단어 JavaScriptJavaScript

💡 Node와 Element

parentNode가 ParentElement보다 상위 개념이다.

1. parentNode

  • Node는 아무 DOM 객체가 될 수 있다.
  • ex) 내장 DOM 엘리먼트(document, document.body...)
  • 부모 Node를 반환하고 부모가 없는 경우 null을 반환한다.

2. ParentElement

  • Element는 Node의 특정 Type중 하나이다.
  • ex) 텍스트 노드, 주석 노드 등(HTML, id, class...)
  • 부모가 없거나 DOM 요소가 아닌경우 경우 null을 반환한다.

💡 stringify와 parse

1. JSON.stringify()

  • string로 변경하기

2. JSON.parse()

  • array로 변경하기

💡 return과 break

1. return

  • return을 만나면 실행을 중단하고 함수를 빠져 나온다.
    function counter() {
      for (var count = 1; ; count++) {  // 무한 반복
        console.log(count + "A"); // 5까지
          if (count === 5) {
            return;
          }
          console.log(count + "B");  // 4까지
        }
      console.log(count + "C");  // 절대 나타나지 않음
    }
    
    counter();
    
    // 출력:
    // 1A
    // 1B
    // 2A
    // 2B
    // 3A
    // 3B
    // 4A
    // 4B
    // 5A

2. break

  • break을 만나면 실행을 중단하고 구문을 빠져나와 다음 구문으로 프로그램 제어를 넘긴다.
    outer_block: {
      inner_block: {
        console.log('1'); // 1
        console.log(':-('); // :-(
    	}
      console.log('2'); // 2
    }
    // 출력
    // 1
    // :-(
    // 2
    
    outer_block: {
      inner_block: {
        console.log('1'); // 1
        break inner_block; // inner_block를 빠져나옴
        console.log(':-('); // 건너뜀
      }
      console.log('2'); // 2
    }
    
    // 출력
    // 1
    // 2
    
    outer_block: {
      inner_block: {
        console.log('1'); // 1
        break outer_block; // inner_block과 outer_block 둘다 빠져나옴
        console.log(':-('); // 건너뜀
      }
      console.log('2'); // 건너뜀
    }
    // 출력
    // 1

💡 forEach

  • array의 요소들을 반복하여 작업 수행

💡 filter

  • boolean을 사용하여 값 반환
  • array의 item을 유지하고 싶은 경우 true를 return

💡 parseInt

  • 숫자로 변경하여 값 반환하기

💡 ToDo List 만들기