How to ignore undifned values

JavaScript
1

Hi!!
I have a loop on a 2d array and a few if statments inside of it , it’s running will except at the end of the row , one of the if statements i believe is causing the one after it to stop running cause it maight be returning undifned value , i remember seeing someone here using some kind of operator to ignore the undifned values and countinue running the code , if there’s such a thing pleas let me know , or if you have a better idea i would like to hear it .

const pawnsMove = (e, arr, color) => {
    classRemover()

    for (let i = 0; i < 8; i++) { // enter rows
        for (let x = 0; x < 8; x++) { // enter columns
            if (arr[i][x] === e.parentNode) {

                if (e.classList[2] === 'black') {
                    if (!arr[i][x].classList[2]) {
                        if (i === 1) {
                            arr[i][x]
                                .classList
                                .add("marked")
                            if (!arr[i + 1][x].firstChild) {
                                //console.log(arr[i+1][x])
                                arr[i + 1][x]
                                    .classList
                                    .add("marked-empty")
                            }
                            if (!arr[i + 2][x].firstChild) {
                                arr[i + 2][x]
                                    .classList
                                    .add("marked-empty")
                            }
                            //console.log(arr[i+1][x+1].classList[2])
                            if (arr[i + 1][x + 1].firstChild && arr[i + 1][x + 1].firstChild.classList[2] === 'white') {
                                arr[i + 1][x + 1]
                                    .classList
                                    .add("marked-enemy")
                            }
                            if (arr[i + 1][x - 1].firstChild && arr[i + 1][x - 1].firstChild.classList[2] === 'white') {
                                arr[i + 1][x - 1]
                                    .classList
                                    .add("marked-enemy")
                            }

                        }
                        if (i > 1) {
                            arr[i][x]
                                .classList
                                .add("marked")
                            if (!arr[i + 1][x].firstChild) {

                                arr[i + 1][x]
                                    .classList
                                    .add("marked-empty")
                            }
                            if (arr[i + 1][x + 1].firstChild && arr[i + 1][x + 1].firstChild.classList[2] === 'white') {
                                arr[i + 1][x + 1]
                                    .classList
                                    .add("marked-enemy")
                            }
                            if (arr[i + 1][x - 1].firstChild && arr[i + 1][x - 1].firstChild.classList[2] === 'white') {
                                arr[i + 1][x - 1]
                                    .classList
                                    .add("marked-enemy")
                            }
                            //arr[i+1][x].classList.add("marked-empty")
                        }

                    }
}
                //  else {
                //     console.log('on')
                //     if (!arr[i][x].classList[2]) {
                //         if (i === 6) {
                //             arr[i][x]
                //                 .classList
                //                 .add("marked")
                //             if (!arr[i - 1][x].firstChild) {
                //                 //console.log(arr[i-1][x])
                //                 arr[i - 1][x]
                //                     .classList
                //                     .add("marked-empty")
                //             }
                //             //console.log(arr[i-1][x-1].classList[2])

                //             if (!arr[i - 2][x].firstChild) {
                //                 arr[i - 2][x]
                //                     .classList
                //                     .add("marked-empty")
                //             }
                //             if (arr[i - 1][x + 1].firstChild && arr[i - 1][x + 1].firstChild.classList[2] === 'black') {
                //                 arr[i - 1][x + 1]
                //                     .classList
                //                     .add("marked-enemy");
                //             }
                //             if (arr[i - 1][x - 1].firstChild && arr[i - 1][x - 1].firstChild.classList[2] === 'black') {
                //                 arr[i - 1][x - 1]
                //                     .classList
                //                     .add("marked-enemy")
                //             }

                //         }
                //         if (i < 6) {
                //             arr[i][x]
                //                 .classList
                //                 .add("marked")
                //             if (!arr[i - 1][x].firstChild) {

                //                 arr[i - 1][x]
                //                     .classList
                //                     .add("marked-empty")
                //             }
                //             if (arr[i - 1][x - 1].firstChild) {
                //                 if (arr[i - 1][x - 1].firstChild.classList[2] === 'black') {
                //                     arr[i - 1][x - 1]
                //                         .classList
                //                         .add("marked-enemy")
                //                 }
                //             }
                //             if (arr[i - 1][x + 1].firstChild) {
                //                 if (arr[i - 1][x + 1].firstChild.classList[2] === 'black') {
                //                     arr[i - 1][x + 1]
                //                         .classList
                //                         .add("marked-enemy")
                //                 }
                //             }

                //             //arr[i+1][x].classList.add("marked-empty")
                //         }

                //     }
                // }

            }
        }
    }
}

the array has 8 arrays in it and each array has 8 elements .
i believe you’ve alredy guessed that im trying to make a chess game here .
You can ignore the commented part since it’s almost the same as the first half .
e = event.target from an event listner

2

Sometimes I am using just if...else logic to ignore undefined stuff.

I am not sure if it will be relevant to your case, I am not able to figure out details of your code.

In general, it looks like:

for (let i = 0; i < termCondition; i++) {
    for (let item of words) {
      if (item[i] !== undefined) {
        result += item[i];
      }
    }
  }

It is a snippet, not whole code, I just posted it to show general logic.

But here I am basically saying >>> if item[i] is undefined - just ignore it.

Otherwise - do stuff with it(in my case ‘do stuff’ means concatenate).

4

just to be clear , this code is for the pawns movment in chess , the pawns usualy are allowed to move two steps forward from the first line and one step after that , however if there’s an opponent piece at the diagonal line the pawn capture by using diagonally, here i’m just adding class to show the allowed moves , the movement it’s self comes from another function .
and lastly the part that isn’t working is adding the calss that says there’s an opponent piece at the second to last column , if i changed the order of the if staments , the bug turns to the other side of the board.

5

yes there is , sorry for not being clear about it

6

i thought i’m alredy doing that by saying :

if (arr[i ][x].firstChild) {}

which means to check if element have a child is a truthy value , or do you think that i should check if the element exist before checking if it has a child ?

8

it’s a set of div elements that was created by javaScript using map and a loop, something like this : [[div8],[div8],[div*8],etc].
later i rendered the pices as img elements with a couple of functions .

9

iv’e just added the whole code on github if anyone like to take a quick look.
chess-vanillaJS

10

You can add a ? before the .firstChild and achieve what you are wanting.

1 Like
11

i’ll try that , i think this what i was looking for , thank you .
by the way , what do you think of my code overall ?

13

A major issue here is that it’s very difficult to provide detailed help because what you’ve posted is locked into a much larger program that it’s inseparable from (just seen you’ve posted link to GH, but there’s a lot of code there).

Generally don’t store state in the DOM: make a model of the board (just objects/arrays, just JS), then render from that. Update the model, render, update the model, render. At the minute you’re mixing up the two things and it’s making things hideously complicated and, naturally, difficult to debug.

The model shouldn’t care about classes or events or whatever

2 Likes
14

I’ll work on that, thanks for the advice

15

I’ve never thought about it this way, I’ll try to learn how to do it like you’ve described, but I’m still a noob :sweat_smile:.
Thanks for your advice.

16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.