The Web Developer Bootcamp - Udemy
\nIntro to Functions by Colt Steele
\nFunctions let us wrap bits of code up into REUSABLE packages. They are one of the building blocks of JS.
\nfunction doSomething() {\n console.log(\"HELLO WORLD\");\n}• Declare a function first.\n• Then call it.
\nOften we want to write functions that take inputs.
\nfunction square(num) {\n console.log(num * num);\n}모든 함수는 반환을 한다.
\n//this function capitalizes the first char in a string:\n\nfunction capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nvar city = \"paris\"; //\"paris\"\nvar capital = capitalize(city); //\"Paris\"\n\n//we can capture the returned value in a variablefunction isEven(num){\n\treturn num % 2 === 0;\n}\n\nfunction factorial(num){\n //define a result variable\n var result = 1;\n //calculate factorial and store value in result\n for(var i = 2; i <= num; i++){\n \tresult *= i;\n }\n //return the result variable\n return result;\n}\n\nfunction kebabToSnake(str) {\n\t//replace all '-' with \"_\"'s\n\tvar newStr = str.replace(/-/g , \"_\");\n\t//return str\n\treturn newStr;\n}function sing() {\n\tconsole.log(\"twinkle twinkle...\");\n\tconsole.log(\"how i wonder...\");\n}\n\nsetInterval(sing, 1000);\n\nclearInterval(2);\n\nsetInterval(function() {\n\tconsole.log(\"I am an anonymous function!\");\n\tconsole.log(\"THIS IS AWESONE!\");\n}, 2000);Push\nUse push to add to the end of an array:
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.push(\"green\");\n//[\"red\", \"orange\", \"yellow\", \"green\"]Pop\nUse pop to remove the last item in an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.pop();\n//[\"red\", \"orange\"]\n\n//pop() returns the removed element\nvar col = colors.pop(); //orangeUnshift\nUse unshift to add to the front of an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.unshift(\"infrared\")\n//[\"infrared\", \"red\", \"orange\", \"yellow\"]Shift\nUse shift to remove the first item in an array
\nvar colors = [\"red\", \"orange\", \"yellow\"];\ncolors.shift();\n//[\"orange\", \"yellow\"]\n\n//shift() also returns the removed element\nvar col = colors.shift(); //orangeIndexOf\nUse indexOf() to find the index of an item in an array
\nvar friends = [\"Charlie\", \"Liz\", \"David\", \"Mattias\", \"Liz\"];\n\n//returns the first index at which a given element can be found\nfriends.indexOf(\"David\"); //2\nfriends.indexOf(\"Liz\"); //1, not 4\n\n//returns -1 if the element is not present.\nfriends.indexOf(\"Hagrid\"); //-1Slice\nUse slice() to copy parts of an array
\nvar fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];\n//use slice to copy the 2nd and 3d fruits\n//specify index where the new array starts(1) and ends(3)\nvar citrus = fruits.slice(1, 3);\n\n//this does not alter the original fruits array\n//citrus contains ['Orange','Lemon']\n//fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];\n\n//you can also use slice() to copy an entire array\nvar nums = [1,2,3];\nvar otherNums = nums.slice();\n//both arrays are [1,2,3]2 Dimensional Array
\nvar friendGroups = [\n [\"Harry\", \"Ron\", \"Hermione\"],\n [\"Malfoy\", \"Crabbe\", \"Goyle\"],\n [\"Mooney\", \"Wormtail\", \"Prongs\"]\n];\n\n//What is the result of this line:\nconsole.log(friendGroups[2][0]); // Mooney\nconsole.log(friendGroups[2]); // [\"Mooney\", \"Wormtail\", \"Prongs\"]Simple todo list app\nlist.html
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title</title>\n <script type=\"text/javascript\" src=\"list.js\"></script>\n</head>\n<body>\n <h1>Todo List</h1>\n <ul>\n <li>\"new\" - Add A Todo</li>\n <li>\"list\" - List All todos</li>\n <li>\"quit\" - Quit App</li>\n </ul>\n\n</body>\n</html>list.js
\nvar todos = [\"Buy new turtle\"];\n\nvar input = prompt(\"What would you like to do?\");\n\nwhile(input !== \"quit\"){\n // handle input\n if(input === \"list\") {\n todos.forEach(function(todo){\n console.log(todos);\n });\n } else if(input === \"new\") {\n // ask for new todo\n var newTodo = prompt(\"Enter new todo\");\n // add to todos array\n todos.push(newTodo);\n }\n // ask again for new input\n input = prompt(\"What would you like to do?\")\n}\nconsole.log(\"ok you quit the app\")For Loop\nTo loop over an array using a for loop, we need to make use of the array's length property
\nvar colors = [\"red\", \"orange\", \"yellow\", \"green\"];\nfor(var i = 0; i < colors.length; i++) {\n console.log(colors[i]);\n}\n//red\n//orange\n//yellow\n//greenForEach\nJavaScript provides an easy built-in way of iterating over an array: ForEach\narr.forEach(someFunction)
var colors = [\"red\", \"orange\",\"yellow\", \"green\"];\ncolors.forEach(function(color){\n//color is a placeholder, call it whatever you want\n console.log(color);\n});\n//red\n//orange\n//yellow\n//green\n\ncolors.forEach(function(iLoveDogs) {\n\tconsole.log(\"INSIDE THE FOREACH \" + iLoveDogs);\n});\n//INSIDE THE FOREACH red\n//INSIDE THE FOREACH orange\n//INSIDE THE FOREACH yellow\n//INSIDE THE FOREACH greenExercise
\nvar numbers = [1,2,3,4,5,6,7,8,9,10];\nnumbers.forEach(function(color){\n\tif(color % 3 === 0) {\n\tconsole.log(color);\n }\n});\n//3\n//6\n//9Exercise2
\n[1,2,3].forEach(function(el, i, arr) {\n console.log(el, i, arr);\n});\n// 1 0 [1, 2, 3]\n// 2 1 [1, 2, 3]\n// 3 2 [1, 2, 3]Q. I am wondering exactly how that function works..
\nlist.html
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title</title>\n <script type=\"text/javascript\" src=\"list.js\"></script>\n</head>\n<body>\n <h1>Todo List</h1>\n <ul>\n <li>\"new\" - Add A Todo</li>\n <li>\"list\" - List All todos</li>\n <li>\"delete\" - Remove a Specific Todo</li>\n <li>\"quit\" - Quit App</li>\n </ul>\n\n</body>\n</html>list.js
\nvar todos = [\"Buy New Turtle\"];\n\nvar input = prompt(\"What would you like to do?\");\n\nwhile(input !== \"quit\"){\n //handle input\n if(input === \"list\") {\n printList();\n } else if(input === \"new\") {\n addTodo();\n } else if(input === \"delete\") {\n deleteTodo();\n }\n //ask again for new input\n input = prompt(\"What would you like to do?\");\n}\nconsole.log(\"OK, YOU QUIT THE APP\");\n\nfunction printList() {\n console.log(\"**********\");\n todos.forEach(function(todo, index){\n console.log(index + \": \" + todo);\n });\n console.log(\"**********\");\n}\n\nfunction addTodo(){\n //ask for new todo\n var newTodo = prompt(\"Enter new todo\");\n //add to todos array\n todos.push(newTodo);\n console.log(newTodo + \" added to list\")\n}\n\nfunction deleteTodo(){\n var index = prompt(\"Enter index of todo to delete\");\n todos.splice(index, 1);\n console.log(\"Todo Removed\")\n}Write a function printReverse() that takes an array as an argument and prints out the elements in the array in reverse order (don't actually revese the array itself.
\nprintReverse - My solution
\nlet arr = [1, 2, 3, 4];\nlet arr2 = [\"a\", \"b\", \"c\"];\n\nfunction printReverse(array) {\n\tif (array === undefined || array.length === 0) {\n\t // array empty or does not exist\n \tconsole.log(\"This array is empty!\");\n \treturn;\n\t}\n for(var i = array.length; i >= 0 ; i--) {\n console.log(array[i]);\n }\n}\n\nprintReverse(arr);\n//4\n//3\n//2\n//1\nprintReverse(arr2);\n//c\n//b\n//aprintReverse - Colt Steele
\nfunction printReverse(arr){\n\tfor(var i = arr.length - 1; i >= 0; i--){\n\t\tconsole.log(arr[i]);\n\t}\n}\n\nprintReverse([3,6,2,5]);\n//5\n//2\n//6\n//3Write a function isUniform() which takes an array as an argument\nand return true if all elements in the array are identical.
\nisUniform - My solution
\nlet arr = [1, 1, 1, 1];\nlet arr2 = [2, 1, 1, 1];\nlet arr3 = [\"a\", \"b\", \"c\"];\nlet arr4 = [\"b\", \"b\", \"b\"];\n\nfunction isUniform(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n let temp = array[0];\n for(let i = 1; i < array.length; i++) {\n if(temp !== array[i]){\n console.log(\"false\");\n return;\n }\n }\n\n console.log(\"true\");\n}\n\nisUniform(arr); //true\nisUniform(arr2); //false\nisUniform(arr3); //false\nisUniform(arr4); //trueisUniform - Colt Steele
\nfunction isUniform(arr){\n\tvar first = arr[0];\n\tfor(var i = 1; i < arr.length; i++){\n\t\tif(arr[i] !== first){\n\t\t\treturn false;\n\t\t}\n\t}\n\treturn true;\n}Write a function sumArray() that accept an array of numbers and return the sum of all numbers in the array.
\nsumArray - My solution
\nlet arr = [1, 2, 3];\nlet arr2 = [10, 3, 10, 4];\nlet arr3 = [-5, 100];\n\nfunction sumArray(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n let result = 0;\n for(let i = 0; i < array.length; i++) {\n result += array[i];\n }\n console.log(result);\n}\n\nsumArray(arr); //6\nsumArray(arr2); //27\nsumArray(arr3); //95sumArray - Colt Steele
\nfunction sumArray(arr){\n\tvar total = 0;\n\tarr.forEach(function(element){\n\t\ttotal += element;\n\t});\n\treturn total;\n}Write a function max() that accepts an array of numbers and returns the maximum number in the array.
\nmax - My solution
\nlet arr = [1, 2, 3];\nlet arr2 = [10, 3, 10, 4];\nlet arr3 = [-5, 100];\n\nfunction max(array) {\n if (array === undefined || array.length === 0) {\n // array empty or does not exist\n console.log(\"This array is empty!\");\n return;\n }\n if(array.length === 1) {\n console.log(array[0]);\n } else {\n let result = array[0];\n for(let i = 1; i < array.length; i++) {\n if(array[i] > result) {\n result = array[i];\n }\n }\n console.log(result);\n }\n}\n\nmax(arr); //3\nmax(arr2); //10\nmax(arr3); //100max - Colt Steele
\nfunction max(arr){\n\tvar max = arr[0];\n\tfor(var i = 1; i < arr.length; i++){\n\t\tif(arr[i] > max){\n\t\t\tmax = arr[i];\n\t\t}\n\t}\n\treturn max;\n}let colors = [\"red\", \"orange\", \"yellow\"];\n\nfunction myForEach(arr, func) {\n // loop through array\n for(var i = 0; i < arr.length; i++) {\n // call func for each item in array\n func(arr[i]);\n }\n}\n\nmyForEach(colors, function() {alert(\"Hi\")});\nmyForEach(colors, function(color) {console.log(color)});\n//red\n//orange\n//yellowArray.prototype.myForEach = function (func) {\n for(let i = 0; i < this.length; i++) {\n func(this[i]);\n }\n};\n\n\nlet friends = [\"charlie\", \"dave\", \"maddy\", \"caitlin\"];\n\nfriends.myForEach(function (name) {\n console.log(\"I love \" + name);\n});\n//I love charlie\n//I love dave\n//I love maddy\n//I love caitlin