├── .gitignore ├── LICENSE ├── README.md ├── assets └── css │ └── main.css ├── exercises ├── example │ ├── example.js │ └── example.spec.js ├── fizzbuzz │ ├── main.js │ └── main.spec.js └── todolist │ ├── InMemoryStore.js │ ├── LocaStorageStore.js │ ├── final-way.js │ ├── homework.md │ ├── index.html │ ├── main.css │ ├── main.js │ ├── simplified │ ├── index.html │ └── scripts.js │ └── utils.js ├── notes ├── Basics.md └── Errors.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | .DS_Store 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | package-lock.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | 24 | # nyc test coverage 25 | .nyc_output 26 | 27 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 28 | .grunt 29 | 30 | # Bower dependency directory (https://bower.io/) 31 | bower_components 32 | 33 | # node-waf configuration 34 | .lock-wscript 35 | 36 | # Compiled binary addons (https://nodejs.org/api/addons.html) 37 | build/Release 38 | 39 | # Dependency directories 40 | node_modules/ 41 | jspm_packages/ 42 | 43 | # Typescript v1 declaration files 44 | typings/ 45 | 46 | # Optional npm cache directory 47 | .npm 48 | 49 | # Optional eslint cache 50 | .eslintcache 51 | 52 | # Optional REPL history 53 | .node_repl_history 54 | 55 | # Output of 'npm pack' 56 | *.tgz 57 | 58 | # Yarn Integrity file 59 | .yarn-integrity 60 | 61 | # dotenv environment variables file 62 | .env 63 | 64 | # next.js build output 65 | .next 66 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ignacio Villanueva 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My JavaScript Path 2 | 3 | My JavaScript Path: everything I do while learning 4 | 5 | ## Exercises 6 | 7 | 1. [Todo List](/exercises/todolist/main.js) 8 | 1. [Fizzbuzz](/exercises/fizzbuzz/main.js) 9 | 10 | ## Katas 11 | 12 | 1. [Mastermind](https://github.com/IgnaciodeNuevo/kata-mastermind) 13 | 1. [Tamagotchi](https://github.com/IgnaciodeNuevo/kata-tamagochi) 14 | 1. 08/10/2018 - [Clock-in](https://github.com/IgnaciodeNuevo/kata-clock-in) 15 | 16 | ## Workshops 17 | 18 | 1 30/03/2019 - [AdaJS Barcelona TDD Workshop](https://github.com/IgnaciodeNuevo/AdaJS-TDD-Workshop) 19 | 20 | ## Notes 21 | 22 | 1. [JavaScript Common Errors](/notes/Errors.md) 23 | 1. [JavaScript Basics](/notes/Basics.md) 24 | -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | border: 0; 3 | margin: 0; 4 | padding: 1rem; 5 | } 6 | 7 | button { 8 | background-color: #0047bb; 9 | border-radius: 3px; 10 | border: 0; 11 | color: #fff; 12 | cursor: pointer; 13 | height: 42px; 14 | text-align: center; 15 | transition: background-color 0.2s ease, border 0.2s ease; 16 | } 17 | 18 | button:hover { 19 | background-color: #003488; 20 | } 21 | 22 | button:not(:last-of-type) { 23 | margin-right: 0.5rem; 24 | } 25 | 26 | button { 27 | font-size: 1.2rem; 28 | padding: 0.5rem; 29 | } 30 | 31 | input[type='text'] { 32 | border: 0; 33 | border-bottom: 2px solid #003488; 34 | font-size: 1.2rem; 35 | padding-top: 0.5rem; 36 | padding-bottom: 0.5rem; 37 | } 38 | 39 | label { 40 | display: block; 41 | font-size: 1.2rem; 42 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 43 | 'Open Sans', 'Helvetica Neue', sans-serif; 44 | margin-top: 0.5rem; 45 | } 46 | -------------------------------------------------------------------------------- /exercises/example/example.js: -------------------------------------------------------------------------------- 1 | // Create a program that tells you if a number is pair or even 2 | function isPair(number) { 3 | return number % 2 == 0; 4 | } 5 | 6 | // This line allows to export on node module and acts as guard for the browser 7 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { 8 | module.exports = isPair; 9 | } 10 | -------------------------------------------------------------------------------- /exercises/example/example.spec.js: -------------------------------------------------------------------------------- 1 | var isPair = require('./example'); 2 | 3 | describe('isPair', function() { 4 | it('Should return true for a pair number', function() { 5 | expect(isPair(2)).toBe(true); 6 | }); 7 | 8 | it('Should return false for an even number', function() { 9 | expect(isPair(1)).toBe(false); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /exercises/fizzbuzz/main.js: -------------------------------------------------------------------------------- 1 | function fizzBuzz(number) { 2 | if (number === 0) { 3 | return 'Fail!'; 4 | } 5 | 6 | if (number % 3 === 0 && number % 5 === 0) { 7 | return 'fizzbuzz'; 8 | } else if (number % 3 === 0) { 9 | return 'fizz'; 10 | } else if (number % 5 === 0) { 11 | return 'buzz'; 12 | } else { 13 | return 'Fail!'; 14 | } 15 | } 16 | 17 | // This line allows to export on node module and acts as guard for the browser 18 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { 19 | module.exports = fizzBuzz; 20 | } 21 | -------------------------------------------------------------------------------- /exercises/fizzbuzz/main.spec.js: -------------------------------------------------------------------------------- 1 | var fizzBuzz = require('./main'); 2 | 3 | describe('fizzBuzz', function() { 4 | it('Should return fizzbuzz string if divisible by 3 and by 5', function() { 5 | expect(fizzBuzz(15)).toBe('fizzbuzz'); 6 | }); 7 | 8 | it('Should return fizz string if divisible by 3', function() { 9 | expect(fizzBuzz(9)).toBe('fizz'); 10 | }); 11 | 12 | it('Should return buzz if divisible by 5', function() { 13 | expect(fizzBuzz(100000)).toBe('buzz'); 14 | }); 15 | 16 | it('Should return Fail! string if is not divisible by 3 or by 5', function() { 17 | expect(fizzBuzz(0)).toBe('Fail!'); 18 | }); 19 | 20 | it('Should return Fail! string if is not divisible by 3 or by 5', function() { 21 | expect(fizzBuzz(-0)).toBe('Fail!'); 22 | }); 23 | 24 | it('Should return Fail! string if is not divisible by 3 or by 5', function() { 25 | expect(fizzBuzz(-3)).toBe('fizz'); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /exercises/todolist/InMemoryStore.js: -------------------------------------------------------------------------------- 1 | //Module pattern or revealed module pattern 2 | const Api = (function() { 3 | let todos = []; 4 | const add = function(item) { 5 | item.id = guid(); 6 | todos.push(item); 7 | return Promise.resolve(todos); 8 | }; 9 | 10 | const get = function() { 11 | return Promise.resolve(todos); 12 | }; 13 | 14 | const getById = function(id) { 15 | let item; 16 | for (let i = 0; i < todos.length; i++) { 17 | if (todos[i].id == id) { 18 | item = todos[i]; 19 | } 20 | } 21 | return Promise.resolve(item); 22 | }; 23 | 24 | const update = function(item) { 25 | for (let i = 0; i < todos.length; i++) { 26 | if (todos[i].id == item.id) { 27 | todos[i] = item; 28 | } 29 | } 30 | return Promise.resolve(todos); 31 | }; 32 | 33 | const clear = function() { 34 | todos = []; 35 | 36 | return Promise.resolve(); 37 | }; 38 | 39 | return { 40 | addTodo: add, 41 | getTodos: get, 42 | clearTodos: clear, 43 | getTodoById: getById, 44 | updateTodo: update, 45 | }; 46 | })(); 47 | -------------------------------------------------------------------------------- /exercises/todolist/LocaStorageStore.js: -------------------------------------------------------------------------------- 1 | //Module pattern or revealed module pattern 2 | const Api = (function() { 3 | let todos = JSON.parse(localStorage.getItem('todoListDataBase')) || []; 4 | 5 | const add = function(item) { 6 | item.id = guid(); 7 | todos.push(item); 8 | 9 | localStorage.setItem('todoListDataBase', JSON.stringify(todos)); 10 | return Promise.resolve(todos); 11 | }; 12 | 13 | const get = function() { 14 | return Promise.resolve(todos); 15 | }; 16 | 17 | const getById = function(id) { 18 | let item; 19 | for (let i = 0; i < todos.length; i++) { 20 | if (todos[i].id == id) { 21 | item = todos[i]; 22 | } 23 | } 24 | return Promise.resolve(item); 25 | }; 26 | 27 | const update = function(item) { 28 | for (let i = 0; i < todos.length; i++) { 29 | if (todos[i].id == item.id) { 30 | todos[i] = item; 31 | } 32 | } 33 | 34 | localStorage.setItem('todoListDataBase', JSON.stringify(todos)); 35 | return Promise.resolve(todos); 36 | }; 37 | 38 | const clear = function() { 39 | todos = []; 40 | 41 | localStorage.setItem('todoListDataBase', JSON.stringify(todos)); 42 | return Promise.resolve(); 43 | }; 44 | 45 | return { 46 | addTodo: add, 47 | getTodos: get, 48 | clearTodos: clear, 49 | getTodoById: getById, 50 | updateTodo: update, 51 | }; 52 | })(); 53 | -------------------------------------------------------------------------------- /exercises/todolist/final-way.js: -------------------------------------------------------------------------------- 1 | const todoList = document.getElementById('todo-list'); 2 | const clearButton = document.querySelector('.js-clear-storage'); 3 | const form = document.querySelector('form'); 4 | 5 | const api = new Api(); 6 | 7 | const components = [ 8 | //funciones constructoras 9 | new AddToDoListCompenent(api), 10 | new ToDoListCompenent(api), 11 | new ClearCompenent(api) 12 | ]; 13 | 14 | components.forEach(function (component) { 15 | component.init(); 16 | }) 17 | 18 | // Función constructora 19 | var API = function () { 20 | // Al asignar that al this dentro de la Función 21 | // tenemos acceso, en este caso a los métodos que exponemos 22 | var that = this; 23 | var todos = []; 24 | 25 | that.add = function (item) { 26 | todos.push(item); 27 | }; 28 | } 29 | 30 | var myTodos1 = new API(); 31 | myTodos1.add('ignacio'); 32 | 33 | var myTodos2 = new API(); 34 | myTodos2.add('alfredo'); 35 | -------------------------------------------------------------------------------- /exercises/todolist/homework.md: -------------------------------------------------------------------------------- 1 | # Ejercicios 2 | 3 | ## Ejercicio 1 4 | ``` 5 | 9 | 10 | 20 | ``` 21 | 22 | 23 | 24 | ## Ejercicio 2 25 | cambiar la declaracion de funciones en vez de: 26 | * function drawTodos(todos) {} 27 | * usar: 28 | * const drawTodos = function(todos).... 29 | 30 | 31 | 32 | ## Ejercicio 3 33 | Agregar un boton de añadir 34 | 35 | 36 | 37 | ## Ejercicio 4 38 | En la funcion draw hay dos fors 39 | * sustituir el primero por map 40 | * sustituir el segundo por forEach 41 | 42 | 43 | 44 | ## Ejercicio 5 45 | main.js tiene que tener el minimo de codigo posible 46 | Tiene que: 47 | * inicializar el api 48 | * inicializar componente añadir item 49 | * inicializar componente clear 50 | * inicializar componente listado de items 51 | 52 | 53 | 54 | ## Ejercicio Opcional 55 | hacer que inmemory grabe en el localstorage 56 | 57 | * sin tener ninguna al referencia al local storage 58 | * main.js tampoco tenga una referencia al localstorage 59 | -------------------------------------------------------------------------------- /exercises/todolist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Todo List 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | Todo List: 19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /exercises/todolist/main.css: -------------------------------------------------------------------------------- 1 | legend { 2 | color: #003488; 3 | display: block; 4 | font-size: 1.2rem; 5 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 6 | 'Open Sans', 'Helvetica Neue', sans-serif; 7 | font-weight: 700; 8 | margin-top: 2rem; 9 | text-transform: uppercase; 10 | } 11 | 12 | button, 13 | input { 14 | margin-right: 0.5rem; 15 | } 16 | 17 | fieldset { 18 | border: 0; 19 | margin-top: 0.5rem; 20 | padding: 0; 21 | } 22 | -------------------------------------------------------------------------------- /exercises/todolist/main.js: -------------------------------------------------------------------------------- 1 | const todoList = document.getElementById('todo-list'); 2 | const clearButton = document.querySelector('.js-clear-storage'); 3 | const form = document.querySelector('form'); 4 | 5 | const api = Api; 6 | 7 | init(); 8 | 9 | function init() { 10 | api.getTodos().then(function(todos) { 11 | drawTodos(todos); 12 | }); 13 | } 14 | 15 | function drawTodos(todos) { 16 | let content = ''; 17 | for (let i = 0; i < todos.length; i++) { 18 | content += ` 19 | `; 23 | } 24 | 25 | todoList.innerHTML = content; 26 | 27 | for (let i = 0; i < todos.length; i++) { 28 | document 29 | .querySelector(`[data-guid="${todos[i].id}"]`) 30 | .addEventListener('change', function () { 31 | console.log('oatata'); 32 | toggleTodo(todos[i].id); 33 | }); 34 | } 35 | } 36 | 37 | function clearInput() { 38 | document.getElementById('target').value = ''; 39 | } 40 | 41 | function updateTodo(item) { 42 | api.updateTodo(item).then(todos => { 43 | drawTodos(todos); 44 | clearInput(); 45 | }); 46 | } 47 | 48 | function toggleTodo(id) { 49 | api.getTodoById(id).then(item => { 50 | item.checked = !item.checked; 51 | api.updateTodo(item).then(todos => { 52 | drawTodos(todos); 53 | }); 54 | }); 55 | } 56 | 57 | clearButton.addEventListener('click', function() { 58 | api.clearTodos(); 59 | init(); 60 | }); 61 | 62 | form.addEventListener('submit', function(e) { 63 | e.preventDefault(); 64 | const value = document.getElementById('target').value; 65 | if (value === '') { 66 | return; 67 | } 68 | 69 | api.addTodo({ checked: false, value: value }).then(todos => { 70 | drawTodos(todos); 71 | clearInput(); 72 | }); 73 | }); 74 | -------------------------------------------------------------------------------- /exercises/todolist/simplified/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Todo List 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |

Items

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /exercises/todolist/simplified/scripts.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | const ul = document.querySelector('ul'); 3 | const button = document.querySelector('button'); 4 | const input = document.getElementById('item'); 5 | let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []; 6 | 7 | localStorage.setItem('items', JSON.stringify(itemsArray)); 8 | const data = JSON.parse(localStorage.getItem('items')); 9 | 10 | const liMaker = (text) => { 11 | const li = document.createElement('li'); 12 | li.textContent = text; 13 | ul.appendChild(li); 14 | } 15 | 16 | form.addEventListener('submit', function (e) { 17 | e.preventDefault(); 18 | 19 | itemsArray.push(input.value); 20 | localStorage.setItem('items', JSON.stringify(itemsArray)); 21 | liMaker(input.value); 22 | input.value = ""; 23 | }); 24 | 25 | data.forEach(item => { 26 | liMaker(item); 27 | }); 28 | 29 | button.addEventListener('click', function () { 30 | localStorage.clear(); 31 | while (ul.firstChild) { 32 | ul.removeChild(ul.firstChild); 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /exercises/todolist/utils.js: -------------------------------------------------------------------------------- 1 | function guid() { 2 | function s4() { 3 | const max_int = 65536; 4 | return Math.floor((1 + Math.random()) * max_int) 5 | .toString(16) 6 | .substring(1); 7 | } 8 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); 9 | } 10 | -------------------------------------------------------------------------------- /notes/Basics.md: -------------------------------------------------------------------------------- 1 | # JavaScript Basics 2 | 3 | ## LocalStorage 4 | 5 | localStorage is a key: value pair 6 | 7 | | Method | Description | 8 | | ------------- |:----------------------------------:| 9 | | setItem() | Add key and value to local storage | 10 | | getItem() | Retrieve a value by the key | 11 | | removeItem() | Remove an item by key | 12 | | clear() | Clear all storage | 13 | 14 | ### Usage 15 | 16 | **setItem()** 17 | 18 | `localStorage.setItem('key', 'value');` 19 | 20 | **getItem()** 21 | 22 | `localStorage.getItem('key');` 23 | 24 | **removeItem()** 25 | 26 | `localStorage.removeItem('key');` 27 | 28 | **clear()** 29 | 30 | `localStorage.clear();` 31 | 32 | ## JavaScript Methods 33 | 34 | ### [.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) 35 | 36 | `JSON.parse()`: parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned. 37 | 38 | ``` 39 | var json = '{"result":true, "count":42}'; 40 | obj = JSON.parse(json); 41 | 42 | console.log(obj.count); 43 | // expected output: 42 44 | 45 | console.log(obj.result); 46 | // expected output: true 47 | ``` 48 | 49 | ### [.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) 50 | 51 | `variable.slice(beginIndex, endIndex)`: extracts a section of a string and returns it as a new string, without modifying the original string. The first number (`beginIndex`) in parentheses is the nombre of the character that begins the slice, and the second number (`endIndex`) is the number of the character after the last character in the slice. 52 | 53 | ``` 54 | var name = 'Carlos y Juan son amigos'; 55 | var nameResult = name.slice(0, 13); 56 | 57 | console.log(nameResult); 58 | // expected output: Carlos y Juan 59 | ``` 60 | 61 | ### [.toUpperCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) 62 | 63 | - Used in: *string*. 64 | 65 | `variable.toUpperCase()`: returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one). 66 | 67 | ``` 68 | var name = 'patata'; 69 | var name = name.toUpperCase; 70 | 71 | console.log(name); 72 | // expected output: PATATA 73 | ``` 74 | 75 | ### [.toLowerCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) 76 | 77 | Used in: *string*. 78 | 79 | `variable.toLowerCase()`: returns the calling string value converted to lower case. 80 | 81 | ``` 82 | var name = 'PATATA'; 83 | var name = name.toUpperCase; 84 | 85 | console.log(name); 86 | // expected output: patata 87 | ``` 88 | 89 | ### [.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 90 | 91 | - Used in: *array*. 92 | - Modifies the array: *yes* 93 | 94 | `array.push(item)`: adds one or more elements to the end of an array and returns the new length of the array. 95 | 96 | ``` 97 | var animals = ['pigs', 'goats', 'sheep']; 98 | var item = 'cow'; 99 | animals.push(item); 100 | 101 | // expected output: [ "pigs", "goats", "sheep", "cow" ] 102 | ``` 103 | 104 | ### [.unshift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) 105 | 106 | - Used in: *array*. 107 | - Modifies the array: *yes* 108 | 109 | `array.push(item)`: adds one or more elements to the beginning of an array and returns the new length of the array. 110 | 111 | ``` 112 | var array1 = [1, 2, 3]; 113 | var array2 = 0; 114 | array1.unshift(array2); 115 | 116 | // expected output: Array [0, 1, 2, 3] 117 | ``` 118 | 119 | ### [.pop()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) 120 | 121 | - Used in: *array*. 122 | - Modifies the array: *yes* 123 | 124 | `array.pop(item)`: removes the last element from an array and returns that element. This method changes the length of the array. 125 | 126 | ``` 127 | var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 128 | 129 | console.log(plants.pop()); 130 | // expected output: "tomato" 131 | ``` 132 | 133 | 134 | ### [.shift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) 135 | 136 | - Used in: *array*. 137 | - Modifies the array: *yes* 138 | 139 | `array.shift(item)`: removes the first element from an array and returns that removed element. This method changes the length of the array. 140 | 141 | ``` 142 | var array1 = [1, 2, 3]; 143 | var firstElement = array1.shift(); 144 | 145 | console.log(array1); 146 | // expected output: Array [2, 3] 147 | ``` 148 | 149 | 150 | 151 | ### [.concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) 152 | 153 | - Used in: *array*. 154 | - Modifies the array: *no* 155 | 156 | `array.concat(otherArray)`: is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. 157 | 158 | ``` 159 | var array1 = ['a', 'b', 'c']; 160 | var array2 = ['d', 'e', 'f']; 161 | 162 | console.log(array1.concat(array2)); 163 | // expected output: Array ["a", "b", "c", "d", "e", "f"] 164 | ``` 165 | 166 | 167 | ### [.indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) 168 | 169 | - Used in: *string or array*. 170 | 171 | `array.indexOf(otherArray)`: is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. 172 | 173 | ``` 174 | var paragraph = ['red', 'pink', 'orange']; 175 | var res = paragraph.indexOf('pink'); 176 | 177 | // expected output: 1 178 | ``` 179 | 180 | 181 | 182 | ### [.join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 183 | 184 | - Used in: *array*. 185 | 186 | `array.join()`: 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. 187 | 188 | ``` 189 | var paragraph = ['red', 'pink', 'orange']; 190 | var res = paragraph.join(); 191 | console.log(res); 192 | 193 | // expected output: 'red, pink, orange'; 194 | 195 | var paragraph = ['red', 'pink', 'orange']; 196 | var res = paragraph.join('-'); 197 | console.log(res); 198 | 199 | // expected output: 'red-pink-orange'; 200 | ``` 201 | 202 | ## How to organize your JavaScript Classes 203 | 204 | - Business logic: where you calculate based on the data you have 205 | - Persistence: where you store the data you have 206 | - UI: where you get or paint data in the interface 207 | 208 | 209 | ## Falsy values 210 | 211 | - false 212 | - null 213 | - undefined 214 | - NaN 215 | - number 0 216 | - empty string "" 217 | 218 | 219 | ## null vs undefined 220 | 221 | - null: value of nothing 222 | - undefined: absence of value 223 | 224 | ## Async Cheatsheet 225 | 226 | - [Async Cheatsheet](https://raw.githubusercontent.com/frontarm/async-javascript-cheatsheet/master/async-cheatsheet.png) 227 | -------------------------------------------------------------------------------- /notes/Errors.md: -------------------------------------------------------------------------------- 1 | # Common JavaScript Errors 2 | 3 | ## Via [Ana Tudor](https://twitter.com/anatudor/status/965838510765862913) 4 | 5 | * Don't add/ remove elements directly to a wrapper within a loop! Use [documentFragment](https://developer.mozilla.org/en-US/docs/Web/API) instead. 6 | 7 | ![Don't do this](https://pbs.twimg.com/media/DWdY4PYXUAAhvaa.jpg) 8 | ![Do this instead](https://pbs.twimg.com/media/DWdY58hX4AAU0WI.jpg) 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-path", 3 | "version": "1.0.0", 4 | "description": "JavaScript Path: exercises, notes and tests.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jasmine-node exercises/" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/IgnaciodeNuevo/js-path.git" 12 | }, 13 | "author": "Ignacio Villanueva", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/IgnaciodeNuevo/js-path/issues" 17 | }, 18 | "homepage": "https://github.com/IgnaciodeNuevo/js-path#readme", 19 | "dependencies": { 20 | "jasmine": "^3.0.0", 21 | "jasmine-node": "^1.14.5" 22 | } 23 | } 24 | --------------------------------------------------------------------------------