dia_de_muertos_2023.js

/**
  These deprecated features can still be used, but should be used with caution because 
  they are not required to be implemented by every JavaScript engine. 
  You should work to remove their use from your code.
*/

// DEPRECATED -> STILL AVAILABLE BUT PLANNED FOR REMOVAL

// ==============================================================================
//* 1. HTML comments:
// line comments
const a = 3; <!-- comment (can be placed anywhere)

function myFn(a, b) {
  --> also a comment! (must be at the start of a line)
  console.log('do something...');
}

// ==============================================================================

//* 2. The `arguments` property on functions
function myFunction(a, b) {
  console.log(myFunction.arguments);
}

myFunction(1, 2);
// Expected output:
/*
{
  '0': 1,
  '1': 2,
  length: 2,
  callee: ƒ myFunction(),
  __proto__: {
    constructor: ƒ Object(),
    __defineGetter__: ƒ __defineGetter__(),
    __defineSetter__: ƒ __defineSetter__(),
    hasOwnProperty: ƒ hasOwnProperty(),
    __lookupGetter__: ƒ __lookupGetter__(),
    __lookupSetter__: ƒ __lookupSetter__(),
    isPrototypeOf: ƒ isPrototypeOf(),
    propertyIsEnumerable: ƒ propertyIsEnumerable(),
    toString: ƒ toString(),
    valueOf: ƒ valueOf(),
    toLocaleString: ƒ toLocaleString()
  }
}
*/

// alternative: the `arguments` object
/*
  arguments is an array-like object, 
  which means that arguments has a length property and properties indexed from zero, 
  but it doesn't have Array's built-in methods like forEach() or map(). 
  However, it can be converted to a real Array, using one of slice(), Array.from(), or spread syntax.
*/
function func1(a, b, c) {
  console.log(arguments[0]);
  // Expected output: 1

  console.log(arguments[1]);
  // Expected output: 2

  console.log(arguments[2]);
  // Expected output: 3
}

func1(1, 2, 3);

// We use Rest Parameters these days
// see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));

// Expected output: 10

// ==============================================================================

//* 3. Object.prototype.__proto__, an unreliable way to set an object's prototype

// see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

function Circle() {}
const shape = {};
const circle = new Circle();

// Set the object prototype.
// DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code.
shape.__proto__ = circle;

// Get the object prototype
console.log(shape.__proto__ === Circle); // false

// ... always prefer Object.getPrototypeOf() and Object.setPrototypeOf() 
// for setting and getting the [[Prototype]] of an object.
const obj = {};
const parent = { foo: 'bar' };

console.log(obj.foo);
// Expected output: undefined

Object.setPrototypeOf(obj, parent);

console.log(obj.foo);
// Expected output: "bar"

// ==============================================================================

//* 4. String.prototype.substr
/*
String.prototype.substr probably won't be removed anytime soon, 
but it's defined in Annex B and hence normative optional. 
(Annex B: Additional ECMAScript Features for Web Browsers)
*/

/* 
  substr(start) // optional length
  substr(start, length) 
*/
const str = 'Mozilla';

console.log(str.substr(1, 2));
// Expected output: "oz"

console.log(str.substr(2));
// Expected output: "zilla"

// alternative a:

/*
substring(indexStart)
substring(indexStart, indexEnd)
*/

const str = 'Mozilla';

console.log(str.substring(1, 3));
// Expected output: "oz"

console.log(str.substring(2));
// Expected output: "zilla"


// alternative b:

/*
slice(indexStart)
slice(indexStart, indexEnd)
*/

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// Expected output: "the lazy dog."

console.log(str.slice(4, 19));
// Expected output: "quick brown fox"

console.log(str.slice(-4));
// Expected output: "dog."

console.log(str.slice(-9, -5));
// Expected output: "lazy"


// ==============================================================================

//* 5. getYear() and setYear()

// Years between 1900 and 1999 -> between 0 and 99
const xmas = new Date('1995-12-25');
const year = xmas.getYear(); // returns 95
const modern_year = xmas.getFullYear(); // 1995

// Years above 1999 -> 100 or greater
const xmas2 = new Date('2000-12-25');
const year2 = xmas.getYear(); // returns 100
const modern_year2 = xmas2.getFullYear(); // 2000

// Years below 1900 -> less than 0
const xmas3 = new Date('1800-12-25');
const year3 = xmas.getYear(); // returns -100
const modern_year3 = xmas3.getFullYear(); // 1800

console.log({ modern_year, modern_year2, modern_year3 });

const theBigDay = new Date();
console.log(theBigDay);

// between 0 and 99 -> 1900 + yearValue
theBigDay.setYear(22); // 1922
theBigDay.setYear(00); // 1900
// otherwise -> yearValue
theBigDay.setYear(500); // 0500

// ALWAYS yearValue
theBigDay.setFullYear(22) // 0022
theBigDay.setFullYear(00) // 0000
theBigDay.setFullYear(500) // 0500

// ==============================================================================

// OBSOLETE -> NO LONGER USABLE

//* 1. __count__ 
/* The __count__ property used to store the count of enumerable properties 
on the object, but it has been removed.
*/
const myObj = {
  a: 1,
  b: 2
}
console.log(myObj.__count__) // undefined

// alternative: 
console.log(Object.keys(myObj).length) // 2

// ==============================================================================

//* 2. Object.observe()

// from: https://web.dev/articles/es7-observe
// Last updated 2014-05-20 UTC.

// Let's say we have a model with data
var model = {};

// Which we then observe
Object.observe(model, function(changes){

    // This asynchronous callback runs
    changes.forEach(function(change) {

        // Letting us know what changed
        console.log(change.type, change.name, change.oldValue);
    });

});

model.bestie = 'Arturo'
// logs "add bestie undefined"
// then "Arturo"
model.bestie = 'Axel'
// logs "update bestie Arturo"
// then "Axel"

// alternative: Proxy
// see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

/* 
  allows you to create an object that can be used in place of the original object, 
  but which may redefine fundamental Object operations like getting, setting, and defining properties.
  Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.
*/ 
const target = {
  message1: "hello",
  message2: "everyone",
};

// target: the original object which you want to proxy

const handler = {
  get(target, prop, receiver) {
    return "world";
  },
};

// handler: an object that defines which operations will be 
// intercepted and how to redefine intercepted operations.


const proxy2 = new Proxy(target, handler);
console.log(proxy2.message1); // world
console.log(proxy2.message2); // world


// ==============================================================================


//* 3. String.prototype.quote()
// see: https://cgi.cse.unsw.edu.au/~cs2041/doc/MDN_javascript_reference/Web/JavaScript/Reference/Global_Objects/String/quote.html
/*
...returns a copy of the string, replacing various special characters in the string 
with their escape sequences and wrapping the result in double-quotes (").
*/
const myStr = `Hello

    world!`;

console.log(myStr.quote()); // "Hello\n\tworld!"

// TODAY: 
// VM43:5 Uncaught TypeError: myStr.quote is not a function
//    at <anonymous>:5:19

// no alternatives

// ==============================================================================

//* 4. "static" Array methods: 
/* introduced in Firefox 1.5 (JavaScript 1.6, released Nov 29, 2005), 
 deprecated in Firefox 68 (released Jul 9, 2019), 
 and removed in Firefox 71 (December 3, 2019)
 */

Array.slice(myArr, 0, 12)
Array.forEach(myArr, myFn)

// alternative: 
//You can use methods on Array.prototype together with Function.call instead.


// ==============================================================================

// bonus: https://esdiscuss.org/
// This site is an archive of the esdiscuss mailing list on which JavaScript 
// syntax and features were discussed. It is no longer active, but you may still 
// find these archived discussions interesting. Discussion has now moved to Discourse.


// menciones especiales:

// sharp variables ft. toSource():
var myArray = [1, 2, 3];
myArray.push(myArray);
myArray.toSource();

//Assign a literal recursive data structure
var anotherArray = #1=[1, 2, 3, #1#];

console.log(anotherArray.toSource());
//"#1=[1, 2, 3, #1#]"

console.log(anotherArray[0]);
//1

console.log(anotherArray[3].toSource());
//"#1=[1, 2, 3, #1#]"