[JS] previousElementSibling & previousSibling / 삼항연산자 / Truthy & Falsy

 

* previousElementSibling()  : 바로 이전 형제요소 반환 ( 실제 HTML 요소만 )

* previousSibling() : 바로 이전 형제요소 반환 (주석, 공백, 텍스트 포함)

---

div2를 기준으로 div1의 text를 가져오려면

<div id="div1">첫 번째 div 요소</div>

<!-- 주석: 이것은 첫 번째와 두 번째 div 사이의 주석입니다. -->

<div id="div2">두 번째 div 요소</div>

 

* previousElementSibling 사용

var secondDiv = document.getElementById('div2');

var prevElementSibling = secondDiv.previousElementSibling;
console.log('previousElementSibling:', prevElementSibling ? prevElementSibling.textContent : '없음');

// 출력결과
// previousElementSibling: 첫 번째 div 요소

 

* previousSibling 사용

var secondDiv = document.getElementById('div2');

var prevSibling = secondDiv.previousSibling;
while(prevSibling && prevSibling.nodeType != 1) { // 요소 노드가 아닐 때까지 이동
    prevSibling = prevSibling.previousSibling;
}

console.log('previousSibling:', prevSibling ? prevSibling.textContent : '없음');
// 출력결과
// previousSibling: 첫 번째 div 요소

while루프로 요소노드를 잡아주지 않으면 주석을 잡게 된다.

 

---

 

[ 삼항연산자 ]

 

' 조건 ?  참일 때의 값 : 거짓일 때의 값 '

 

*조건 판별 기준 *

'조건' 의 값이  null , undefined , 빈 문자열 (" "), 0 ,  NaN, false      ==>  false에 해당하는 값 반환

 

* 활용 *

서버에서 여러 타입의 데이터를 JSON형식으로 묶어서 보내고, 화면에서는 하나의 List로 받는 경우, 

리스트에서 key값으로 value를 뽑아내 사용하려는데 value값이 null 이나 공백이라면 콘솔창에 오류가 난다.

{
    "userNo": 1,
    "userInfo": { "name": "John", "age": 30 },
    "history": [
        { "key": "value1", "key2": "value2" },
        { "key": "value3", "key2": "value4" },
        { "key": "value5", "key2": "value6" }
 }

위처럼 하나의 List 내부에 key-value값으로 여러 타입의 데이터가 들어있을 때,

history의 값이 null이나 공백일 수 도 있다면, 

let parsedData = dataFromServer.history ? JSON.parse(dataFromServer.history) : [];

삼항 연산자를 사용해 출력할값(배열)이 유효한지 확인 후 JSON으로 파싱하거나 빈 객체 반환.

 

콘솔창에 출력한 결과는 아래처럼 나온다.

console.log(parsedData);

// (배열)값이 있는 경우
[
  { "key": "value1", "key2": "value2" },
  { "key": "value3", "key2": "value4" },
  { "key": "value5", "key2": "value6" }
]

// (배열)값이 없는 경우
[]

 

 

---

 

[ Truthy / Falsy ]

 

* Falsy 에 해당하는 값

- false

- 0

- " " (빈문자열)

- null

- undefined

- NaN

위의 6가지를 제외하고 모두 Truthy에 해당. 

 

if ("hello") {
  console.log("This string is truthy");
} else {
  console.log("This string is falsy");
}
// 출력: "This string is truthy"

if (0) {
  console.log("This number is truthy");
} else {
  console.log("This number is falsy");
}
// 출력: "This number is falsy"