FF Posts - Answer Overflow

•Created by FF on 8/5/2024 in #front-end

JavaScript Array Manipulation: Issues with forEach

When i want to modify an array like below, it doesn't modify the original array. Why is that?

let gameBoard = Array(3)
    .fill()
    .map(() => Array(3).fill("X")); //Create 2D Array  

const resetGameBoard = () =>
    gameBoard.forEach((arr, index) => {
      console.log(arr === gameBoard[index]); // this shows they are the same object?

      console.log(arr.map((item) => item = ""));
      arr = arr.map((item) => item = "");
    });

resetGameBoard();
console.log(gameBoard);

let gameBoard = Array(3)
    .fill()
    .map(() => Array(3).fill("X")); //Create 2D Array  

const resetGameBoard = () =>
    gameBoard.forEach((arr, index) => {
      console.log(arr === gameBoard[index]); // this shows they are the same object?

      console.log(arr.map((item) => item = ""));
      arr = arr.map((item) => item = "");
    });

resetGameBoard();
console.log(gameBoard);

If i change the arr = arr.map((item) => item = ""); to gameBoard[index] = arr.map((item) => item = ""); it works as expected and modify the original array. What is the difference here?

214 replies

KPCKevin Powell - Community

•Created by FF on 7/12/2024 in #front-end

100vh on a grid

(Solution index and css files are here: https://github.com/TheOdinProject/css-exercises/tree/main/grid/03-grid-layout-3/solution) Hello, i added border-box to * element, height: 100vh to html, body element and height: 100% to container element in solution.css. But still, i have a small vertical scrolling and if i remove 4 px gap. The problem solved. So, does border-box behave differently here for gap in grid and how to fix it? And i know using fix height is not a good thing but, in this context should it be a problem that much? If answer is yes, how? Thank you for your answers.

12 replies

KPCKevin Powell - Community

•Created by FF on 7/6/2024 in #front-end

Using REM unit to secure its same position on the screen when font-size changes?

I'm trying to understand the behavior of REM units when used for element positioning. While pixels (px) maintain a fixed position regardless of font size, using REM seems to always lock the element's screen position. I expected REM unit to cause some shifts in positioning based on the root font size. Can someone explain the relationship between using REM for positioning and how it affects an element's screen location? As an example: I was doing this desktop only form for learning (Github repo: https://github.com/Suqbs/sign-up-form and Live: https://suqbs.github.io/sign-up-form/) and *Passwords do not match is what leads me to this question because even if the font size changes it is still there, not even shifting. So, this isn't a problem to solve but i want to understand how is it doing this and is this applicable for every scenario?

3 replies

Gaming

Programming