RinatValiullov

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

RinatValiullov

HTML:

  <div class="wrapper">
    <div class="check icon"></div>
  </div>

CSS:

RinatValiullov

function checkNumbers(a, b, c) {
	if ( a > b ) {
	
		if ( a > c ) {
			console.log("maximum = " + a);
		} else {
			console.log("maximum = " + c);
		}

RinatValiullov

// Enclosing function (Внешняя (родительская) функция )
function numberGenerator() {
	var num; // локальная "свободная" переменная

	// Внутренняя (дочерняя) функция. Имеет доступ к переменной "num" благодаря замыканию
	function checkNumber(num) {
		num++; // Увеличиваем на единицу входящий параметр
		console.log(num); // Выводим в консоль
	}

RinatValiullov

var pow=  function (x, n){
  
  if( n !== 1 ) {
    return (x * pow(x, n-1));
  } else {
    return x;
  }
 

RinatValiullov

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

RinatValiullov

let step = (base, exponent) => {
	exponent = exponent || 2;
	
	/* Ternary operator(other way):
	 * (exponent == undefined) ? exponent = 2 : exponent;
	 */
    
 let res = 1;

RinatValiullov

let HEX_to_RGB = (hex) => {

	let r = hex.substr(0,2),
		g = hex.substr(2,2),
		b = hex.substr(4,2);
	
	return {
		r: parseInt(r, 16),
		g: parseInt(g, 16),
		b: parseInt(b, 16)

RinatValiullov

let addSpaces = (str) => {
	str = str.replace(/([A-Z])/g, ' $1');

	let removeInitBlank = () => {
  		return str.replace(/^\s/, '');
	}

	return removeInitBlank();
};

RinatValiullov

// #1 With spread operator (ES6 syntax). Verbose, but interesting
let list1 = function(...args) {
	let array = [];
	for(let i = 0, len = args.length; i < len; ++i) {
		array.push(args[i]);
	};
	return array;
};

// #1.1 Amazing arrow functions and spread syntax