Viewing: developer.mozilla.org

function init() {
  var name = "Mozilla"; // name init 
  function displayName() {
    // displayName() 
    console.log(name); // 
  }
  displayName();
}
init();

init() name displayName() displayName() init() displayName() displayName() init() name displayName()

displayName() console.log() name

let const

ES6 JavaScript 2 var

if (Math.random() > 0.5) {
  var x = 1;
} else {
  var x = 2;
}
console.log(x);

C Javaconsole.log x var var

ES6 JavaScript let const

if (Math.random() > 0.5) {
  const x = 1;
} else {
  const x = 2;
}
console.log(x); // ReferenceError: x is not defined

ES6 let const ES6

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

init() displayName()

makeFunc() name JavaScript

JavaScript 2 myFunc makeFunc displayName displayName name makeFunc name "Mozilla" console.log

makeAdder

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

1 x makeAdder(x) 1 y x y

makeAdder 2 1 5 1 10

add5 add10 add5 x 5 add10 x 10

JavaScript click keypress

1 body font-size () em

css

body {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

body font-size

JavaScript :

function makeSizer(size) {
  return () => {
    document.body.style.fontSize = `${size}px`;
  };
}

const size12 = makeSizer(12);
const size14 = makeSizer(14);
const size16 = makeSizer(16);

size12size14size16 body 121416 px ()

document.getElementById("size-12").onclick = size12;
document.getElementById("size-14").onclick = size14;
document.getElementById("size-16").onclick = size16;

html

<button id="size-12">12</button>
<button id="size-14">14</button>
<button id="size-16">16</button>
<p></p>

Java

JavaScript

const counter = (function () {
  let privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment() {
      changeBy(1);
    },

    decrement() {
      changeBy(-1);
    },

    value() {
      return privateCounter;
    },
  };
})();

console.log(counter.value()); // 0.

counter.increment();
counter.increment();
console.log(counter.value()); // 2.

counter.decrement();
console.log(counter.value()); // 1.

1 counter.increment, counter.decrement, counter.value 3

IIFE privateCounter changeBy 2 3

3 JavaScript privateCounter changeBy

function makeCounter() {
  let privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment() {
      changeBy(1);
    },

    decrement() {
      changeBy(-1);
    },

    value() {
      return privateCounter;
    },
  };
}

const counter1 = makeCounter();
const counter2 = makeCounter();

console.log(counter1.value()); // 0.

counter1.increment();
counter1.increment();
console.log(counter1.value()); // 2.

counter1.decrement();
console.log(counter1.value()); // 1.
console.log(counter2.value()); // 0.

2 privateCounter

// 
const e = 10;
function sum(a) {
  return function (b) {
    return function (c) {
      // 
      return function (d) {
        // 
        return a + b + c + d + e;
      };
    };
  };
}

console.log(sum(1)(2)(3)(4)); // 20

// 
const e = 10;
function sum(a) {
  return function sum2(b) {
    return function sum3(c) {
      // 
      return function sum4(d) {
        // 
        return a + b + c + d + e;
      };
    };
  };
}

const sum2 = sum(1);
const sum3 = sum2(2);
const sum4 = sum3(3);
const result = sum4(4);
console.log(result); // 20

y

function outer() {
  let getY;
  {
    const y = 6;
    getY = () => y;
  }
  console.log(typeof y); // undefined
  console.log(getY()); // 6
}

outer();

// myModule.js
let x = 5;
export const getX = () => x;
export const setX = (val) => {
  x = val;
};

x x

import { getX, setX } from "./myModule.js";

console.log(getX()); // 5
setX(6);
console.log(getX()); // 6

// myModule.js
export let x = 1;
export const setX = (val) => {
  x = val;
};

// closureCreator.js
import { x } from "./myModule.js";

export const getX = () => x; //

import { getX } from "./closureCreator.js";
import { setX } from "./myModule.js";

console.log(getX()); // 1
setX(2);
console.log(getX()); // 2

:

let

html

<p id="help"></p>
<p>E : <input type="text" id="email" name="email" /></p>
<p>: <input type="text" id="name" name="name" /></p>
<p>: <input type="text" id="age" name="age" /></p>

function showHelp(help) {
  document.getElementById("help").textContent = help;
}

function setupHelp() {
  var helpText = [
    { id: "email", help: " E " },
    { id: "name", help: "" },
    { id: "age", help: " (17 )" },
  ];

  for (var i = 0; i < helpText.length; i++) {
    //  `var` 
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function () {
      showHelp(item.help);
    };
  }
}

setupHelp();

helpText 3 ID onfocus

onfocus setupHelp 3 1 onfocus item3 helpText

<p id="help"></p>
<p>E : <input type="text" id="email" name="email" /></p>
<p>: <input type="text" id="name" name="name" /></p>
<p>: <input type="text" id="age" name="age" /></p>

function showHelp(help) {
  document.getElementById("help").textContent = help;
}

function makeHelpCallback(help) {
  return function () {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
    { id: "email", help: " E " },
    { id: "name", help: "" },
    { id: "age", help: " (17 )" },
  ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();

1 makeHelpCallback help helpText

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function setupHelp() {
  var helpText = [
    { id: "email", help: " E " },
    { id: "name", help: "" },
    { id: "age", help: " (17 )" },
  ];

  for (var i = 0; i < helpText.length; i++) {
    (function () {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = function () {
        showHelp(item.help);
      };
    })(); // item 
  }
}

setupHelp();

let const

function showHelp(help) {
  document.getElementById("help").textContent = help;
}

function setupHelp() {
  const helpText = [
    { id: "email", help: " E " },
    { id: "name", help: "" },
    { id: "age", help: " (17 )" },
  ];

  for (let i = 0; i < helpText.length; i++) {
    const item = helpText[i];
    document.getElementById(item.id).onfocus = () => {
      showHelp(item.help);
    };
  }
}

setupHelp();

var const

JavaScript for for...of item let const forEach()

for (const item of helpText) {
  document.getElementById(item.id).onfocus = () => {
    document.getElementById("help").textContent = item.help;
  };
}

helpText.forEach((item) => {
  document.getElementById(item.id).onfocus = () => {
    showHelp(item.help);
  };
});

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function () {
    return this.name;
  };

  this.getMessage = function () {
    return this.message;
  };
}

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName() {
    return this.name;
  },
  getMessage() {
    return this.message;
  },
};

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function () {
  return this.name;
};
MyObject.prototype.getMessage = function () {
  return this.message;
};

MDN

MDN 2026321

GitHub