DEV Community: benboorstein

Technical Exercises (2) from a Software Engineering Internship Application Process

benboorstein — Sun, 26 Feb 2023 17:30:17 +0000

/* Contents:
    - the instructions
    - my Exercise 1 solution
    - someone else's Exercise 1 solution
    - my Exercise 2 solution
*/


/* Instructions
    EXERCISE 1
    Enumerate all uppercase/lowercase permutations for any letter specified in $rule_char_set.

    Input:
    word = "medium-one"
    rule_char_set = "dn"

    Output:
    solutions = ["medium-one", "meDium-one", "medium-oNe", "meDium-oNe"]

    If the character in $rule_char_set appears more than once in $word, treat them as independent
    variables. For example:

    Input:
    word = "medium-one"
    rule_char_set = "m"

    Output:
    solutions = ["medium-one", "Medium-one", "mediuM-one", "MediuM-one"]

    EXERCISE 2
    Find the median number of all values from two very large arrays of sorted integers. Assume
    both arrays have the same large length = N.
    I'd like to see a solution of runtime faster than O(N).

    Input:
    array_int1 = 10, 20, 30, 40, 51, 61, 71
    array_int2 = 15, 25, 31, 86, 600, 700, 900

    Output: median = 45.5
*/


// Exercise 1 (my solution; is recursive and creates duplicates; is not as concise as I'd like)

const listPerms = (wordStr, charSetStr, input) => {
    let indexesOfChars = []
    wordStr.split('').forEach((wordLett, i) => {
        charSetStr.split('').forEach(charSetLett => {
            if (wordLett === charSetLett) {
                indexesOfChars.push(i)
            }
        })
    })
    // console.log(indexesOfChars)

    let wordWithMaxCaps = []
    wordStr.split('').forEach((lett, i) => {
        indexesOfChars.forEach(num => {
            if (i === num) {
                lett = lett.toUpperCase()
            }
        })
        wordWithMaxCaps.push(lett)
    })
    // console.log(wordWithMaxCaps)

    // console.log(input)
    if (input.includes(wordWithMaxCaps.join(''))) {
        return []
    } else {
        if (input.length === 0) {
            input.push(wordStr.split(''))
            // console.log(input)
        } else {
            input = input.map(wStr => wStr.split(''))
            // console.log(input)
        }

        let newArr = []

        input.forEach(word => {
            word.forEach((lett, i) => {
                indexesOfChars.forEach(num => {
                    if (i === num && lett !== lett.toUpperCase()) {    
                        newArr.push(word.slice(0, i).concat(lett.toUpperCase()).concat(word.slice(i + 1)).join(''))        
                    }
                })
            })
        })

        // console.log(newArr)
        input = newArr.filter((wStr, i) => newArr.indexOf(wStr) === i) // removing newArr's duplicate strings
        // console.log(input)

        const solution = listPerms(wordStr, charSetStr, input)
        solution.unshift(...input) // this occurs after the recursive function call has returned
        solution.unshift(wordStr) // wordStr could have been added by returning '[wordStr]' instead of '[]' when the base case was met. However, if this were done, then wordStr wouldn't be at the beginning of the 'solution' array, given that one line above this one is 'solution.unshift(...input)' and not 'solution.push(...input)'. If 'push' were used instead, then returning '[wordStr]' at the base case would put wordStr at the beginning of 'solution', but then the order of all the non-wordStr strings would no longer be correct.
        return solution.filter((wStr, i) => solution.indexOf(wStr) === i) // removing solution's duplicate wordStr strings
    }
}

console.log(listPerms('medium-one', 'm', []))
console.log(listPerms('medium-one', 'dn', []))
console.log(listPerms('medium-one', 'md', []))
console.log(listPerms('medium-one', 'mdn', []))
console.log(listPerms('medium-one', 'dnm', []))
console.log(listPerms('medium-one', 'edon', []))
console.log(listPerms('medium-one', 'medon', []))

console.log(listPerms('medium-one-man', 'mdn', []))


// Exercise 1 (someone else's solution; isn't recursive and doesn't create duplicates; is very concise)

const getPerms = (word, charSet) => {
    let result = ['']

    for (let i in word) { // loop over each character in 'word'
        let char = word[i]

        let temp = []

        result.forEach(str => { // loop over each string that is, so far, in 'result'
            if (charSet.indexOf(char) !== -1) { // if 'char' is in 'charSet'...
                // ...add both cases of 'char'
                temp.push(str + char.toUpperCase())
                temp.push(str + char.toLowerCase())
            } else { // if 'char' is not in 'charSet'...
                temp.push(str + char) // ...add the existing case of 'char'
            }
        })

        result = temp
        // console.log(result) // how 'result' progresses with each iteration
    }

    return result
}

console.log(getPerms('medium-one', 'm'))
console.log(getPerms('medium-one', 'dn'))
console.log(getPerms('medium-one', 'md'))
console.log(getPerms('medium-one', 'mdn'))
console.log(getPerms('medium-one', 'dnm'))
console.log(getPerms('medium-one', 'edon'))
console.log(getPerms('medium-one', 'medon'))

console.log(getPerms('medium-one-man', 'mdn'))


// Exercise 2 (my solution; I was clued into this approach by being advised to learn about Binary Search)

function getMedian(arr1, arr2) { // arr1 and arr2 are sorted
    if (arr1.length !== 2) { // since arr1 and arr2 are the same length, either can be used here...and this comment applies to several lines below
        let middleFloored = Math.floor(arr1.length / 2)
        // console.log(middleFloored)

        let m1
        let m2
        if (arr1.length % 2 !== 0) {
            m1 = arr1[middleFloored]
            m2 = arr2[middleFloored]
        } else {
            m1 = (arr1[middleFloored] + arr1[middleFloored - 1]) / 2
            m2 = (arr2[middleFloored] + arr2[middleFloored - 1]) / 2
        }
        // console.log(m1)
        // console.log(m2)

        if (m1 === m2) {
            return m1 // Note: m1 or m2 can be returned here. Why? Because either will be the median for the merged array. How do we know this? Because: The merged array will always be even in length, m1 and m2 will always be the two middle numbers, and the average of two identical numbers is either number.
        } else if (m1 > m2) {
            if (arr1.length % 2 !== 0) {
                return getMedian(arr1.slice(0, middleFloored + 1), arr2.slice(middleFloored))
            } else {
                return getMedian(arr1.slice(0, middleFloored + 1), arr2.slice(middleFloored - 1))
            }
        } else if (m1 < m2) {
            if (arr1.length % 2 !== 0) {
                return getMedian(arr1.slice(middleFloored), arr2.slice(0, middleFloored + 1))
            } else {
                return getMedian(arr1.slice(middleFloored - 1), arr2.slice(0, middleFloored + 1))
            }
        } else {
            return -1
        }
    } else {
        return (Math.max(arr1[0], arr2[0]) + Math.min(arr1[1], arr2[1])) / 2
    }
}

console.log(getMedian([10, 20, 30, 40, 51, 61, 71], [15, 25, 31, 86, 600, 700, 900])) // 45.5

// console.log(getMedian([3, 5, 8, 12, 15, 76, 85, 101, 354], [8, 9, 14, 17, 28, 52, 83, 95, 411])) // 22.5
// console.log(getMedian([3, 5, 8, 12, 15, 76, 85, 101], [8, 9, 14, 17, 28, 52, 83, 95])) // 16
// console.log(getMedian([15, 25, 31, 86, 600, 700, 900], [10, 20, 30, 40, 51, 61, 71])) // 45.5
// console.log(getMedian([3, 5, 8, 12, 15, 76, 85], [8, 9, 14, 17, 28, 52, 83])) // 14.5
// console.log(getMedian([1, 12, 15, 26, 38], [2, 13, 17, 30, 45])) // 16
// console.log(getMedian([-10, -4, 2, 5], [-8, 1, 4, 7])) // 1.5
// console.log(getMedian([], [])) // -1

Advent of Code 2022 Day 2 Part 1 - Solution Only

benboorstein — Wed, 18 Jan 2023 20:07:26 +0000

// EXAMPLE input (encrypted strategy guide) converted to a multiline string
const strategyGuide =
`A Y
B X
C Z`

// opponent is first column and this is opponent winning
const oppWinning = {
    A: 'Z',
    B: 'X',
    C: 'Y'    
}

// I am second column and this is me winning
const meWinning = {
    A: 'Y',
    B: 'Z',
    C: 'X'
}

// points granted for use of tool
const toolPoints = {
    X: 1,
    Y: 2,
    Z: 3
}

const getMyTotalScore = (input) => {
    const inputAsArr = input.split('\n').map(str => str.split(' ')) // the reason 'input' is converted to an array of arrays instead of an object of key-value pairs is because the ACTUAL input (i.e., not the EXAMPLE input we're working with here) would, if set up as an object, have duplicate keys, and of course duplicate keys are not allowed in JavaScript objects (iterating through the keys of a JavaScript object that has duplicate keys doesn't work)

    let myTotalScore = 0

    for (let i = 0; i < inputAsArr.length; i++) {
        myTotalScore += toolPoints[inputAsArr[i][1]]

        if (inputAsArr[i][1] === meWinning[inputAsArr[i][0]]) {
            myTotalScore += 6
        } else if (inputAsArr[i][1] === oppWinning[inputAsArr[i][0]]) {
            myTotalScore
        } else {
            myTotalScore += 3
        }
    }

    return myTotalScore
}

console.log(getMyTotalScore(strategyGuide)) // 15

Advent of Code 2022 Day 1 Part 2 - Solution Only

benboorstein — Wed, 18 Jan 2023 19:43:41 +0000

// EXAMPLE input converted to a multiline string
const input =
`1000
2000
3000

4000

5000
6000

7000
8000
9000

10000`

// use my work from Part 1 to get the array of sums
    // make an array of sub-arrays where each sub-array is one elf's calories, i.e., one grouping of nums
    const groupedByElf =
        input // `1000\n2000\n3000\n\n4000\n\n5000\n6000\n\n7000\n8000\n9000\n\n10000`
            .split('\n\n') // ['1000\n2000\n3000', '4000', '5000\n6000', '7000\n8000\n9000', '10000']
            .map(str => str.split('\n').map(str => +str)) // [ [1000, 2000, 3000], [4000], [5000, 6000], [7000, 8000, 9000], [10000] ]

    // find the total for each grouping and put these totals in one array
    const eachGroupSum = groupedByElf.map(subArr => subArr.reduce((acc, curVal) => acc + curVal)) // [6000, 4000, 11000, 24000, 10000]

// sort array from smallest to largest
const eachGroupSumSorted = eachGroupSum.sort((a, b) => a - b) // [4000, 6000, 10000, 11000, 24000]

// push and pop, push and pop, push and pop (3 times)
let threeHighest = []
threeHighest.push(eachGroupSumSorted.pop())
threeHighest.push(eachGroupSumSorted.pop())
threeHighest.push(eachGroupSumSorted.pop())
// console.log(threeHighest) // [24000, 11000, 10000]

// sum those three values
const sumOfThreeHighest = threeHighest.reduce((acc, curVal) => acc + curVal)

// log it
console.log(sumOfThreeHighest) // 45000

Advent of Code 2022 Day 1 Part 1 - Solution Only

benboorstein — Wed, 18 Jan 2023 16:27:57 +0000

// EXAMPLE input converted to a multiline string
const input =
`1000
2000
3000

4000

5000
6000

7000
8000
9000

10000`

// make an array of sub-arrays where each sub-array is one elf's calories, i.e., one grouping of nums
const groupedByElf =
    input // `1000\n2000\n3000\n\n4000\n\n5000\n6000\n\n7000\n8000\n9000\n\n10000`
        .split('\n\n') // ['1000\n2000\n3000', '4000', '5000\n6000', '7000\n8000\n9000', '10000']
        .map(str => str.split('\n').map(str => +str)) // [ [1000, 2000, 3000], [4000], [5000, 6000], [7000, 8000, 9000], [10000] ]

// find the total for each grouping and put these totals in one array
const eachGroupSum = groupedByElf.map(subArr => subArr.reduce((acc, curVal) => acc + curVal))

// pass this array (spread) into Math.max()
const highestCalGroup = Math.max(...eachGroupSum)

// log it
console.log(highestCalGroup) // 24000

Advent of Code 2018 Day 2 Part 2 - Solution and Explanation

benboorstein — Mon, 22 Aug 2022 22:28:00 +0000

The challenge itself can be found here once Part 1 has been solved. (My Part 1 article can be found here.)

Please note that:

This article focuses on only one solution to a challenge to which there are multiple solutions.
The solution in its entirety can be found at the bottom.
The solution utilizes two main functions, loops, array methods, and conditionals.

Because the challenge's actual "puzzle input" is very long, we will be working with the challenge's example "puzzle input":

abcde
fghij
klmno
pqrst
fguij
axcye
wvxyz

Before we can get to the main part of the challenge, we have to convert what's just above into JavaScript, so that we can then convert it into an array of strings (each string will be a box ID).

So how do we interpret what the seven lines of text are? In other words, as they are currently, how can we translate (so to speak) them into JavaScript?

Well, we consider it to be one long string with line breaks:

'abcde\nfghij\nklmno\npqrst\nfguij\naxcye\nwvxyz'

How can we be sure this is correct?

Well if we log the string to the console, what we'll see printed is the original input:

abcde
fghij
klmno
pqrst
fguij
axcye
wvxyz

So we know it's correct.

Let's save the string into a variable called examplePuzzleInput.

const examplePuzzleInput = 'abcde\nfghij\nklmno\npqrst\nfguij\naxcye\nwvxyz'

Next, let's...

use the split() method to convert this long string into an array of strings
store our result in a variable called boxIDsArr

const boxIDsArr = examplePuzzleInput.split('\n')

What does boxIDsArr log?

['abcde', 'fghij', 'klmno', 'pqrst', 'fguij', 'axcye', 'wvxyz']

So now we have our array and we can move on to the main part of the challenge.

Our task is to...

find the two box IDs that differ by only one letter, with this differing letter being at the same position in each box ID, e.g., fghij and fguij
remove, from either box ID, the differing letter to get a shorter-by-one box ID with only the letters shared by the two similar box IDs, e.g., fgij

First we'll set up a function called findTheTwoBoxIDs that takes the parameter input. Input is the alias we'll use for the array of box IDs that's shown above.

function findTheTwoBoxIDs(input) {

}

Because we want to access each box ID string in input, we'll loop through input.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {

    }
}

And we'll log each input[i] string to the console so that we can see each string. At this point, doing this isn't very helpful, but, later, once we've logged other steps as well, it will prove to be quite useful in enabling us to see exactly what the function is doing.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])
    }
}

Let's pause and think about exactly what we need to do next. Because we need to find, out of all the strings, which two strings differ by only one same-positioned letter, and because it's highly unlikely that these two strings will be positioned consecutively in input, what we need to do is compare the first string to every string after it, then compare the second string to every string after it, then compare the third string to every string after it, and so on. So, what we want is a loop inside of our first loop that will start at the string after input[i].

This way, when the first string ('abcde') is input[i], the first string will be compared to every other string ('fghij', 'klmno', 'pqrst', 'fguij', 'axcye', and 'wvxyz'), and the next time through the outer loop, when the second string ('fghij') is input[i], the second string will be compared to every other string ('klmno', 'pqrst', 'fguij', 'axcye', and 'wvxyz'), and so on.

Note that, later, once we have several different console.log()s, we'll be able to see this process playing out.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {

        }
    }
}

And we'll log each input[j] string to the console.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])
        }
    }
}

Now that we have access to a 'control' string (input[i]) and a 'comparison' string (input[j]), and because we're going to need to access each letter in each string, let's use the split() method to convert each string to an array of letters. We'll store the converted 'control' string in a variable called boxIdLettersArr and the converted 'comparison' string in a variable called nextBoxIdLettersArr.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
        }
    }
}

And because we're going to be counting the number of letters in each two box ID comparison that are not the same, let's declare a counter variable called mismatchedLetters and start it at 0.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0
        }
    }
}

In order to compare the letters of boxIdLettersArr and nextBoxIdLettersArr, we need another loop, this one inside our inner loop.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {

            }
        }
    }
}

What might be a good way to compare the letters of boxIdLettersArr and nextBoxIdLettersArr?

How about an if statement that checks if each letter of boxIdLettersArr at position k is different than each letter of nextBoxIdLettersArr at position k?

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {

                }
            }
        }
    }
}

And if it is the case that the letter at position k in each letter array is not the same letter, then let's increment our counter variable by 1.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }
        }
    }
}

Our next step is to log mismatchedLetters to the console, making sure to log it outside of the loop so that mismatchedLetters has finished incrementing by the time we log it.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)
        }
    }
}

We certainly have not solved the whole challenge yet, but let's take a moment to log our function, as it is now, to the console.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)
        }
    }
}

console.log(findTheTwoBoxIDs(boxIDsArr))

Notice what it is that the function's three console.log()s are enabling us to see.

In the console, we can now see...

the process described farther above of each box ID being compared, one by one, to every box ID below it
the number of mismatched letters for each comparison

Just for fun at this point, try to find the comparison for which mismatchedLetters logs 1!

Just as a quick reminder: If mismatchedLetters logs 1, then we know that the two box IDs whose comparison generated this 1 are the two box IDs we're trying to find. In other words, these are the two box IDs that vary by only one letter at the same position in each box ID.

So how do we put this into our function?

How about an if statement that checks if mismatchedLetters is ever exactly 1?

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)

            if (mismatchedLetters === 1) {

            }
        }
    }
}

And if mismatchedLetters is ever exactly 1, then what? Well first let's see what we get by logging boxIdLettersArr and nextBoxIdLettersArr (and remember that each of these is an array of letters, as opposed to a string).

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)

            if (mismatchedLetters === 1) {
                console.log(boxIdLettersArr)
                console.log(nextBoxIdLettersArr)
            }
        }
    }
}

console.log(findTheTwoBoxIDs(boxIDsArr))

We see that what's logged is two box IDs, ['f', 'g', 'h', 'i', 'j'] and ['f', 'g', 'u', 'i', 'j'], respectively.

So have we solved the first item of our two-item task list?

Recall it was: "find the two box IDs that differ by only one letter, with this differing letter being at the same position in each box ID, e.g., fghij and fguij".

So yes we have!

Now for the second task, which was: "remove, from either box ID, the differing letter to get a shorter-by-one box ID with only the letters shared by the two similar box IDs, e.g., fgij".

So how should we do this?

Well we could accomplish this within the findTheTwoBoxIDs function, but instead let's call a new function, just because it's a bit cleaner.

We'll call the new function findSharedLetters, because the purpose of this function is to find the letters that the two box IDs have in common.

So given that, in findSharedLetters, we are going to be working with the two box IDs, and given that working with them is easiest in array form, what arguments do we want to pass to findSharedLetters?

The arrays we just logged: boxIdLettersArr and nextBoxIdLettersArr.

And let's not forget to return findSharedLetters to findTheTwoBoxIDs.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)

            if (mismatchedLetters === 1) {
                console.log(boxIdLettersArr) // ['f', 'g', 'h', 'i', 'j']
                console.log(nextBoxIdLettersArr) // ['f', 'g', 'u', 'i', 'j']

                return findSharedLetters(boxIdLettersArr, nextBoxIdLettersArr)
            }
        }
    }
}

Now let's construct findSharedLetters.

And note that the aliases for findSharedLetters's arguments will be IdLettersArr and nextIdLettersArr, respectively.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {

}

In findSharedLetters, we need to compare our two box IDs and, in the end, return a string with only the letters that the box IDs share.

The string that we need to return will be converted from an array of letters. So we can safely say we're going to be creating a new array.

So let's do that first. We'll call our new array sharedLettersArr.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []
}

What we want is a way to push only the shared letters into sharedLettersArr.

So we'll need access to each box ID letter. Let's pick just one of the box IDs and loop through it.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []

    for (let i = 0; i < IdLettersArr.length; i++) {

    }
}

Because we want to push only the shared letters of the two box IDs, let's add an if statement that checks if each letter of IdLettersArr at position i is the same as each letter of nextIdLettersArr at position i.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []

    for (let i = 0; i < IdLettersArr.length; i++) {
        if (IdLettersArr[i] === nextIdLettersArr[i]) {

        }
    }
}

And now let's push the common letters to sharedLettersArr.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []

    for (let i = 0; i < IdLettersArr.length; i++) {
        if (IdLettersArr[i] === nextIdLettersArr[i]) {
            sharedLettersArr.push(IdLettersArr[i])
        }
    }
}

For the final couple steps of this function, let's convert sharedLettersArr to a string using the join() method, store it in a variable called sharedLettersStr, and return sharedLettersStr.

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []

    for (let i = 0; i < IdLettersArr.length; i++) {
        if (IdLettersArr[i] === nextIdLettersArr[i]) {
            sharedLettersArr.push(IdLettersArr[i])
        }
    }

    const sharedLettersStr = sharedLettersArr.join('')
    return sharedLettersStr
}

Before moving on to the end, just note that the following is a more concise (though less explicit) way to accomplish what all the code in findSharedLetters accomplishes:

return IdLettersArr.filter((letter, index) => letter === nextIdLettersArr[index]).join('')

Now for our final step: Let's put it all together.

function findTheTwoBoxIDs(input) {
    for (let i = 0; i < input.length; i++) {
        console.log(input[i])

        for (let j = i + 1; j < input.length; j++) {
            console.log(input[j])

            let boxIdLettersArr = input[i].split('')
            let nextBoxIdLettersArr = input[j].split('')
            let mismatchedLetters = 0

            for (let k = 0; k < boxIdLettersArr.length; k++) {
                if (boxIdLettersArr[k] !== nextBoxIdLettersArr[k]) {
                    mismatchedLetters++
                }
            }

            console.log(mismatchedLetters)

            if (mismatchedLetters === 1) {
                console.log(boxIdLettersArr) // ['f', 'g', 'h', 'i', 'j']
                console.log(nextBoxIdLettersArr) // ['f', 'g', 'u', 'i', 'j']

                return findSharedLetters(boxIdLettersArr, nextBoxIdLettersArr)
            }
        }
    }
}

console.log(findTheTwoBoxIDs(boxIDsArr)) // fgij // f, g, i, and j are the common letters of the two box IDs that differed by one letter

function findSharedLetters(IdLettersArr, nextIdLettersArr) {
    let sharedLettersArr = []

    for (let i = 0; i < IdLettersArr.length; i++) {
        if (IdLettersArr[i] === nextIdLettersArr[i]) {
            sharedLettersArr.push(IdLettersArr[i])
        }
    }

    const sharedLettersStr = sharedLettersArr.join('')
    return sharedLettersStr
}

I hope this has been clear and helpful!

Thank you for reading!

Advent of Code 2018 Day 2 Part 1 - Solution and Explanation

benboorstein — Sun, 14 Aug 2022 14:40:00 +0000

The challenge itself can be found here.

Please note that:

This article focuses on only one solution to a challenge to which there are multiple solutions.
The solution in its entirety can be found at the bottom.
The solution utilizes a main function, objects, loops, conditionals, array methods, and the Object.values() method.

Because the challenge's actual "puzzle input" is very long, we will be working with the challenge's example "puzzle input":

abcdef
bababc
abbcde
abcccd
aabcdd
abcdee
ababab

Before we can get to the main part of the challenge, we have to convert what's just above into JavaScript, so that we can then convert it into an array of strings (each string will be a box ID).

So how do we interpret what the seven lines of text are? In other words, as they are currently, how can we translate (so to speak) them into JavaScript?

Well, we consider it to be one long string with line breaks:

'abcdef\nbababc\nabbcde\nabcccd\naabcdd\nabcdee\nababab'

How can we be sure this is correct?

Well if we log the string to the console, what we'll see printed is the original input:

abcdef
bababc
abbcde
abcccd
aabcdd
abcdee
ababab

So we know it's correct.

Let's save the string into a variable called examplePuzzleInput.

const examplePuzzleInput = 'abcdef\nbababc\nabbcde\nabcccd\naabcdd\nabcdee\nababab'

Next, let's...

use the split() method to convert this long string into an array of strings
store our result in a variable called boxIDsArr

const boxIDsArr = examplePuzzleInput.split('\n')

What does boxIDsArr log?

['abcdef', 'bababc', 'abbcde', 'abcccd', 'aabcdd', 'abcdee', 'ababab']

So now we have our array and we can move on to the main part of the challenge.

Our task is to...

count the number of box IDs that have exactly 2 of any letter
count the number of box IDs that have exactly 3 of any letter
do this to get the checksum: number of doubles * number of triples

(If in need of more clarity, the challenge itself provides some explanation.)

First we'll set up a function called getMatches that takes the parameter input. Input is the alias we'll use for the array of box IDs that's shown above.

function getMatches(input) {

}

Because we want to count...

the number of box IDs that have exactly TWO of any letter
the number of box IDs that have exactly THREE of any letter

...the next thing we'll do is set up an object, called matches, to keep count of the number of matches found for each of these two categories.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
}

Because we need to access each of the input array's strings, we're going to loop through input with a forEach loop. Each value we'll be accessing in this loop is a box ID string, so we'll call it boxIdStr.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {

    })  
}

But what we really need to be able to access is each letter in each string. So, since we're already in each string, we're now going to loop through each string with another forEach loop.

Note that we're putting the split() method on each string to convert the string to an array of letters (with each letter being a string). So boxIdStr.split('') for the input array's first string (the first string is: 'abcdef') looks like this:

['a', 'b', 'c', 'd', 'e', 'f']

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        boxIdStr.split('').forEach(letter => {

        })
    })
}

Because we're going to be counting the number of occurrences of each letter in each string, the next thing we'll do is set up another object, this time called counts, which will start as an empty object.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {

        })
    })
}

How are we going to count the number of occurrences of each letter in each string?

Let's take the second string in the input array (the second string is: 'bababc') as an example. Having been converted to an array of letters, it looks like this:

['b', 'a', 'b', 'a', 'b', 'c']

As the loop hits 'b' (the first letter in the string):
If counts[letter] (in other words, counts['b']) does exist (in other words, if the counts object does have a key called b), then increment b's value by 1. But if counts[letter] (in other words, counts['b']) does not yet exist (in other words, if the counts object does not yet have a key called b), then give the counts object a key called b and give b a value of 1.

In the code just below, note that the if clause's counts[letter] is a shorthand for counts.hasOwnProperty(letter) which is a shorthand for counts.hasOwnProperty(letter) === true. The reason counts[letter] works here is because if it returns undefined, then it is returning something that is falsy, and if it returns a value, then it is returning something that is truthy.

Also note that we could replace the below code's if...else statement with counts[letter] = (counts[letter] || 0) + 1. It's just a more concise way of accomplishing the same thing.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {
            if (counts[letter]) {
                counts[letter]++
            } else {
                counts[letter] = 1
            }
        })
        console.log(counts)
    })
}

Note that console.log(counts) is only included in the code above so that we can see exactly what the counts object for each string looks like once everything that is going to be added to it has been added to it. For example, the counts object for the second string looks like this:

{b: 3, a: 2, c: 1}

So we know that, in the second string, a appears two times, b appears three times, and c appears one time.

Of course what we've explored here with the second string has been repeated for every string in the input array.

Now we need to determine for each counts object if it does or does not contain values that are 2 or values that are 3. Notice that what we are not doing is counting the number of values in each counts object that are 2 or 3. (In case this distinction is still unclear, it's described in more detail farther down.)

We accomplish this by using the includes() method.

Because includes() returns true or false, Object.values(counts).includes(2), for example, is not concerned with how many of a counts object's values are 2 but rather whether or not this counts object has any values that are 2.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {
            if (counts[letter]) {
                counts[letter]++
            } else {
                counts[letter] = 1
            }
        })
        console.log(counts)
        if (Object.values(counts).includes(2)) {

        }
        if (Object.values(counts).includes(3)) {

        }
    })
}

And if a count object contains values of 2 (regardless of how many of the object's values are 2), we will increment the value of the matches object's twice key by 1.

In other words, with such an object as this {a: 1, b: 2, c: 1, d: 1, e: 1}, the matches object's twice key's value will increment by 1, and this is probably pretty obvious. But what may not be obvious is that even with such an object as this {a: 2, b: 1, c: 1, d: 2}, the matches object's twice key's value will increment by 1, not 2. Again, this is due to how includes() works.

And if a count object contains values of 3 (regardless of how many of the object's values are 3), we will increment the value of the matches object's thrice key by 1.

In other words, with such an object as this {a: 1, b: 1, c: 3, d: 1}, the matches object's thrice key's value will increment by 1, and this is probably pretty obvious. But what may not be obvious is that even with such an object as this {a: 3, b: 3}, the matches object's thrice key's value will increment by 1, not 2. Again, this is due to how includes() works.

And it probably doesn't need to be said but, because more clarity is better, let's include it: With such an object as this {a: 2, b: 3, c: 1, d: 1, e: 3, f: 2, g: 3}, the matches object's twice key's value and thrice key's value will each only be incremented by 1.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {
            if (counts[letter]) {
                counts[letter]++
            } else {
                counts[letter] = 1
            }
        })
        console.log(counts)
        if (Object.values(counts).includes(2)) {
            matches.twice++
        }
        if (Object.values(counts).includes(3)) {
            matches.thrice++
        }
    })
}

Because what we're after is the checksum and the way to get the checksum is to calculate number of doubles * number of triples, our next step is to write this calculation in our function and return it.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {
            if (counts[letter]) {
                counts[letter]++
            } else {
                counts[letter] = 1
            }
        })
        console.log(counts)
        if (Object.values(counts).includes(2)) {
            matches.twice++
        }
        if (Object.values(counts).includes(3)) {
            matches.thrice++
        }
    })

    return matches.twice * matches.thrice
}

Now for our final step: Call the getMatches function, passing in boxIDsArr, and log that function call to the console.

function getMatches(input) {
    let matches = {
        twice: 0,
        thrice: 0
    }
    input.forEach(boxIdStr => {
        let counts = {}
        boxIdStr.split('').forEach(letter => {
            if (counts[letter]) {
                counts[letter]++
            } else {
                counts[letter] = 1
            }
        })
        console.log(counts)
        if (Object.values(counts).includes(2)) {
            matches.twice++
        }
        if (Object.values(counts).includes(3)) {
            matches.thrice++
        }
    })

    return matches.twice * matches.thrice
}

console.log(getMatches(boxIDsArr)) // 12 // 12 is the checksum

I hope this has been clear and helpful!

Thank you for reading!

freeCodeCamp Recursion Example Explained

benboorstein — Fri, 22 Jul 2022 19:22:01 +0000

/*
Note that the below recursion challenge can be found here:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.
But it's the *example* provided, not the challenge itself.
*/


function countup(n) {
    if (n < 1) { // the base case
        return []
    } else {
        const countArray = countup(n - 1) // remember that, on the way "down", each call is added to the stack
        countArray.push(n)
        // console.log(countArray) // just a helpful line
        return countArray
    }
}

console.log(countup(5)) // [1, 2, 3, 4, 5]


/*
fCC: "At first, this seems counterintuitive since the value of n decreases but the values in the final array are increasing.
This happens because the push happens last, after the recursive call has returned.
At the point where n is pushed into the array, countup(n - 1) has already been evaluated and returned [1, 2, ..., n - 1]."
*/


// The way "down":
    // countup(5 - 1) // added to stack first
    // countup(4 - 1) // added to stack second
    // countup(3 - 1) // added to stack third
    // countup(2 - 1) // added to stack fourth
    // countup(1 - 1) // added to stack fifth

// So the stack looks like this, top to bottom:
    // countup(1 - 1)
    // countup(2 - 1)
    // countup(3 - 1)
    // countup(4 - 1)
    // countup(5 - 1)

// The base case is reached:
    // countup(1 - 1) evaluates to countup(0)
    // ...which means n is 0
    // ...which means n < 1 is true
    // ...which means [] is returned to countup()
    // ...which means countArray = []

// The way "back up":
    // It is now that 'control' moves on to the 'countArray.push(n)' line
    // countArray = [1] // the 1 comes from the top of the stack (and then the 2 is at the top of the stack)
    // countArray = [1, 2] // the 2 comes from the top of the stack (and then the 3 is at the top of the stack)
    // countArray = [1, 2, 3] // the 3 comes from the top of the stack (and then the 4 is at the top of the stack)
    // countArray = [1, 2, 3, 4] // the 4 comes from the top of the stack (and then the 5 is at the top of the stack)
    // countArray = [1, 2, 3, 4, 5] // the 5 comes from the top of the stack (and then the stack is empty and countArray is returned)

Brian Holt's Calculator with Walk-through of '1 + 2 = 3'

benboorstein — Fri, 15 Jul 2022 16:07:17 +0000

  <body>
    <div class="calc">
      <section class="screen">
        0
      </section>
      <section class="calc-buttons">
        <div class="calc-row">
          <button class="double calc-button">C</button>
          <button class="calc-button">←</button>
          <button class="calc-button">÷</button>
        </div>
        <div class="calc-row">
          <button class="calc-button">7</button>
          <button class="calc-button">8</button>
          <button class="calc-button">9</button>
          <button class="calc-button">×</button>
        </div>
        <div class="calc-row">
          <button class="calc-button">4</button>
          <button class="calc-button">5</button>
          <button class="calc-button">6</button>
          <button class="calc-button">-</button>
        </div>
        <div class="calc-row">
          <button class="calc-button">1</button>
          <button class="calc-button">2</button>
          <button class="calc-button">3</button>
          <button class="calc-button">+</button>
        </div>
        <div class="calc-row">
          <button class="triple calc-button">0</button>
          <button class="calc-button">=</button>
        </div>
      </section>
    </div>
    <script src="./assets/js/app.js"></script>
  </body>

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

.calc {
    width: 400px;
    background-color: black;
    color: white;
}

.screen {
    font-size: 40px;
    font-family: 'Courier New', Courier, monospace;
    text-align: right;
    padding: 20px 5px;
}

.calc-button {
    background-color: #d8d9db;
    color: black;
    height: 100px;
    width: 24.5%;
    border: none;
    border-radius: 0;
    font-size: 40px;
    cursor: pointer;
}

.calc-button:hover {
    background-color: #ebebeb;
}

.calc-button:active {
    background-color: #bbbcbe;
}

.calc-button:last-child {
    background-color: #df974c;
    color: white;
}

.calc-button:last-child:hover {
    background-color: #dfb07e;
}

.calc-button:last-child:active {
    background-color: #dd8d37;
}

.double {
    width: 49.7%;
}

.triple {
    width: 74.8%;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    margin-bottom: 0.5%;
}

// The below code is from one of Brian Holt's Frontend Masters courses. The comments are mine, added to help me better understand the calculator.


// WALKING THROUGH '1 + 2 = 3':

  // BEFORE ANYTHING IS CLICKED:
    // runningTotal = 0
    // previousOperator = null
    // buffer = '0'

  // AFTER HAVING CLICKED '1':
    // runningTotal = 0
    // previousOperator = null
    // buffer = '1'

  // AFTER HAVING CLICKED '1 +':
    // runningTotal = 1
    // previousOperator = +
    // buffer = '0'

  // AFTER HAVING CLICKED '1 + 2':
    // runningTotal = 1
    // previousOperator = +
    // buffer = '2'

  // AFTER HAVING CLICKED '1 + 2 =':
    // runningTotal = 0
    // previousOperator = null
    // buffer = '3'

let runningTotal = 0 // numerical total (not seen in UI)
let buffer = '0' // what user is typing in ('buffer' gets stored below in 'screen.innerText' so is effectively what's seen in the UI)
let previousOperator = null // most recent operator pressed // note that 'null' is different than '0'; 'null' is the absence of anything
const screen = document.querySelector('.screen')

document.querySelector('.calc-buttons').addEventListener('click', function(event) { // using event delegation/bubbling here
  buttonClick(event.target.innerText)
})

function buttonClick(value) { 
  if (isNaN(parseInt(value))) { // MDN: 'isNaN()' determines if a value is NaN or not. Because coercion inside 'isNaN()' can be surprising, 'Number.isNaN()' may be preferable
    handleSymbol(value)
  } else {
    handleNumber(value)
  }
  rerender()
}

function handleNumber(value) {
  if (buffer === '0') {
    buffer = value
  } else {
    buffer += value
  }
}

function handleSymbol(value) {
  switch (value) { // using a 'switch' statement instead of an 'if...else' statement with a bunch of 'else if'
    case 'C': // i.e., if 'value' is 'C', do what's below
      buffer = '0'
      runningTotal = 0 // yes, this IS here for a reason. E.g., if user pressed '2' and then '+', runningTotal would have '2' stored in it, so if user decided at this point to press 'C' to clear, then runningTotal would need to be set back to 0
      previousOperator = null
      break
    case '=':
      if (previousOperator === null) {
        return // do nothing, and exit this function
      }
      flushOperation(parseInt(buffer))
      previousOperator = null
      buffer = '' + runningTotal // concatenates the empty string and 'runningTotal', thereby storing in 'buffer' 'runningTotal''s value but as a string
      runningTotal = 0
      break
    case '←':
      if (buffer.length === 1) {
        buffer = '0'
      } else {
        buffer = buffer.substring(0, buffer.length - 1)
      }
      break
    default:
      handleMath(value)
      break
  }
}

function handleMath(value) {
  const intBuffer = parseInt(buffer)
  if (runningTotal === 0) {
    runningTotal = intBuffer
  } else {
    flushOperation(intBuffer)
  }

  previousOperator = value

  buffer = '0' // this is the reason '0' appears each time '÷', '×', '-', or '+' is pressed
}

function flushOperation(intBuffer) { // this is a confusing name for this parameter, given that 'intBuffer' is the name of an actual variable and argument above.
  if (previousOperator === '+') {
    runningTotal += intBuffer
  } else if (previousOperator === '-') {
    runningTotal -= intBuffer
  } else if (previousOperator === '×') {
    runningTotal *= intBuffer
  } else {
    runningTotal /= intBuffer
  }
}

function rerender() {
  screen.innerText = buffer
}

Some Recursion Practice Notes

benboorstein — Sun, 10 Jul 2022 21:54:56 +0000

// A note on recursive functions from https://www.freecodecamp.org/news/understanding-recursion-in-javascript/:
// "...the first step [is] to tell the function when to stop calling itself. Then we [tell] it what to do when it calls itself."

// Remember that "control" "goes down" until it hits the "base condition", and then it "changes direction"/"goes back up"/"unwinds".



// Please note that I do not have a great understanding of all of the examples presented here. Some of them I get, and others are for me to study some more. 



// An example from https://eloquentjavascript.net/03_functions.html
function power(base, exponent) {
    if (exponent === 0) {
        return 1
    } else {
        return base * power(base, exponent - 1)
    }
}
console.log(power(2, 3)) // 8


// The following is my understanding of it, whether illustrated correctly or not quite

// The original
function power(base, exponent) {
    if (exponent === 0) {
        return 1
    } else {
        return base * power(base, exponent - 1)
    }
}

// The original but with the numbers for "base" and "exponent" plugged in
function power(2, 3) {
    if (exponent === 0) { // No
        return 1 // N/A
    } else {
        return 2 * power(2, 3 - 1)
    }
}

    function power(2, 2) {
        if (exponent === 0) { // No
            return 1 // N/A
        } else {
            return 2 * power(2, 2 - 1)
        }
    }

        function power(2, 1) {
            if (exponent === 0) { // No
                return 1 // N/A
            } else {
                return 2 * power(2, 1 - 1) // On the "way back up"/"unwind" (i.e., AFTER the below iteration is done), the 1 from the iteration below is returned to THIS line's function call, so this line effectively becomes "return 2 * 1". The "2 * 1" here equals 2 of course. In the iteration above, 2 is plugged in for "power(2, 2 - 1)", so that line effectively becomes "return 2 * 2", which gives us 4 of course. And it continues like so all the way "back up".
            }
        }

            function power(2, 0) {
                if (exponent === 0) { // Yes
                    return 1 // 1 // So, at this point, "control", having reached the "base condition" (which is the code that's on this line), "changes direction"/"goes back up"/"unwinds", and the 1 is returned to the function call above. 
                }
            }



// A simple example
function factorial(x) {
    if (x === 0) { 
        return 1
    }
    else { 
        return x * factorial(x - 1)
    }
}
console.log(factorial(4)) // 24
// How it works:
// factorial(4) => 4 * factorial(3) => 3 * factorial(2) => 2 * factorial(1) => 1 * factorial(0) => 1
// Note: The 4 is "kept" and factorial(3) is run, and then from that the 3 is "kept" and factorial(2) is run, etc., until the base case.
// So, we're left with: 4 * 3 * 2 * 1 * 1



// And, the way of outlining the example just above can also be applied to the power(base, exponent) example at the top
function power(base, exponent) {
    if (exponent === 0) {
        return 1
    } else {
        return base * power(base, exponent - 1)
    }
}
console.log(power(2, 3)) // 8
// How it works:
// power(2, 3) => 2 * power(2, 2) => 2 * power(2, 1) => 2 * power(2, 0) => 1
// Note: The 2 is "kept" and power(2, 2) is run, and then from that the 2 is "kept" and power(2, 1) is run, etc., until the base case.
// So, we're left with: 2 * 2 * 2 * 1



// An example from Fun Fun Function
let countDownFrom = (num) => {
    if (num < 1) {
        return 1
    } else {
      console.log(num)
      countDownFrom(num - 1)
    }
}
console.log(countDownFrom(10)) // logs:
// 10
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1



// Notice that, in the above example, the function call in the 'else' block is not actually returned (i.e., there's no 'return' keyword before it). With this in mind, note how if we add the 'return' keyword before 'countDownFrom(num - 1)' (as is done in the example just below) the '1' from the 'if' block gets returned. This is a reminder that the '1' from the 'if' block is actually returned to the function call in the 'else' block. So in order for this '1' to be returned, the function call in the 'else' block must be returned.
let countDownFrom = (num) => {
    if (num < 1) {
        return 1
    } else {
      console.log(num)
      return countDownFrom(num - 1)
    }
}
console.log(countDownFrom(10)) // logs:
// 10
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1
// 1



// An example from freeCodeCamp
let oddOrEven = (number) => {
    if (number === 0) {
        return 'Even'
    } else if (number === 1) {
        return 'Odd'
    } else {
        return oddOrEven(number - 2)
    }
}
console.log(oddOrEven(20)) // Even
console.log(oddOrEven(75)) // Odd
console.log(oddOrEven(98)) // Even
console.log(oddOrEven(113)) // Odd



// A challenge from freeCodeCamp
// "Write a program that reverses a string using recursion. Given the string 'freeCodeCamp' your program should return 'pmaCedoCeerf'."
function reverseString(str) {
    if (str.length === 0) {
        return ''
    } else {
        console.log(str)
        return str[str.length - 1] + reverseString(str.slice(0, str.length - 1))
    }
}
console.log(reverseString('freeCodeCamp')) // pmaCedoCeerf
// I think that the below is a correct illustration of what's returned:
// p + freeCodeCam
// pm + freeCodeCa
// pma + freeCodeC
// pmaC + freeCode
// pmaCe + freeCod
// pmaCed + freeCo
// pmaCedo + freeC
// pmaCedoC + free
// pmaCedoCe + fre
// pmaCedoCee + fr
// pmaCedoCeer + f
// pmaCedoCeerf



// An example from https://stackoverflow.com/questions/27415470/javascript-recursion-reverse-string
function reverse(str) {
    if (str.length === 0) {
        return ''
    } else {      
        return str[str.length - 1] + reverse(str.substring(0, str.length - 1))
    }
}
console.log(reverse('abc')) // cba
// "c" + reverse("ab")
// "c" + ("b" + reverse("a"))
// "c" + ("b" + ("a" + reverse("")))     // ***Hits the 'base condition' of recursion***
// "c" + ("b" + ("a" + ""))              // ***Unwinding begins here***
// "c" + ("ba")
// "cba"



// Another example from https://eloquentjavascript.net/03_functions.html
function findSolution(target) {
    function find(current, history) {
        if (current == target) { // if (current === +target) {
            return history
        } else if (current > target) {
            return null
        } else {
            return find(current + 5, `(${history} + 5)`) || find(current * 3, `(${history} * 3)`)
        }
    }
    return find(1, '1')
}
console.log(findSolution(13)) // (((1 * 3) + 5) + 5)
/*
"Note that [the above] program doesn’t necessarily find the shortest sequence of operations. It is satisfied when it finds any sequence at all...To better understand how this function produces the effect we're looking for, let's look at all the calls to [the function named 'find'] that are made when searching for a solution for the number 13."

find(1, "1")
  find(6, "(1 + 5)")
    find(11, "((1 + 5) + 5)")
      find(16, "(((1 + 5) + 5) + 5)")
        too big
      find(33, "(((1 + 5) + 5) * 3)")
        too big
    find(18, "((1 + 5) * 3)")
      too big
  find(3, "(1 * 3)")
    find(8, "((1 * 3) + 5)")
      find(13, "(((1 * 3) + 5) + 5)")
        found!
*/

A Collection of Advice

benboorstein — Sun, 03 Jul 2022 14:41:25 +0000

Over the last couple years, as time has allowed, I've been learning front-end web development. During this time, I've received advice from various people and places. And, as I've progressed, I've begun to formulate a bit of my own advice. I figured it would be a fun and beneficial exercise to aggregate all this input, organize it, disregard the pieces that seem less pertinent, and put the remainder into my own words. (Lord knows I need to be reminded of these points as much as anyone.) So that's what I've done. Hopefully others will find it valuable, although I’m open to the possibility that some parts aren't as wise as they seem to me to be. Whatever the case, here's the collection:

There's an idea these days that if you're not passionate about a discipline before you sincerely pursue it then you'll never become passionate about it. But this is not actually true. There are examples everywhere, around us now and throughout history, of people taking up a discipline without any passion for it and their passion growing alongside their proficiency. This doesn't always happen, but it often does. So in reality, the rule, with some exceptions of course, is: We actually can, with a receptive mind and with perseverance, grow passionate about a discipline for which we had little or no prior passion.

One of the biggest differences between beginner programmers and veteran programmers is the level of faith that there is a solution.

Programming is about having a large, complex, intimidating problem in front of you and breaking it up into pieces small enough that you are able to solve one piece at a time...until the whole problem is solved.

When your code snippet seems like it should work but it doesn't: Systematically explain, to yourself if no one else is around, what every single aspect of your code snippet is doing, even the aspects that seem obvious.

Whether your code snippet works or not: If you can't grasp what you've written, try to rewrite it in a way that you can grasp it.

One of the toughest obstacles a beginner faces is getting drawn down rabbit holes. Web development is a broad domain and also requires precision. Put another way, there's a ton of material to learn and each aspect of the material needs to be implemented just right for it to work. As a result, you'll frequently reach a point in your project at which you don't know how to write the code you need...so you'll start researching how to write it. And this is a good thing! Finding your code solution may or may not be quick, but it’s usually once you've found it that the rabbit hole beckons. You'll be tempted to 1) mentally solidify your new knowledge through extended research (for example, you were researching forEach(), and now you want to find and work through fifty more examples of forEach()) or 2) learn about all the new, tangential code concepts you just unintentionally discovered during your initial research (for example, you were researching forEach(), and you unintentionally discovered filter(), map(), and reduce()). But instead of succumbing to these, or any other, temptations, try to make a habit of returning to your project to implement your solution and proceed. (If one of the diversions is something with which you sincerely want to engage, then simply make a note to return to it another time.) Why? Because applying what you know and doing so within the continuity of a project is what best facilitates learning web development. In the process of starting to learn web development, being able to let go is probably just as valuable as having a driving desire to learn. So, to reiterate: When you need to do some research to solve a problem, find what you need in order to proceed in your project, implement it, and move on.

Asking "Why?" is often good, but it becomes a hindrance to your learning when it prevents you from proceeding. In programming, proceeding is how you learn best over the long-term, even if it doesn't feel like it in the short-term.

If you have a specific, pointed question, ask it. Always ask it.

Much like with writing in your native tongue, to be a proficient programmer you have to abandon perfectionism. Keep moving. Only later, once you've finished the project or a major section of the project, go back to polish it and make it "perfect".

When you are told to not be a perfectionist and to keep moving, it may seem that you're being directed to code at breakneck speed. But this is not the case. As long as it's not overthinking or perfectionism that is slowing you down, move at whatever speed works for you, and, with practice, you will become faster.

It's true that it's a good idea to really internalize (that is, understand and remember long-term) what you're learning; after all, this is how we get better at whatever we're learning. But don't make the mistake of assuming that each concept or code snippet you practice can be internalized after doing it once or twice or even several times. Programming is too broad and too complex. You will drive yourself crazy with such an unrealistic expectation, and you will start to doubt your own intelligence and maybe even your worthiness to learn the discipline. The reality is: Each time you practice some aspect of programming, you will only understand it a sliver better than before and remember it a sliver longer than before. But at some point, after you've revisited that aspect innumerable times, you'll get the pleasant feeling of realizing that you've internalized it. Sure, some beginners absorb new concepts faster than others, but, for every beginner, learning the craft is an incremental process and there's no way to make it otherwise.

Try to avoid drawing conclusions about your skill level as it relates to that of your programming peers; don't assume that they're better than you or that you're better than them; do assume that you can learn from them and that they can learn from you.

When you're building a project that requires more than one language (for example, a project that requires HTML, CSS, and JavaScript), there's no rule that says you have to finish your work on one language before moving on to another. So, if it feels more fluid mentally to do a little work on one language, then a little work on another language, and so on, then go for it. And if it feels more fluid mentally to complete one before moving on to another, then go for it.

20 Array Methods

benboorstein — Sun, 26 Jun 2022 23:57:23 +0000

/*
Below is a list of 20 array methods. For each method, there's a description at the top (stolen directly from MDN) and one or more examples.

I wanted all of the 20 in the same place, and organized a certain way, for myself, and I figured I may as well share it because it might also be helpful to others.

Please note that some of these methods are more complicated than others. And some may be simple in the examples I've included but have much more complicated uses. The best example of one of these more complicated methods is reduce(). To read more about reduce() (just to take one example), visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce.

Please note that some of the 20 array methods I've included do modify the original array, and some do not. For example, push(), pop(), unshift(), and shift() do, and forEach(), filter(), map(), and reduce() do not. In most, though not all, of the MDN descriptions that I've included, it is mentioned whether the original array is modified or not. But another clue is this: If you view my example for the reverse() method (just to take one example), you'll notice that in the second line the method is put on the array and that in the third line only the array name itself (i.e., without any method on it) is passed in to console.log(), and yet a modified array is what is logged to the console.
*/


// 1. The push() method adds one or more elements to the end of an array and returns the new length of the array.

const pushDemoArr = [10, 20, 30, 40, 50]
console.log(pushDemoArr.push(60)) // 6
console.log(pushDemoArr) // [10, 20, 30, 40, 50, 60]


// 2. The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

const popDemoArr = [10, 20, 30, 40, 50]
console.log(popDemoArr.pop()) // 50
console.log(popDemoArr) // [10, 20, 30, 40]


// 3. The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const unshiftDemoArr = [10, 20, 30, 40, 50]
console.log(unshiftDemoArr.unshift(0)) // 6
console.log(unshiftDemoArr) // [0, 10, 20, 30, 40, 50]


// 4. The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

const shiftDemoArr = [10, 20, 30, 40, 50]
console.log(shiftDemoArr.shift()) // 10
console.log(shiftDemoArr) // [20, 30, 40, 50]


// 5. The forEach() method executes a provided function once for each array element.

const forEachDemoArr = [10, 20, 30, 40, 50]
forEachDemoArr.forEach(val => { console.log(val + 3) }) // 13 23 33 43 53


// 6. The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const filterDemoArr = [10, 20, 30, 40, 50]
const newFilterDemoArr = filterDemoArr.filter(val => { return val > 25 }) // i.e., if a number in filterDemoArr is greater than 25, then add it to newFilterDemoArr
console.log(newFilterDemoArr) // [30, 40, 50]


// 7. The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const mapDemoArr = [10, 20, 30, 40, 50]
const newMapDemoArr = mapDemoArr.map(val => { return val + 5 })
console.log(newMapDemoArr) // [15, 25, 35, 45, 55]


// 8. The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

// Below are three examples of reduce().

// Without an initialValue, which means that reduceDemoArr1 is treated as it is: [10, 20, 30, 40, 50]
const reduceDemoArr1 = [10, 20, 30, 40, 50]
const sum1 = reduceDemoArr1.reduce((accumulator, currentVal) => { return accumulator + currentVal }) 
console.log(sum1) // 150

// With an initialValue of 0, which means that reduceDemoArr2 is treated as: [0, 10, 20, 30, 40, 50]
const reduceDemoArr2 = [10, 20, 30, 40, 50]
const sum2 = reduceDemoArr2.reduce((accumulator, currentVal) => { return accumulator + currentVal }, 0) 
console.log(sum2) // 150

// With an initialValue of 100, which means that reduceDemoArr3 is treated as: [100, 10, 20, 30, 40, 50]
const reduceDemoArr3 = [10, 20, 30, 40, 50]
const sum3 = reduceDemoArr3.reduce((accumulator, currentVal) => { return accumulator + currentVal }, 100) 
console.log(sum3) // 250

/* Additional notes on reduce() that may be helpful:
- Even though reduce() is being used for addition in the three examples above, reduce() is not inherently adding, or multiplying, or anything. Don't make the mistake of thinking that it is, because thinking so can make things very confusing with more complex uses of reduce(). reduce() returns one value in the end based on the conditions provided.
- As is written here https://medium.com/swlh/javascript-reduce-with-examples-570f1b51e854, the "accumulator" can also be called the "previousValue", because it holds "whatever the previous iteration returned".
- The second parameter of reduce(), following the 2- to 4-paramater callback function, is the initialValue (often set to 0), which just determines what the accumulator/previousValue used in the first iteration is. In other words (from fCC): In addition to the callback function, reduce() has a parameter which takes an initial value for the accumulator. If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator.
*/


// 9. The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

const findDemoArr = [11, 20, 31, 40, 51]
const valFound = findDemoArr.find(val => { return val % 2 === 0 }) 
console.log(valFound) // 20


// 10. The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const includesDemoArr = [10, 20, 30, 40, 50]
console.log(includesDemoArr.includes(20)) // true
console.log(includesDemoArr.includes(25)) // false
console.log(includesDemoArr.includes(2)) // false


// 11. The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

const someDemoArr = [10, 20, 30, 40, 50]
const thereIsAtLeastOne = someDemoArr.some(val => { return val > 12 && val < 28 })
console.log(thereIsAtLeastOne) // true


// 12. The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

// Below are two examples of every().

const everyDemoArr1 = [10, 20, 30, 40, 50]
const theyAllPassTheTest1 = everyDemoArr1.every(val => { return typeof val === 'number' })
console.log(theyAllPassTheTest1) // true

const everyDemoArr2 = [10, 20, 30, 40, 50, 'I am a string, not a number']
const theyAllPassTheTest2 = everyDemoArr2.every(val => { return typeof val === 'number' })
console.log(theyAllPassTheTest2) // false


// 13. The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

// Below are three examples of sort().

const sortDemoArr1 = [100, 50, 32, 20000, 4]
sortDemoArr1.sort()
console.log(sortDemoArr1) // [100, 20000, 32, 4, 50] // note that the numbers have been sorted into ascending order according to each number's first digit

const sortDemoArr2 = [100, 50, 32, 20000, 4]
sortDemoArr2.sort((a, b) => { return a - b })
console.log(sortDemoArr2) // [4, 32, 50, 100, 20000] // note that the numbers have been sorted into ascending order

const sortDemoArr3 = ['Tuesday', 'Wednesday', 'Monday', 'Friday', 'Thursday']
sortDemoArr3.sort()
console.log(sortDemoArr3) // ['Friday', 'Monday', 'Thursday', 'Tuesday', 'Wednesday'] // note that the days have been sorted into alphabetical order


// 14. The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

const reverseDemoArr = [10, 20, 30, 40, 50]
reverseDemoArr.reverse()
console.log(reverseDemoArr) // [50, 40, 30, 20, 10]


// 15. The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

// Below are three examples of fill().

const fillDemoArr1 = [10, 20, 30, 40, 50]
fillDemoArr1.fill(4) // fill all positions with 4
console.log(fillDemoArr1) // [4, 4, 4, 4, 4]

const fillDemoArr2 = [10, 20, 30, 40, 50]
fillDemoArr2.fill(7, 2) // fill with 7 from position 2
console.log(fillDemoArr2) // [10, 20, 7, 7, 7]

const fillDemoArr3 = [10, 20, 30, 40, 50]
fillDemoArr3.fill(8, 1, 4) // fill with 8 from position 1 until (not including) position 4
console.log(fillDemoArr3) // [10, 8, 8, 8, 50]


// 16. The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

const joinDemoArr = [10, 20, 30, 40, 50]
console.log(joinDemoArr.join()) // '10,20,30,40,50'
console.log(joinDemoArr.join('')) // '1020304050'
console.log(joinDemoArr.join(' ')) // '10 20 30 40 50'
console.log(joinDemoArr.join('-')) // '10-20-30-40-50'


// 17. The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

const findIndexDemoArr = [10, 20, 30, 40, 50]
const indexFound = findIndexDemoArr.findIndex(val => { return val > 32 })
console.log(indexFound) // 3


// 18. The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const indexOfDemoArr = [10, 20, 30, 40, 50]
const index = indexOfDemoArr.indexOf(30)
console.log(index) // 2


// 19. The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

// Below are three examples of slice().

const sliceDemoArr1 = [10, 20, 30, 40, 50]
const sliced1 = sliceDemoArr1.slice(2, 4)
console.log(sliced1) // [30, 40]

const sliceDemoArr2 = [10, 20, 30, 40, 50]
const sliced2 = sliceDemoArr2.slice(0, 3)
console.log(sliced2) // [10, 20, 30]

const sliceDemoArr3 = [10, 20, 30, 40, 50]
const sliced3 = sliceDemoArr3.slice(2) // note that if there is no second number passed to slice() (the second number indicates the sliceDemoArr3 index at which the "slicing" is to stop), then sliceDemoArr3.length is the de facto second number
console.log(sliced3) // [30, 40, 50]


// 20. The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

// Below are two examples of concat().

const concatDemoArr1 = [10, 20, 30, 40, 50]
const newConcatDemoArr1 = concatDemoArr1.concat(60)
console.log(newConcatDemoArr1) // [10, 20, 30, 40, 50, 60]

const concatDemoArr2 = [10, 20, 30, 40, 50]
const newConcatDemoArr2 = concatDemoArr2.concat([60, 70, 80, 90, 100])
console.log(newConcatDemoArr2) // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

My Solutions to 19 freeCodeCamp Algorithm Challenges

benboorstein — Sun, 19 Jun 2022 14:54:29 +0000

/*
Below are my solutions to the 16 challenges of freeCodeCamp's Basic Algorithm Scripting section and the first 3 challenges of freeCodeCamp's Intermediate Algorithm Scripting section.

(Full disclosure: This is certainly NOT the first time I've worked on these 19 challenges, but it is the first or second time I've been satisfied with my solutions.)
*/


// 1. Convert Celsius to Fahrenheit
function convertToF(celsius) {
    let fahrenheit = celsius * (9/5) + 32

    return fahrenheit
}

console.log(convertToF(30))


// 2. Reverse a String
function reverseString(str) {
    return str.split('').reverse().join('')
}

console.log(reverseString('hello'))


// 3. Factorialize a Number
function factorialize(num) {
    return num < 1 ? 1 : num * factorialize(num - 1)
}

console.log(factorialize(5))


// 4. Find the Longest Word in a String
function findLongestWordLength(str) {
    return Math.max(...str.split(' ').map(val => val.length))
}

console.log(findLongestWordLength('The quick brown fox jumped over the lazy dog'))


// 5. Return Largest Numbers in Arrays
function largestOfFour(arr) {
    return arr.map(subArr => Math.max(...subArr))
}

console.log(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]))


// 6. Confirm the Ending
function confirmEnding(str, target) {
    return str.slice(str.length - target.length) === target
}

console.log(confirmEnding('Bastian', 'an'))


// 7. Repeat a String Repeat a String
function repeatStringNumTimes(str, num) {
    return num < 1 ? '' : str + repeatStringNumTimes(str, num - 1)
}

console.log(repeatStringNumTimes('abc', 3))


// 8. Truncate a String
function truncateString(str, num) {
    return str.length > num ? str.slice(0, num) + '...' : str
}

console.log(truncateString('A-tisket a-tasket A green and yellow basket', 8))


// 9. Finders Keepers
function findElement(arr, func) {
    return arr.find(val => func(val))
}

console.log(findElement([1, 2, 3, 4], num => num % 2 === 0))


// 10. Boo who
function booWho(bool) {
    return typeof bool === 'boolean'
}

console.log(booWho(null))


// 11. Title Case a Sentence
function titleCase(str) {
    return str
        .toLowerCase()
        .split(' ')
        .map(val => val.slice(0, 1).toUpperCase() + val.slice(1))
        .join(' ')
}

console.log(titleCase('I\'m a little tea pot'))


// 12. Slice and Splice
function frankenSplice(arr1, arr2, n) {
    return arr2.slice(0, n).concat(arr1).concat(arr2.slice(n))
}

console.log(frankenSplice([1, 2, 3], [4, 5, 6], 1))


// 13. Falsy Bouncer
function bouncer(arr) {
    return arr.filter(val => Boolean(val))
}

console.log(bouncer([7, 'ate', '', false, 9]))


// 14. Where do I Belong
function getIndexToIns(arr, num) {
    return arr
        .concat(num)
        .sort((a, b) => a - b)
        .indexOf(num)
}

console.log(getIndexToIns([40, 90, 60], 50))


// 15. Mutations
function mutation(arr) {
    return arr[1]
        .toLowerCase()
        .split('')
        .every(val => arr[0].toLowerCase().split('').includes(val))
}

console.log(mutation(['HellO', 'oELLh']))


// 16. Chunky Monkey
function chunkArrayInGroups(arr, size) {
    let newArr = []

    for (let i = 0; i < arr.length; i += size) {
        newArr.push(arr.slice(i, i + size))
    }

    return newArr
}

console.log(chunkArrayInGroups(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3))


// 1. Sum All Numbers in a Range
function sumAll(arr) {
    // "The lowest number will not always come first."
    let lowerNum = Math.min(...arr)
    let higherNum = Math.max(...arr)

    // Getting the range of numbers, including the low number and the high number, and putting them in an array.
    let newArr = []

    for (let i = lowerNum; i <= higherNum; i++) {
        newArr.push(i)
    }

    // "...the sum of those two numbers plus the sum of all the numbers between them."
    return newArr.reduce((acc, cur) => acc += cur)
}

console.log(sumAll([7, 2]))


// 2. Diff Two Arrays
function diffArray(arr1, arr2) {
    let notInArr1 = arr2.filter(val => !arr1.includes(val)) // [ 4 ]
    let notInArr2 = arr1.filter(val => !arr2.includes(val)) // [ ]

    return notInArr1.concat(notInArr2)
}

console.log(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]))


// 3. Seek and Destroy
function destroyer(arr) {
    let toRemove = Array.from(arguments).slice(1) // [ 2, 3 ]

    return arr.filter(val => !toRemove.includes(val))
}

console.log(destroyer([1, 2, 3, 1, 2, 3], 2, 3))