Последнее обновление: 05.04.2018
Для хранения данных в программе используются переменные . Переменные предназначены для хранения каких-нибудь временных данных или таких данных, которые в процессе работы могут менять свое значение. Для создания переменных применяются ключевые слова var и let . Например, объявим переменную myIncome:
Var myIncome; // другой вариант let myIncome2;
Каждая переменная имеет имя. Имя представляет собой произвольный набор алфавитно-цифровых символов, знака подчеркивания (_) или знака доллара ($), причем названия не должны начинаться с цифровых символов. То есть мы можем использовать в названии буквы, цифры, подчеркивание. Однако все остальные символы запрещены.
Например, правильные названия переменных:
$commision someVariable product_Store income2 myIncome_from_deposit
Следующие названия являются некорректными и не могут использоваться:
222lol @someVariable my%percent
Также нельзя давать переменным такие имена, которые совпадают с зарезервированными ключевыми словами. В JavaScript не так много ключевых слов, поэтому данное правило не сложно соблюдать. Например, следующее название будет некорректным, так как for - ключевое слово в JavaScript:
Var for;
Список зарезервированных слов в JavaScript:
abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, inteface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, volatile, void, while, with
При названии переменных надо учитывать, что JavaScript является регистрозависимым языком, то есть в следующем коде объявлены две разные переменные:
Var myIncome; var MyIncome;
Через запятую можно определить сразу несколько переменных:
Var myIncome, procent, sum; let a, b, c;
С помощью знака равно (который еще называют оператором присваивания ) можно присвоить переменной какое-либо значение:
Var income = 300; let price = 76;
Процесс присвоения переменной начального значения называется инициализацией .
Теперь переменная income будет хранить число 300, а переменная price - число 76.
Отличительной чертой переменных является то, что мы можем изменить их значение:
Var income = 300; income = 400; console.log(income); let price = 76; price = 54; console.log(price);
Константы
С помощью ключевого слова const можно определить константу , которая, как и переменная, хранит значение, однако это значение не может быть изменено.
Const rate = 10;
Если мы попробуем изменить ее значение, то мы столкнемся с ошибкой:
Const rate = 10; rate = 23; // ошибка, rate - константа, поэтому мы не можем изменить ее значение
Также стоит отметить, что поскольку мы не можем изменить значение константы, то она должна быть инициализирована, то есть при ее определении мы должны предоставить ей начальное значение. Если мы этого не сделаем, то опять же мы столкнемся с ошибкой:
Const rate; // ошибка, rate не инициализирована
I too have had a problem with this. And after quite a while searching for the answer and looking at all the responses by everybody, I think I"ve come up with a viable solution to this.
It seems that most of the answers that I"ve come across is using functions to hold the constants. As many of the users of the MANY forums post about, the functions can be easily over written by users on the client side. I was intrigued by Keith Evetts" answer that the constants object can not be accessed by the outside, but only from the functions on the inside.
So I came up with this solution:
Put everything inside an anonymous function so that way, the variables, objects, etc. cannot be changed by the client side. Also hide the "real" functions by having other functions call the "real" functions from the inside. I also thought of using functions to check if a function has been changed by a user on the client side. If the functions have been changed, change them back using variables that are "protected" on the inside and cannot be changed.
/*Tested in: IE 9.0.8; Firefox 14.0.1; Chrome 20.0.1180.60 m; Not Tested in Safari*/ (function(){ /*The two functions _define and _access are from Keith Evetts 2009 License: LGPL (SETCONST and CONST). They"re the same just as he did them, the only things I changed are the variable names and the text of the error messages. */ //object literal to hold the constants var j = {}; /*Global function _define(String h, mixed m). I named it define to mimic the way PHP "defines" constants. The argument "h" is the name of the const and has to be a string, "m" is the value of the const and has to exist. If there is already a property with the same name in the object holder, then we throw an error. If not, we add the property and set the value to it. This is a "hidden" function and the user doesn"t see any of your coding call this function. You call the _makeDef() in your code and that function calls this function. - You can change the error messages to whatever you want them to say. */ self._define = function(h,m) { if (typeof h !== "string") { throw new Error("I don\"t know what to do."); } if (!m) { throw new Error("I don\"t know what to do."); } else if ((h in j)) { throw new Error("We have a problem!"); } else { j[h] = m; return true; } }; /*Global function _makeDef(String t, mixed y). I named it makeDef because we "make the define" with this function. The argument "t" is the name of the const and doesn"t need to be all caps because I set it to upper case within the function, "y" is the value of the value of the const and has to exist. I make different variables to make it harder for a user to figure out whats going on. We then call the _define function with the two new variables. You call this function in your code to set the constant. You can change the error message to whatever you want it to say. */ self._makeDef = function(t, y) { if(!y) { throw new Error("I don\"t know what to do."); return false; } q = t.toUpperCase(); w = y; _define(q, w); }; /*Global function _getDef(String s). I named it getDef because we "get the define" with this function. The argument "s" is the name of the const and doesn"t need to be all capse because I set it to upper case within the function. I make a different variable to make it harder for a user to figure out whats going on. The function returns the _access function call. I pass the new variable and the original string along to the _access function. I do this because if a user is trying to get the value of something, if there is an error the argument doesn"t get displayed with upper case in the error message. You call this function in your code to get the constant. */ self._getDef = function(s) { z = s.toUpperCase(); return _access(z, s); }; /*Global function _access(String g, String f). I named it access because we "access" the constant through this function. The argument "g" is the name of the const and its all upper case, "f" is also the name of the const, but its the original string that was passed to the _getDef() function. If there is an error, the original string, "f", is displayed. This makes it harder for a user to figure out how the constants are being stored. If there is a property with the same name in the object holder, we return the constant value. If not, we check if the "f" variable exists, if not, set it to the value of "g" and throw an error. This is a "hidden" function and the user doesn"t see any of your coding call this function. You call the _getDef() function in your code and that function calls this function. You can change the error messages to whatever you want them to say. */ self._access = function(g, f) { if (typeof g !== "string") { throw new Error("I don\"t know what to do."); } if (g in j) { return j[g]; } else { if(!f) { f = g; } throw new Error("I don\"t know what to do. I have no idea what \""+f+"\" is."); } }; /*The four variables below are private and cannot be accessed from the outside script except for the functions inside this anonymous function. These variables are strings of the four above functions and will be used by the all-dreaded eval() function to set them back to their original if any of them should be changed by a user trying to hack your code. */ var _define_func_string = "function(h,m) {"+" if (typeof h !== "string") { throw new Error("I don\\"t know what to do."); }"+" if (!m) { throw new Error("I don\\"t know what to do."); }"+" else if ((h in j)) { throw new Error("We have a problem!"); }"+" else {"+" j[h] = m;"+" return true;"+" }"+" }"; var _makeDef_func_string = "function(t, y) {"+" if(!y) { throw new Error("I don\\"t know what to do."); return false; }"+" q = t.toUpperCase();"+" w = y;"+" _define(q, w);"+" }"; var _getDef_func_string = "function(s) {"+" z = s.toUpperCase();"+" return _access(z, s);"+" }"; var _access_func_string = "function(g, f) {"+" if (typeof g !== "string") { throw new Error("I don\\"t know what to do."); }"+" if (g in j) { return j[g]; }"+" else { if(!f) { f = g; } throw new Error("I don\\"t know what to do. I have no idea what \\""+f+"\\" is."); }"+" }"; /*Global function _doFunctionCheck(String u). I named it doFunctionCheck because we"re "checking the functions" The argument "u" is the name of any of the four above function names you want to check. This function will check if a specific line of code is inside a given function. If it is, then we do nothing, if not, then we use the eval() function to set the function back to its original coding using the function string variables above. This function will also throw an error depending upon the doError variable being set to true This is a "hidden" function and the user doesn"t see any of your coding call this function. You call the doCodeCheck() function and that function calls this function. - You can change the error messages to whatever you want them to say. */ self._doFunctionCheck = function(u) { var errMsg = "We have a BIG problem! You\"ve changed my code."; var doError = true; d = u; switch(d.toLowerCase()) { case "_getdef": if(_getDef.toString().indexOf("z = s.toUpperCase();") != -1) { /*do nothing*/ } else { eval("_getDef = "+_getDef_func_string); if(doError === true) { throw new Error(errMsg); } } break; case "_makedef": if(_makeDef.toString().indexOf("q = t.toUpperCase();") != -1) { /*do nothing*/ } else { eval("_makeDef = "+_makeDef_func_string); if(doError === true) { throw new Error(errMsg); } } break; case "_define": if(_define.toString().indexOf("else if((h in j)) {") != -1) { /*do nothing*/ } else { eval("_define = "+_define_func_string); if(doError === true) { throw new Error(errMsg); } } break; case "_access": if(_access.toString().indexOf("else { if(!f) { f = g; }") != -1) { /*do nothing*/ } else { eval("_access = "+_access_func_string); if(doError === true) { throw new Error(errMsg); } } break; default: if(doError === true) { throw new Error("I don\"t know what to do."); } } }; /*Global function _doCodeCheck(String v). I named it doCodeCheck because we"re "doing a code check". The argument "v" is the name of one of the first four functions in this script that you want to check. I make a different variable to make it harder for a user to figure out whats going on. You call this function in your code to check if any of the functions has been changed by the user. */ self._doCodeCheck = function(v) { l = v; _doFunctionCheck(l); }; }())
It also seems that security is really a problem and there is not way to "hide" you programming from the client side. A good idea for me is to compress your code so that it is really hard for anyone, including you, the programmer, to read and understand it. There is a site you can go to: http://javascriptcompressor.com/ . (This is not my site, don"t worry I"m not advertising.) This is a site that will let you compress and obfuscate Javascript code for free.
- Copy all the code in the above script and paste it into the top textarea on the javascriptcompressor.com page.
- Check the Base62 encode checkbox, check the Shrink Variables checkbox.
- Press the Compress button.
- Paste and save it all in a .js file and add it to your page in the head of your page.
Функция – это блок кода, который выполняет действие или возвращает значение. Функции – это настраиваемый код, который можно использовать повторно; поэтому благодаря функциям программы становятся модульными и более производительными.
Этот мануал предлагает несколько способов определения и вызова функции и использования параметров функции в JavaScript.
Определение функции
Функции определяются или объявляются с помощью ключевого слова function. Синтаксис функции в JavaScript выглядит так:
function nameOfFunction() {
// Code to be executed
}
Объявление функции начинается с ключевого слова function, за которым следует имя функции. Имена функций составляются по тем же правилам, что и имена переменных: они могут содержать буквы, цифры, знаки подчеркивания и доллара и часто записываются в верблюжьем регистре. За именем следует набор скобок, которые могут использоваться для опциональных параметров. Код функции содержится в фигурных скобках, как операторы for или if.
Как вы могли заметить, значение параметра name не присваивается в коде, это делается при вызове функции. При вызове функции имя пользователя передается в качестве аргумента. Аргумент – это фактическое значение, которое передается в функцию (в данном случае это имя пользователя, например 8host).
// Invoke greet function with "8host" as the argument
greet("8host");
Значение 8host передается в функцию через параметр name. Теперь параметр name будет представлять в данной функции это значение. Код файла greetUser.js выглядит так:
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Invoke greet function with "8host" as the argument
greet("8host");
Запустив эту программу, вы получите такой вывод:
Теперь вы знаете, как можно повторно использовать функцию.
Кроме параметров, внутри функций можно объявлять переменные. Эти переменные называются локальными и существуют только внутри их блока функции. Область переменных определяет доступность переменных; переменные, которые определены внутри функции, недоступны извне функции, но их можно использовать столько раз, сколько используется в программе функция, которой они принадлежат.
Возвращение значений
В функции можно использовать более одного параметра. Вы можете передать в функцию несколько значений и вернуть значение. Для примера создайте файл sum.js и объявите в нем функцию, которая будет искать сумму двух значений, x и y.
// Initialize add function
function add(x, y) {
return x + y;
}
add(9, 7);
В этом коде определяется функция с параметрами х и у. Затем функция получает значения 9 и 7. Запустите программу:
Программа сложит полученные значения, 9 и 7, и вернет результат 16.
Когда используется ключевое слово return, функция перестает выполняться и возвращает значение выражения. В этом случае браузер отобразит значение в консоли, однако это не то же самое, что использовать console.log() для вывода в консоль. При вызове функция выводит значение туда, откуда она была вызвана. Это значение можно использовать или поместить в переменную.
Функциональные выражения
В предыдущем разделе вы объявили функцию, которая складывает два числа и возвращает полученное значение. Также вы можете создать функциональное выражение , присвоив функцию переменной.
Используйте предыдущую функцию, чтобы применить полученное значение к переменной sum.
// Assign add function to sum constant
const sum = function add(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(20, 5);
25
Теперь константа sum является функцией. Это выражение можно сократить, превратив его в анонимную функцию (так называются функции без параметра name). В настоящее время функция называется add, но в функциональных выражениях имя обычно опускается.
// Assign function to sum constant
const sum = function(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(100, 3);
103
Теперь у функции больше нет имени, она стала анонимной.
Функциональные выражения с именем могут использоваться для отладки.
Стрелочные функции
До сих пор функции определялись с помощью ключевого слова function. Тем не менее, существует более новый и сжатый способ определения функции – это стрелочные функции ECMAScript 6 . Стрелочные функции представлены значком равенства, за которым следует знак больше: =>.
Стрелочные функции всегда анонимны и являются типом функционального выражения. Попробуйте создать базовую стрелочную функцию, чтобы найти сумму двух чисел.
// Define multiply function
const multiply = (x, y) => {
return x * y;
}
multiply(30, 4);
120
Вместо того чтобы писать function, можно просто использовать символы =>.
Если в функции всего один параметр, скобки можно опустить. В следующем примере функция возводит в квадрат х, потому в качестве аргумента ей нужно всего одно число.
// Define square function
const square = x => {
return x * x;
}
// Invoke function to find product
square(8);
64
Примечание : Если в стрелочной функции нет параметров, нужно добавить пустые круглые скобки ().
Стрелочные функции, которые состоят только из оператора return, можно сократить. Если функция состоит только из одной строки return, вы можете опустить фигурные скобки и оператор return, как в приведенном ниже примере.
// Define square function
const square = x => x * x;
// Invoke function to find product
square(10);
100
Заключение
Данный мануал знакомит вас с объявлением функций, функциональных выражений и стрелочных функций, возвращением значений и присваиванием значений функции переменным.
Функция – это блок кода, который возвращает значение или выполняет действие.
Tags:Переменные и константы в JavaScript. Объявление переменных и присвоение им значений. Переменные глобальные и локальные. Использование констант.
Объявление переменных в JavaScript
Имена переменных в JavaScript могут состоять из букв, цифр, знака $ и знака _, причем имя переменной не может начинаться с цифры. Имейте в виду, что JavaScript чувствителен к регистру букв, и переменные a1 и A1 - это разные переменные. Кириллицу использовать не рекомендуется, хотя это возможно.
Переменные в JavaScript объявляются ключевым словом var:
Var Peremennaya_1 var Peremennaya_2
Использовать переменные в JavaScript без объявления не рекомендуется. Это возможно, но может привести к ошибкам.
Присвоение значения переменным
Присвоение значения объявленным переменным в JavaScript:
Peremennaya_1 = 25 Peremennaya_2 = "Присваиваемый текст заключаем в прямые кавычки"
Можно присваивать значение переменным сразу при объявлении:
Var Peremennaya_1 = 25 var Peremennaya_2 = "Присваиваемый текст заключаем в прямые кавычки"
Значение переменной в JavaScript может изменяться в процессе выполнения программы. При записи в переменную текста, его необходимо заключить в прямые кавычки.
Переменные локальные и глобальные
Если переменная объявлена внутри функции, то она является локальной и будет доступна (иметь видимость) только в пределах этой функции. При выходе из функции локальные переменные в JavaScript уничтожаются, поэтому в разных функциях можно использовать переменные с одним и тем же именем.
Если переменная объявлена вне функций, то она является глобальной и будет доступна (иметь видимость) во всех функциях в пределах страницы. Глобальные переменные уничтожаются в JavaScript при закрытии страницы.
Константы в JavaScript
Константы предназначены для упрощения работы с кодом, когда приходится использовать повторяющиеся значения или выражения. Достаточно однократно задать константе значение и можно сколько угодно его использовать, вставляя в код своих программ. В JavaScript нет ключевого слова для объявления констант, вместо констант используются обычные переменные. Чтобы константы отличались от переменных, их принято обозначать заглавными буквами, при необходимости используя знак подчеркивания:
Var DRUG_CHELOVEKA = "Собака"
Приведенный пример константы не совсем полноценный, так как слово «Собака» и так несложно запомнить и вставлять куда нужно. Использовать константы в JavaScript можно для записи и вставки более сложных значений, например, трудно запоминаемых кодов, наборов символов, длинного текста, веб-адресов, адресов электронной почты, телефонных номеров, различных коэффициентов.
В JavaScript константы можно перезаписывать, как переменные, но если это делать, тогда теряется смысл констант.
От автора: Пожалуй, это будет удивительным, но в JavaScript давно не хватало поддержки констант, т.е. зарегистрированных значений, которые не меняются в процессе выполнения всего вашего скрипта. За неимением каких-либо альтернатив, большинство констант объявлялось с помощью переменных.
Пример объявления константы с помощью переменной:
var DAYSINWEEK = 7;
var DAYSINWEEK = 7 ; |
Это и опасно, и непрактично, поскольку позволяет в любой момент изменить значение переменной DAYSINWEEK в вашем скрипте. Разработчики придумали разнообразные способы, как выделить переменные, являющиеся, как бы, константами, от обычных переменных в JavaScript, начиная от именования переменных ТОЛЬКО ЗАГЛАВНЫМИ БУКВАМИ (лучшая традиция) и заканчивая решениями, о которых я расскажу позже. К счастью, в последней версии ECMAScript (спецификация, являющаяся стандартом) была представлена настоящая константа:
JavaScript. Быстрый старт
const DAYSINWEEK = 7;
const DAYSINWEEK = 7 ; |
И вот теперь к DAYSINWEEK можно обращаться, как к переменной, но вам никогда не удастся изменить ее значение:
console.log(DAYSINWEEK); > 7 DAYSINWEEK = 8; > error
console . log (DAYSINWEEK ) ; DAYSINWEEK = 8 ; > error |
После того, как константа была объявлена (константы должны быть инициализированы с помощью ключевого слова const, а за ним должно идти имя константы, которое следует правилам именования переменных), ее имя будет зарезервировано: вы уже не сможете назвать переменную DAYSINWEEK и иметь константу с таким же именем, или наоборот.
Ключевое слово const имеет хорошую поддержку в современных браузерах: IE11 и Spartan, Firefox 31+, Opera 12+, Safari 5.1.7+, iOS 7 и выше, вместе с Chrome 36+. Однако, есть несколько важных оговорок:
В Chrome не поддерживается вывод ошибки при попытке перезаписать константу. Значение константы в любом случае не будет изменено, но неопытный разработчик может подумать, что новое значение было применено, поскольку не было выведено никакой ошибки.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Константы не создают новую область видимости в Webkit. Т.е. константы могут быть видимыми за пределами текущей области видимости.
Firefox 35 и ниже позволяет вам «на лету» изменить значение const. Это исправлено в версии Firefox 36+.
Также следует отметить, что проблемы с Webkit возникают, только если не используется режим strict (о котором пойдет речь в одной из следующих статей).
Можно ли сейчас использовать ключевое слово const в реальных проектах?
Выбор, использовать ли ключевое слово const в вашем коде или нет, будет зависеть от нескольких факторов: важнее всего то, какими версиями браузеров пользуются посетители ваших сайтов, поскольку использование ключевого слова const будет считаться ошибкой в таких браузерах, как IE10. Если вы хотите использовать ключевое слово const в процессе разработки, но не готовы применять его в реальных проектах, то у вас есть несколько вариантов:
Вариант 1: использовать транспилер («транспилятор»)
Транспилеры (transpilers), как следует из названия, трансформируют ваш код во время его компиляции в другой язык: в данном случае из версии спецификации ES6 (в которой появилось ключевое слово const) в ES5. Это позволяет вам писать код на более новой версии языка, но в реальном проекте будет использоваться версия, которая совместима с более широким кругом браузеров. Эдди Озмани (Addy Osmani) составил