Caesar Cipher in Javascript using shiftChar () and Array.map ()

Question

I try to learn Javascript by reading a lot of online tutorials, and practice working on problems on coderbit. I'm having trouble calling CaesarCipher. The function should take a string and an offset parameter, and then return a string with each alpha character shifted using any offset (leaving any characters without alpha unchanged). I have my shiftChar () function, which will take char and offset and apply the shift only for alpha characters and return a new character. Now that this is complete, I thought I could just take the original string, split it into an array, and then map this array of characters to the new array using my shiftChar () function. However, I cannot make it work, and I cannot understand why.

Is there something that I am missing in the map method? I understand that the map method automatically passes each element to an array, which it is called as the first argument. Then I just pass the offset value as an extra argument. Can someone shed some light on why this is not working and suggest a more effective approach?

/* Using the JavaScript language, have the function CaesarCipher(str,num) take the str parameter and perform a Caesar Cipher shift on it using the num parameter as the shifting number. A Caesar Cipher works by shifting each letter in the string N places down in the alphabet (in this case N will be num). Punctuation, spaces, and capitalization should remain intact. For example if the string is "Caesar Cipher" and num is 2 the output should be "Ecguct Ekrjgt". */ var str = 'Caesar Cipher'; function CaesarCipher(str, offset){ var charArray = str.split(''); var result = charArray.map( shiftChar( char, offset )).join(''); function shiftChar(char, offset){ var isAlpha = /[Az]/; if(isAlpha.test(char)){ char = String.fromCharCode(char.charCodeAt(0) + offset); if(char > 'Z' && char < 'a' || char > 'z') char = String.fromCharCode(char.charCodeAt(0) - 26); } return char; } return result; } console.log(CaesarCipher( str, 2)); 

Answer 1

There are several things in your code that prevent you from getting the expected results.

Array.map() returns an array, it does not modify the original array. In your example, you store the new array in result , but your function returns the original charArray , not the result you want.

The second problem is the callback function that you provide map . The first argument of the map must be a function, but shiftChar( char, offset) not a function, it is the result of calling shiftChar . (Hope this part makes sense). Typically, when working with map you create an anonymous function that receives the arguments specified in the documentation below. In your case, you would like to do the following:

 var result = charArray.map( function(char) { return shiftChar(char, offset); } ).join(''); 

Array.map link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

full jsfiddle example: http://jsfiddle.net/p2fkLs2t/

Answer 2

If you need to parameterize your shiftChar function when you go through an array, you can curry it so that it takes one parameter at a time:

 function shiftChar(offset) { return function(char) { var isAlpha = /[az]/i; if(isAlpha.test(char)){ char = String.fromCharCode(char.charCodeAt(0) + offset); if(char > 'Z' && char < 'a' || char > 'z') char = String.fromCharCode(char.charCodeAt(0) - 26); } return char; } } 

so you will need to call it shiftChar(22)('a') to shift the letter "A" by 22.

This allows you to do "Hello".split("").map(shiftChar(22)); .

Answer 3

This should work:

 var str = 'Caesar Cipher'; function CaesarCipher(str, offset){ var charArray = str.split(''); function shiftChar(char){ var isAlpha = /[az]/i; if(isAlpha.test(char)){ char = String.fromCharCode(char.charCodeAt(0) + offset); if(char > 'Z' && char < 'a' || char > 'z') char = String.fromCharCode(char.charCodeAt(0) - 26); } return char; } var result = charArray.map( shiftChar ).join(''); return result; } console.log(CaesarCipher( "test", 2));