Viewing: developer.mozilla.org

(Lexical scoping)

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

init() name displayName() . displayName() init() init() . displayName() . , , displayName() init() name .

JSFiddle displayName() console.log() name .

' ' . '', , '' . .

, " " , .

`let` `const`

(ES6 ) JavaScript . var . , .

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

C Java , console.log x . , var , var . .

ES6, JavaScript let const .

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

, ES6 , let const . , ES6 . , .

(Closure)

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

const myFunc = makeFunc();
myFunc();

init() . ( ) displayName() .

, . , . makeFunc() , name , JavaScript .

JavaScript . . . , myFunc makeFunc displayName . displayName name . , myFunc 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

, x makeAdder(x) . y x y .

, makeAdder . makeAdder . , 5 10 .

add5 add10 . () . add5 , x 5 , add10 x 10.

( ) . ( ) .

, .

. JavaScript . ( ) . ( ) .

, . 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 function () {
    document.body.style.fontSize = `${size}px`;
  };
}

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

size12, size14, size16 body 12, 14, 16 . ( ) .

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

html

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

JSFiddle .

(private method)

. .

classes 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.

, , counter.increment, counter.decrement, counter.value .

. (IIFE ). . privateCounter , changeBy . . .

. JavaScript , privateCounter changeBy .

const makeCounter = function () {
  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.

. privateCounter . , . .

: .

() :

(Local Scope, Own scope)
(, )
(Global Scope)

, . , . .

//   (global scope)
const e = 10;
function sum(a) {
  return function (b) {
    return function (c) {
      //    (outer functions scope)
      return function (d) {
        //   (local scope)
        return a + b + c + d + e;
      };
    };
  };
}

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

//   (global scope)
const e = 10;
function sum(a) {
  return function sum2(b) {
    return function sum3(c) {
      //    (outer functions scope)
      return function sum4(d) {
        //   (local scope)
        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 getter-setter . x , .

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

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

, "live bindings" .

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

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

export const getX = () => x;
//  live binding .

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">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email" /></p>
<p>Name: <input type="text" id="name" name="name" /></p>
<p>Age: <input type="text" id="age" name="age" /></p>

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

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

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

setupHelp();

JSFiddle .

helpText , ID . ID onfocus .

. .

onfocus . setupHelp . , (item) . item var (hoisting) . item.help onfocus . , item ( ) helpText .

. .

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

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

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

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

setupHelp();

JSFiddle .

. , makeHelpCallback " " . , help helpText .

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

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

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

setupHelp();

, let const .

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

function setupHelp() {
  const helpText = [
    { id: "email", help: "Your email address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

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

setupHelp();

var const .

forEach() helpText <input> .

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

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

  helpText.forEach(function (text) {
    document.getElementById(text.id).onfocus = function () {
      showHelp(text.help);
    };
  });
}

setupHelp();

, . , .

, / , . (, ).

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;
};

, . .

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025 7 24 by MDN contributors.

View this page on GitHub Report a problem with this content

In this article

(Lexical scoping)

let const

(Closure)

(private method)

:

Help improve MDN

`let` `const`