After I watched those two videos and some articles about bracket notation, I was really confused, so I just quickly created a simple code so I can play around and understand more about bracket notation.
This is the full code:
html
<body>
<button>Click</button>
</body>
js
const myBtn = document.querySelector('button');
const fruits = {
fruitOne: 'Apple',
fruitTwo: 'Orange',
fruitThree: 'Peach'
}
btn.addEventListener('click',(e)=>{
/*
Getting data from button element's first class..
Example:
If the button element's first class is "fruitThree", the console.log will output "Peach"
and if the button element's first class is "fruitOne", the console.log will output "Apple"
validate/sanitize fruitProperty variable because it might be executable js code??
*/
const fruitProperty = e.currentTarget.classList[0];
const fruit = fruits[fruitProperty];
console.log(fruit);
});
and thanks to you, I understand a little more about bracket notation and user validate/sanitize but there is still few things I don’t quite get it, like for example, does the above code need to get validate/sanitize? cause if I don’t, firstly, inside of bracket notation I can run javascript code right and secondly, I found out that currently, when I click the button, it console log out “undefined” but if I add “fruitTwo” class to button element from chrome dev tool’s element panel, it will console log out “Orange”, what if someone/user wrote some javascript code instead of just add class “fruitTwo” to button element’s class, so does that count as security vulnerabilitie?? Also if this thing/data is some how sending it to the back end and there is javascript code ready to get execute inside of bracket notation, it’s quite dangerous right?
With my second question, I understand now, so it doesn’t matter if I am doing only front end or front end and back end, I always need to validate/sanitize user input.