JavaScript - parentNode / parentElement / stringify / parse / forEach / filter

💡 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 만들기

1. =>

fonction sayHello(item) {
	console.log("this is the turn of", item);
}

(item) => console.log("this is the turn of", item);

• 위/아래 모두 동일한 결과값을 반환함
  
  

👋 마치며

스터디 활동을 위해 기록하고 있습니다.
다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

---

• https://nomadcoders.co/
• https://dev-dain.tistory.com/128
• https://hyejin-dev.tistory.com/12
• https://developer.mozilla

---