Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                const MATH = {
};

console.log(MATH.PI);//undefined
// example
const MAX = 100;
if(MAX>=100){
	const MAX=1000;
   console.log(MAX);//1000 локальный вывод
}
console.log(MAX);//100 глобальный вывод

exemple
const x = 5; //x is not defined
const x = 15;
console.log(x);

exemple
let x = 5;
let x = 15;
console.log(x);//15

	// const всегда инициализирована и в данном случае ответ ошибка.
		// неправильно
	const MAX;
console.log(MAX);//Missing initializer in const declaration
// Отсутствует инициализатор в объявлении const


// правильно
	const MAX= 3;
	console.log(MAX);//3

	exemple
// MIN is not defined МИН не определен
	console.log(MIN);
	const MIN = 1;

	// exemple

	const X = 5;//константа не изменяетя
	X=10;
	console.log(X);//Assignment to constant variable.Присвоение постоянной переменной.

// example
let X = 5;
X=10;
console.log(X);//10
----------------------------------------------------------------------------------------
До введения стандарта ES6 основой всех областей видимости являлись функции. У любой функции существует своя область видимости. Проще всего это можно рассмотреть на примере:

let num = 10;
const func = function() {
  let num = 20;
  console.log(num);//20
};
console.log(num); // 10
func();
Объявленные с помощью ключевого слова const переменные внутри функции не влияют на переменные из других областей видимости, в том числе и глобальной. Именно на этом свойстве основана хорошая практика обворачивания всего кода в самовызывающуюся анонимную функцию (self-executing anonymous function):

(function() {
  'use strict';
  // Переменные a и b находятся в области видимости 
  // самовызывающейся анонимной функции и не доступны
  // на более высоких уровнях
  let a = 10;
  let b = 20;
  // Для вывода переменной в глобальную область видимости
  // используется подобная конструкция
  window.b = b;
})();

console.log(a); // undefined
console.log(b); // 20

Подобное решение позволяет полностью контролировать, какие переменные будут переданы в глобальное окружение. Тем не менее, данные правила работали исключительно с функциями, а на другие блочные конструкции не действовали:

for (let i = 0; i < 5; i++) {
  console.log('Что-то было сделано ' + i + ' раз'); // 0 1 2 3 4
}

console.log('Переменная i до сих пор доступна и равна ' + i); // 5
Пример с циклом for относительно безвреден и после последней итерации оставляет переменную i. Подобное использование циклов широко распространено и, скорее всего, не станет причиной ошибки. Неочевидные вещи начинают появляться при использовании других блочных конструкций:
let a = 11;
if (true) {
  let a = 10;
  console.log(a);//10
}

console.log(a); // 11
Очевидно, что после запуска данного кода будет создана переменная a, содержащая в себе число 11. Все становится не так очевидно, когда условие переданное в конструкцию if не является правдивым:

if (false) {
  let a = 10;
}

console.log(a); // ???
Какой результат можно ожидать? Код внутри конструкции if не запускался, а значит и перменная a не была инициализирована. Логично предположить, что единственным возможным результатом является ошибка (попытка обратиться к несуществующей переменной обычно выдает ReferenceError). Тем не менее, подобной ошибки не возникает, и в консоль выводится undefined. Такое поведение объясняется поднятием переменных (hoisting). Конструкция, указанная выше, интерпретируется следующим образом:

let a;
if (false) {
  a = 10;
}

console.log(a); // undefined

Оператор let
С релизом стандарта ES6 появилась возможность создавать переменные, приуроченные к отдельным блокам. Это означает, что для создания лексического окружения (scope) достаточно просто обвернуть код в фигурные скобки: { ... }:

let a = 10;

{
  let a = 20;
  console.log(a); // 20
}

console.log(a); // 10

Скорее всего, вы никогда не будете использовать конструкцию, показанную выше, но, тем не менее, она является абсолютно валидной и позволяет наглядно продемонстрировать создание нового лексического окружения.

Таким образом, при выполнении следующего кода переменная i не будет доступна вне цикла:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

console.log(i); // ReferenceError: i is not defined
Подобное поведение будет наблюдаться и в других блочных конструкциях:

if (true) {
  let num = 10;
  console.log(num); // 10
}

console.log(num); // ReferenceError: num is not defined

Hoisting
При использовании ключевого слова let происходит поднятие переменных (hoisting). Но сам процесс поднятия реализуется совершенно другим образом:

if (true) {
  console.log(b);
  let b = 10; // ReferenceError: b is not defined
}
Запустив подобный пример вы скорее всего можете прийти к выводу, что поднятия не происходит. Это не так. Для того, чтобы убедиться в наличии поднятия достаточно объявить еще одну переменную вне блока:

let b = 20;
if (true) {
  console.log(b);
  let b = 10; // ReferenceError: b is not defined
}

Несмотря на то, что переменная b была объявлена вне блока и, таким образом, должна быть доступна, результатом выполнения кода все равно является ReferenceError. Подобное поведение называется “временной мёртвой зоной”.

При запуске кода из блока происходит резервирование имён всех переменных объявленных в любом месте блока. Таким образом, несмотря на наличие внешней переменной, результатом выполнения кода будет ReferenceError. Чтобы избежать подобных ошибок, всегда объявляйте все используемые переменные в самом начале блока:

if (true) { 
  let num = 20;
  console.log(num); // 20
}

Временная мёртвая зона не распространяется на функции до первого их вызова:

const f = function() {
  return num;
};

let num = 10;
console.log(f()); // 10

Тем не менее, если вы попытаетесь вызвать функцию f до того, как будет объявлена переменная num, то всё равно получите ошибку:

const f = function() {
  return num;
};

console.log(f()); // ReferenceError: num is not defined
let num = 10;
Оператор const
Оператор const, как и let, работает с блочными областями видимости (также подвергается правилам временной мёртвой зоны) и предназначен для создания констант - переменных, для которых доступно только чтение после их инициализации:

{
  const num = 10;
  console.log(num); // 10
  num = 20; // TypeError: 'num' is read-only
}

Новое присваивание значения переменной num выведет ошибку. Таким образом, значение, записанное в переменную при её инициализации, невозможно изменить с помощью присваивания. Создание новых переменных с таким же именем также выведет ошибку:

const a = 20;
let a = 10; // TypeError: 'a' is read-only

Заново инициализировать переменную с помощью оператора const тоже не получится:

let a = 10;
const a = 10; // TypeError: Identifier 'a' has already been declared

Константы непостоянны
На первый взгяд, может показаться, что всё, что было записано в константу невозможно изменить. Но, на самом деле, нельзя менять только литерал или ссылку:

const lit = 4;
lit = 5; // TypeError: Литерал изменить нельзя

const obj = { a: 1 };
obj.a = 2; // Значения внутри объекта изменить можно
console.log(obj); // { a: 2 }
obj = { a: 3 }; // TypeError: Ссылку менять нельзя

const arr = [1, 2, 3];
arr.push(4); // Значения внутри массива изменить можно
console.log(arr); // [1, 2, 3, 4]
obj = [4, 3, 2, 1]; // TypeError: Ссылку менять нельзя
---------------------------------------------------------------
  // <button>text1</button>
//     <button>text2</button>
//     <button>text3</button>
//     <button>text4</button>
//     <button>text5</button> -->
//     <script>

//     когда мы пишем let i мы создаем глобальную переменную, которая будет видна всем функциям
// // которые мы присваиваем в качестве функций кнопкам обратного вызова
// let i; i является одной общей переменной для всех функций,чтобы исправить
// ситуацию нам нужно сделать так чтобы на каждый цикл создавалась своя
// переменная,тогда каждая функция получит свою i и в этом нам поможет const
//      const buttons = document.querySelectorAll('button');


// for (var i = 0; i < buttons.length; i++) {
//     let button = buttons[i];
//     button.innerText = i;
//     button.onclick = function(e) {
//        console.log(i); 
//     };
// }

// заменим на const и каждая кнопка при вызове будет иметь свой номер i
// const buttons = document.querySelectorAll('button');

// for (let i = 0; i < buttons.length; i++) {
//     let button = buttons[i];
//     button.innerText = i;
//     button.onclick = function(e) {
//        console.log(i); 
//     };
// }

// пример
//     function foo(){
//     let x=5;
//     if(x){
//         let x=10;
//         // console.log(x);10
        
//     }
//     console.log(x);//5
// }
// foo();
// пример

// let id = 12;
// {
//     let id = 2000;
// }
// console.log(id);//12

// пример
function bar(){
// повторное использование той же переменной,которая была объявлена с помощью ключевого слова let
// той же функции или области блока,вызывает синт.ошибку
    let x= 100;
    let x =10;
    console.log(x);
}//Uncaught SyntaxError: Identifier 'x' has already been declared

bar();

	// переменная равная значению undefined
		// означает,что она объявлена, но еще не инициализирована
	let p;
	console.log(p);//undefined

// пример
// переменная с именем id была объявлена в локальной области,а вызов
//  в глобальной области,что вызывает ошибку с использованием let

// {
// 	let id=40;
// }
// console.log(id);
// // пример

// function foo(x){
// 	let x=100;//100
// 	let x=100;//ошибка

// 	console.log(x);

// }
// foo(6);//ошибка

// пример
// по скольку ключивое слово let в локальной области не использовалось
// оператор внутри функции обдейт изменит значение id глобальной переменной

// function uppDate(){
// 	 id=3;
// }
// let id=null;
// uppDate();
// console.log(id);//3

// function uppDate(){
// 	 let id=3;
// }
// let id=null;
// uppDate();
// console.log(id);//null

// пример
// let id = 42;
// for(let id=0; id<10; id++){
// console.log(id);//9
	
// }
// console.log(id);//42

// // приммер
// function get(x){
//  switch(true){
//  	case x<10:
//  	let d=5;
//  	return d;
//  	case x>=10:
//  	let d=20;
//  	return d;

//  }

// }
// console.log(get(15));//ошибка объявлены две переменные d в локальной области

// // ошибки не будет,так как объявлено две области видимости
// function get(x){
//  switch(true){
//  	case x<10:{ 
//  	let d=5;
//  	return d;
//  	}

//  	case x>=10:{
//     let d=20;
//  	return d;
// }
//  }

// }
// console.log(get(15));//20 

// пример
for(let i=0; i<10;i++){
	setTimeOut(function(){
		console.log(i);
	},100*i);//0-9
};













              
            
!
999px

Console