vanilla Javascript, additional assignment operator misconception - javascript

as far as I understand, the additional assignment operator simply shortens the way we increment a value, e.g, instead of writing x = x + 1 for instance, we use x += 1, Now, here is an example of a case that this approach didn't work for me as intended. I want to loop through a given string, add the current character to a predeclared empty object, if the character already exists in the object, i will increment its value by 1, if it does not, then I will add it with the value of 1. in other words I am building a character map of a given string.
let charMap = {}
for (let char of 'doooppy') {
charMap[char] = charMap[char] + 1 || 1;
}
this works like a charm. now check the following
let charMap = {}
for (let char of 'doooppy') {
charMap[char] += 1 || 1;
}
this now returns a NaN, which is pretty weird to me as its the same idea of using the assignment operator. can somebody explain why is that ?! thanks.

1 || 1 is being evaluated before charMap[char] += 1 || 1; is evaluated. That's the way operator precedence in JavaScript works. The part with || is evaluated before the part with +=. The first time that line of code is run, charMap[char] is undefined. Using += on undefined returns NaN, and then in subsequent executions using += on NaN also returns NaN.
Correct solution with += would be:
let charMap = {}
for (let char of 'doooppy') {
if (!charMap[char]) {
charMap[char] = 1;
} else {
charMap[char] += 1;
}
}

Related

Javascript - Find opening and closing bracket positions on a string?

I'm making a calculator for a site project of mine where you can type your entire expression before resolving, for example: 2+3*4 would return 14, 22-4 would return 18, 20+5! would return 140, and so on.
And that works for simple expressions like the ones I showed, but when I add brackets the code breaks.
So a simple expression like (2+3)! that should return 120 actually returns 10 or 2+3!.
my original ideia to make even the basic 2+3! work was to separate the string in math simbols and the rest. so it would separate in this case it would separate it into 2, + and 3!; where it would find the symbol and resolve just that part. And that's why it solves 10 instead of not working.
But after trying to solve I couldn't make the code work except in a extremely specific situation, so I decided to redo the code and post this here in case someone could help me out.
This is the function that I'm currently using to prepare my string for evaluation:
function sepOperFat(){
//2+3! it's working
//1+(2-(2+2)+3)! want that to work in the end
var value = document.calculator.ans.value;
var operandoPos = ['0'];
var operandoInPos = [''];
var paraResolver = [];
for(i = 0; i <= value.length; i++){
//check if value[i] is equal to +, -, ×, ÷, * & /
if(value[i] == '+' || value[i] == '-' || value[i] == '×' || value[i] == '÷' || value[i] == '*' || value[i] == '/'){
operandoPos.push(i);
operandoInPos.push(value[i]);
}
}
paraResolver.push(value.slice(operandoPos[0], operandoPos[1]));
for(var total = 1; total <= operandoPos.length; total++){
paraResolver.push(value.slice(operandoPos[total] + 1, operandoPos[total + 1]));
}
document.calculator.ans.value = '';
for(var total = 0; total <= paraResolver.length - 2; total++){
if(paraResolver[total].includes('!')){
document.calculator.ans.value += "factorial(" + paraResolver[total] + ")";
}else{
document.calculator.ans.value += paraResolver[total];
}
document.calculator.ans.value += operandoInPos[total + 1];
}
}
document.calculator.ans.value is the name of the string where i have the expression.
operandoPos is the position on the string where a symbol is at.
operandoInPos is the symbol (I maybe could have used value.charAt(operandoPos) for that too).
paraResolver is the number that I will be solving (like 3).
factorial( is the name of my function responsible for making the number factorial.
the function doesn't have a return because I still want to solve inside the document.calculator.ans.value.
to resolve the equation I'm using document.calculator.ans.value = Function('"use strict"; return '+ document.calculator.ans.value)(); that activates when I press a button.
And yeah, that's it. I just want a function capable of knowing the difference between (2+3)! and 2+(3)! so it can return factorial(2+3) instead of (2+factorial(3)).
Thank you for your help.
Your biggest problem is going to be that order of operations says parentheses need to be evaluated first. This might mean your code has to change considerably to support whatever comes out of your parentheses parsing.
I don't think you want all of that handled for you, but an approach you can take to sorting out the parenthesis part is something like this:
function parseParentheses(input) {
let openParenCount = 0;
let myOpenParenIndex = 0;
let myEndParenIndex = 0;
const result = [];
for (let i = 0; i < input.length; i++) {
if (input[i] === '(') {
if (openParenCount === 0) {
myOpenParenIndex=i;
// checking if anything exists before this set of parentheses
if (i !== myEndParenIndex) {
result.push(input.substring(myEndParenIndex, i));
}
}
openParenCount++;
}
if (input[i] === ')') {
openParenCount--;
if (openParenCount === 0) {
myEndParenIndex=i+1;
// recurse the contents of the parentheses to search for nested ones
result.push(parseParentheses(input.substring(myOpenParenIndex+1, i)));
}
}
}
// capture anything after the last parentheses
if (input.length > myEndParenIndex) {
result.push(input.substring(myEndParenIndex, input.length));
}
return result;
}
// tests
console.log(JSON.stringify(parseParentheses('1!+20'))) // ["1!+20"]
console.log(JSON.stringify(parseParentheses('1-(2+2)!'))) // ["1-",["2+2"],"!"]
console.log(JSON.stringify(parseParentheses('(1-3)*(2+5)'))) // [["1-3"],"*",["2+5"]]
console.log(JSON.stringify(parseParentheses('1+(2-(3+4))'))) // ["1+",["2-",["3+4"]]]
this will wrap your input in an array, and essentially group anything wrapped in brackets into nested arrays.
I can further explain what's happening here, but you're not likely to want this specific code so much as the general idea of how you might approach unwrapping parenthesis.
It's worth noting, the code I've provided is barely functional and has no error handling, and will behave poorly if something like 1 - (2 + 3 or 1 - )2+3( is provided.

Why JS doesn't coerce the value of i in a "for in loop"?

Given the two functions (with the expected output of //d):
function fearNotLetter(str) {
for (let i = 0; i < str.length; i++) {
let code = str.charCodeAt(i)
if (code !== str.charCodeAt(0) + i) {
return String.fromCharCode(str.charCodeAt(0) + i)
}
}
return undefined
}
fearNotLetter("abce");
// d
And
function fearNotLetter(str) {
for (let i in str) {
let code = str.charCodeAt(i)
if (code !== str.charCodeAt(0) + i) {
return String.fromCharCode(str.charCodeAt(0) + i)
}
}
return undefined
}
fearNotLetter("abce");
// ϊ
I discovered that the value of i is coerced to a String using the for...in loop. In my understanding, the if statement fails, because the value of i is no longer a number, therefore the sum can't be done.
My question is, why doesn't JS coerce i back to a number in the if statement (str.charCodeAt(0) + i )? And allow the sum to be done the same way as he for...loop?
Is it because, once iis coerced inside the funct, then it can't be coerced again?
In the first function you set the type of i to number when you initialized it to a number. In the second function i is a key to an iterable so it means it's type is string. There hasn't been type conversion at all.
Basically that's the coercion rule. As you can see in the table +, a String + a Number, the Number will always be implicitly coerced to String.
The intuition is, both String and Number have the + operator, but the Number will always be able to be coerced to a String, whereas not all String is (can be coerced to) a Number.
Have you tried:
str.charCodeAt(parseInt(i, 10))

Count Vowels in String Using Recursion With JavaScript

Hello I'm trying to understand recursion in JavaScript.
So far I have:
function countVowels(string) {
let vowelCount = 0;
// if we're not at the end of the string,
// and if the character in the string is a vowel
if (string.length - 1 >= 0 && charAt(string.length -1) === "aeiouAEIOU") {
//increase vowel count every time we iterate
countVowels(vowelCount++);
}
return vowelCount;
}
First of all, this is giving me issues because charAt is not defined. How else can I say "the character at the current index" while iterating?
I can't use a for-loop - I have to use recursion.
Second of all, am I using recursion correctly here?
countVowels(vowelCount++);
I'm trying to increase the vowel count every time the function is called.
Thanks for your guidance.
If you're interested, here is a version that does not keep track of the index or count, which might illuminate more about how the recursion can be done.
function countVowels(string) {
if (!string.length) return 0;
return (
"aeiou".includes(string.charAt(0).toLowerCase()) +
countVowels(string.substr(1))
);
}
console.log(countVowels("")); // 0
console.log(countVowels("abcde")); // 2
console.log(countVowels("eee")); // 3
// Note that:
console.log('"hello".substr(1)', "hello".substr(1)) // ello
console.log('"hello".charAt(0)', "hello".charAt(0)) // h
console.log('"aeiou".includes("a")', "aeiou".includes("a")) // true
console.log('"a".includes("aeiou")', "a".includes("aeiou")) // false
Our base case is that the string is empty, so we return 0.
Otherwise, we check if the first character in the string is a vowel (true == 1 and false == 0 in javascript) and sum that with counting the next (smaller by one) string.
You are making two mistakes:
You should have three parameters string , count(count of vowels) and current index i.
You should use includes() instead of comparing character with "aeiouAEIOU"
function countVowels(string,count= 0,i=0) {
if(!string[i]) return count
if("aeiou".includes(string[i].toLowerCase())) count++;
return countVowels(string,count,i+1);
}
console.log(countVowels("abcde")) //2
As asked by OP in comments "Can you please explain why it'sif("aeiou".includes(string[i].toLowerCase())) instead of if(string[i].includes("aeiou".toLowerCase()))"
So first we should know what includes does. includes() checks for string if it includes a certain substring passed to it or not. The string on which the method will be used it will be larger string and the value passed to includes() be smaller one.
Wrong one.
"a".includes('aeiou') //checking if 'aeiou' is present in string "a" //false
Correct one.
"aeiou".includes('a') //checking if 'a' is present in string "aeiou" //true
One possible solution would be:
function countVowels(string, number) {
if (!string) return number;
return countVowels(string.slice(1), 'aeiouAEIOU'.includes(string[0])? number + 1 : number);
}
// tests
console.log('abc --> ' + countVowels('abc', 0));
console.log('noor --> ' + countVowels('noor', 0));
console.log('hi --> ' + countVowels('hi', 0));
console.log('xyz --> ' + countVowels('xyz', 0));
and you should call your function like: countVowels('abc', 0)
Notes about your solution:
you always reset vowelCount inside your function, this usually does not work with recursion.
you defined your function to accept a string, but recall it with an integer in countVowels(vowelCount++); this it will misbehave.
always remember that you have to define your base case first thing in your recursion function, to make sure that you will stop sometime and not generate an infinite loop.
Alternative ES6 solution using regex and slice() method. Regex test() method will return true for vowels and as stated in a previous answer JavaScript considers true + true === 2.
const countVowels = str => {
return !str.length ? 0 : /[aeiou]/i.test(str[0]) + countVowels(str.slice(1));
}

console.log an expression before/without evaluation

Given a statement such as let boolVal = 1 < 2, is there a way to console log the actual expression, i.e. 1 < 2 not the true result?
let boolVal = 1 < 2;
console.log(boolVal) // logs out the boolean result
console.log(boolVal.toString()) // logs out the boolean result as a string
/* is there a way to get just
'1 < 2'
itself to be logged out? */
From your response in the comment section, I see you need a generic solution with different operands.
The simplest solution I can think of is by using eval.
1- Create an array of strings array[]. You could creare a string. "" +expression.
2- console.log(array[index]+ eval(array[index]) )
Although i would not recommend. Eval is bad for both performance and security.
Another workaround is to make a connection for the results and for string you create from the first step. Like 2 arrays or create objects with 2 attributes. {value:, expression}.
You can print them accourdingly when you print the variable.
You can achieve this by making a custom function:
function printExpression(x,y){
console.log( (x<y?x:y) + " < " + (x<y?y:x));
}
printExpression(1,2);
printExpression(4,3);
let boolVal = 1 < 2;
You cant log 1 < 2 directly because they are compared and stored in boolVal. What you can do is a workaround.
Store 1 and 2 in variables var1 and var2.
let boolVal = var1 < var2
if boolVal:
console.log(var1 + "<" + var2)
else:
console.log(var1 + ">" + var2)
You could make a function that makes the comparison, and log both the result of that function and the function itself.
function boolValComparer(val1, val2) {
console.log(val1, '<', val2); // logs the boolean comparison as string with parameters
return val1 < val2;
}
let boolVal = boolValComparer(1, 2);
console.log(boolVal) // logs out the boolean result
console.log(boolValComparer) // logs out the comparer function as a string

Devide numbers on countup function

I'm starting to learn javascript and I basically needed a countup that adds an x value to a number(which is 0) every 1 second. I adapted a few codes I found on the web and came up with this:
var d=0;
var delay=1000;
var y=750;
function countup() {
document.getElementById('burgers').firstChild.nodeValue=y+d;
d+=y;
setTimeout(function(){countup()},delay);
}
if(window.addEventListener){
window.addEventListener('load',countup,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',countup);
}
}
There's probably residual code there but it works as intended.
Now my next step was to divide the resultant string every 3 digits using a "," - basically 1050503 would become 1,050,503.
This is what I found and adapted from my research:
"number".match(/.{1,3}(?=(.{3})+(?!.))|.{1,3}$/g).join(",");
I just can't find a way to incorporate this code into the other. What should I use to replace the "number" part of this code?
The answer might be obvious but I've tried everything I knew without sucess.
Thanks in advance!
To use your match statement, you need to convert your number to a String.
Let's say you have 1234567.
var a = 1234567;
a = a + ""; //converts to string
alert(a.match(/.{1,3}(?=(.{3})+(?!.))|.{1,3}$/g).join(","));
If you wish, you can wrap this into a function:
function baz(a) {
a = a + "";
return a.match(/.{1,3}(?=(.{3})+(?!.))|.{1,3}$/g).join(",");
}
Usage is baz(1234); and will return a string for y our.
While I do commend you for using a pattern matching algorithm, this would probably be easier to, practically speaking, implement using a basic string parsing function, as it doesn't look anywhere as intimidating from just looking at the match statement.
function foo(bar) {
charbar = (""+bar).split(""); //convert to a String
output = "";
for(x = 0; x < charbar.length; x++) { //work backwards from end of string
i = charbar.length - 1 - x; //our index
output = charbar[i] + output; //pre-pend the character to the output
if(x%3 == 2 && i > 0) { //every 3rd, we stick in a comma, except if it is not the leftmost digit
output = ',' + output;
}
}
return output;
}
Usage is basically foo(1234); which yields 1,234.

Categories