path: root/files/pl/web/javascript/guide/funkcje/index.html

---
title: Funkcje
slug: Web/JavaScript/Guide/Funkcje
translation_of: Web/JavaScript/Guide/Functions
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div>

<p class="summary">Funkcje są jednym z podstawowych 'klocków' JavaScriptu. Funkcja jest zbiorem wyrażeń, które wykonują jakieś zadanie, bądź obliczają wartość. Aby użyć funkcji, musisz najpierw zdefiniować ją gdzieś w zasięgu, z którego zostanie wywołana.</p>

<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a> to get to know the details.</p>

<h2 id="Definiowanie_funkcji">Definiowanie funkcji</h2>

<h3 id="Deklaracje_funkcji">Deklaracje funkcji</h3>

<p><strong>Definicja funkcji</strong> (zwana też <strong>deklaracją funkcji</strong>, lub <strong>instrukcją funkcji</strong>) składa się ze słowa kluczowego <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> oraz:</p>

<ul>
 <li>Nazwy funkcji.</li>
 <li>Listy argumentów zamkniętych w nawiasach i oddzielonych przecinkami.</li>
 <li>Instrukcji JavaScript, które definiują funkcję, zamkniętych w nawiasach klamrowych, <code>{ }</code>.</li>
</ul>

<p>Poniższy przykład przedstawia definicję funkcji obliczającej kwadrat liczby:</p>

<pre class="brush: js">function square(number) {
  return number * number;
}
</pre>

<p>Funkcja <code>square</code> przyjmuje jeden argument, nazwany <code>number</code>. Funkcja składa się z jednej instrukcji, która zwraca argument (<code>number</code>) pomnożony przez siebie. Instrukcja <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> oznacza wartość zwracaną przez funkcję.</p>

<pre class="brush: js">return number * number;
</pre>

<p>Podstawowe parametry (takie jak liczby) są przekazywane do funkcji <strong>przez wartość</strong>; wartośc przekazywana jest do funkcji, ale jeśli funkcja zmienia wartość, ta zmiana nie jest rejestrowana globalnie, lub w funkcji wywołującej.</p>

<p>Jeśli przekażesz obiekt (n.p. {{jsxref("Array")}}) jako parametr a funkcja zmieni właściwości obiektu, zmiana ta jest rejestrowana poza funkcją, tak jak jest to pokazane w przykładzie:</p>

<pre class="brush: js">function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998};
var x, y;

x = mycar.make; // x dostaje wartość "Honda"

myFunc(mycar);
y = mycar.make; // y dodaje wartość "Toyota"
                // (właściwość make została zmieniona przez funkcję)
</pre>

<div class="note">
<p><strong>Note:</strong> Przypisanie nowego obiektu do parametru <strong>nie</strong> będzie miało żadnego skutku poza funkcją, ponieważ jest to zmiana wartości parametru, a nie zmiana jednej z właściwości obiektu:</p>
</div>

<pre class="brush: js">function myFunc(theObject) {
  theObject = {make: "Ford", model: "Focus", year: 2006};
}

var mycar = {make: "Honda", model: "Accord", year: 1998};
var x, y;

x = mycar.make; // x dostaje wartość "Honda"

myFunc(mycar);
y = mycar.make; // y wciąż dostaje wartość "Honda" </pre>

<h3 id="Wyrażenia_funkcyjne">Wyrażenia funkcyjne</h3>

<p>Podczas gdy powyższa deklaracja jest syntaktycznie wyrażeniem, funkcje mogą być utworzone także przez <strong>wyrażenie funkcyjne.</strong> Taka funkcja może być <strong>anonimowa;</strong> nie posiadająca nazwy. Dla przykładu, funkcja <code>square </code>może być zdefiniowana następująco:</p>

<pre class="brush: js">var square = function(number) { return number * number };
var x = square(4) // x gets the value 16</pre>

<p>Deklaracja funkcji przy  pomocy wyrażenia funkcyjnego nie oznacza, że funkcja musi być anonimowa. Nadal może ona posiadać swoją nazwę, która może przydać się do wywołania samej siebie czy do identyfikacji w śladzie stosu podczas debugowania kodu. </p>

<pre class="brush: js">var factorial = function fac(n) { return n&lt;2 ? 1 : n*fac(n-1) };

console.log(factorial(3));
</pre>

<p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a <code>map</code> function being defined and then called with an expression function as its first parameter:</p>

<pre class="brush: js">function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
</pre>

<p>Poniższy kod:</p>

<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
</pre>

<p>zwraca [0, 1, 8, 125, 1000].</p>

<p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals 0:</p>

<pre class="brush: js">var myFunc;
if (num == 0){
  myFunc = function(theObject) {
    theObject.make = "Toyota"
  }
}</pre>

<p>In addition to defining functions as described here, you can also use the {{jsxref("Function")}} constructor to create functions from a string at runtime, much like {{jsxref("eval()")}}.</p>

<p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p>

<h2 id="Wywoływanie_funkcji">Wywoływanie funkcji</h2>

<p>Definicja fukcji nie wykonuje jej. Definiowanie funkcji nazywa fukncję i określa co robić kiedy fukcja zostanie wywołana. <strong>Wywołanie </strong>funkcji inicjiuje wykonanie określonych akcji wraz z wskazanymi parametrami. Na przykład, jeśli zdefiniujesz funkcję square, możesz ją wywołać w następujący sposób:</p>

<pre class="brush: js">square(5);
</pre>

<p>Powyższy kod wywołuje funkcję dla argumentu 5. Funkcja wykonuje się i zwraca wartość 25.</p>

<p>Funkcja musi znajdować się w obecnym zakresie by mogła zostać wywołana. Jej wywołanie może jednak znajdować się powyżej jej deklaracji. Mamy wtedy do czynienia ze zjawiskiem hoistingu. </p>

<pre class="brush: js">console.log(square(5));
/* ... */
function square(n) { return n*n }
</pre>

<p>Zakres funkcji jest funkcją w której została ona zadeklarowana co oznacza, że deklarując funkcję na najwyższym poziomie programu, znajduje się ona w zakresie globalnym.</p>

<div class="note">
<p><strong>Notka:</strong> Zjawisko hoistingu funkcji zachodzi wyłącznie w przypadku powyższego sposobu deklaracji (<code>function funcName(){}</code>). Poniższy kod nie zadziała, w tym przypadku funkcja została zadeklarowana za pomocą wyrażenia.</p>
</div>

<pre class="brush: js example-bad">console.log(square(5));
square = function (n) {
  return n * n;
}
</pre>

<p>Argumenty funkcji mogą być nie tylko łańcuchami lub liczbami.Funkcja <code>show_props()</code> (zdefiniowana w <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) jest przykładem funkcji przyjmującej objekt jako argument.</p>

<p>Funkcja może wywoływać samą siebie. Na przykład, poniżej mamy funkcję rekurencyjnie obliczającą silnię.</p>

<pre class="brush: js">function factorial(n){
  if ((n == 0) || (n == 1))
    return 1;
  else
    return (n * factorial(n - 1));
}
</pre>

<p>Poniżej znajdują się wyniki funkcji dla liczb z zakresu 1-5.</p>

<pre class="brush: js">var a, b, c, d, e;
a = factorial(1); // a gets the value 1
b = factorial(2); // b gets the value 2
c = factorial(3); // c gets the value 6
d = factorial(4); // d gets the value 24
e = factorial(5); // e gets the value 120
</pre>

<p>Istnieją inne sposoby wywołania funkcji. Często zdarzają się sytuacje gdy funkcja musi zostać wywołana dynamicznie, przyjmuje różna liczbę argumentów lub zmienia sie kontekst jej wywołania. Okazuje się, że funkcje są tak naprawdę obiektami, które posiadaja własne metody (sprawdź obiekt {{jsxref("Function")}}). Jednej z tych metod {{jsxref("Function.apply", "apply()")}} możemy użyć do zmiany kontekstu wywołania funkcji.</p>

<h2 class="deki-transform" id="Zakres_funkcji">Zakres funkcji</h2>

<p>Zmienne zdefiniowane wewnątrz funkcji nie są dostępne poza nią, ponieważ są zdefiniowane tylko w wewnętrznym zakresie funkcji. Sama funkcja ma dostęp do innych zmiennych i funkcji zdefiniowanych w tym samym zakresie, w którym została zdefiniowana. Innymi słowy, funkcja zdefiniowana w zakresie globalnym ma dostęp do wszystkich zmiennych zdefiniowanych w zakresie globalnym. Funkcja zdefiniowana w innej funkcji ma dostęp do wszystkich zmiennych zdefiniowanych w funkcji macierzystej oraz zmiennych, do których ma dostęp funkcja macierzysta.</p>

<pre class="brush: js">// Poniższe zmienne są zdefiniowane z zakresie globalnym
var num1 = 20,
    num2 = 3,
    name = "Chamahk";

// Ta funkcja jest zdefiniowana w zakresie globalnym
function multiply() {
  return num1 * num2;
}

multiply(); // Zwraca 60

// Przykład funkcji zagnieżdżonej
function getScore () {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + " scored " + (num1 + num2);
  }

  return add();
}

getScore(); // Zwraca "Chamahk scored 5"
</pre>

<h2 id="Zakres_i_stos_funkcji">Zakres i stos funkcji</h2>

<h3 id="Rekurencja">Rekurencja</h3>

<p>Funkcja może się odwoływać i wywoływać samą siebie. Istnieją trzy sposoby odwoływania się funkcji do siebie:</p>

<ol>
 <li>przez nazwę funkcji</li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
 <li>przez zmienną dostępna w zakresie, która odwołuje się do funkcji</li>
</ol>

<p>Na przykład, rozważ następującą definicję funkcji:</p>

<pre class="brush: js">var foo = function bar() {
   // statements go here
};
</pre>

<p>Within the function body, the following are all equivalent:</p>

<ol>
 <li><code>bar()</code></li>
 <li><code>arguments.callee()</code></li>
 <li><code>foo()</code></li>
</ol>

<p>Funkcja, która wywołuje samą siebie to <em>funkcja rekurencyjna</em>. W pewnym sensie rekurencja jest analogiczna z pętlą. Zarówno funkcja rekurencyjna, jak i pętla wykonują ten sam kod wiele razy, potrzebują warunku końca (aby uniknąć wiecznej pętli lub bardziej w tym przypadku wiecznej rekurencji). Dla przykładu następująca pętla:</p>

<pre class="brush: js">var x = 0;
while (x &lt; 10) { // "x &lt; 10" is the loop condition
   // zrób jakieś rzeczy
   x++;
}
</pre>

<p>może być przekształcona w funkcję rekurencyjną i wywołanie tej funkcji:</p>

<pre class="brush: js">function loop(x) {
  if (x &gt;= 10) // "x &gt;= 10" is the exit condition (equivalent to "!(x &lt; 10)")
    return;
  // do stuff
  loop(x + 1); // rekurencyjne wywołanie
}
loop(0);
</pre>

<p>Niektóre algorytmy nie mogą być wykonane w zwykłej iteracji pętli. Dla przykładu, wydobycie wszystkich nodów ze struktury drzewiastej (np. dla <a href="/en-US/docs/DOM">DOM</a>) jest łatwiej wykonać za pomocą rekurencji:</p>

<pre class="brush: js">function walkTree(node) {
  if (node == null) //
    return;
  // zrób coś z node
  for (var i = 0; i &lt; node.childNodes.length; i++) {
    walkTree(node.childNodes[i]);
  }
}
</pre>

<p>Porównując do funkcji z pętlą <code>loop</code>, każde rekurencyjne wywołanie wykonuje wiele rekurencyjnych wowołań.</p>

<p>Każdy algorytm rekurencyjny można zmienić na nie rekurencyjny, lecz logika w tym drugim przypadku jest znacznie bardziej skomplikowana i wymaga użycia stosu. Faktycznie, sama rekurencja używa stosu: stosu funkcyjnego.</p>

<p>W poniższym przykładzie widać zachowanie przypominające użycie stosu:</p>

<pre class="brush: js">function foo(i) {
  if (i &lt; 0)
    return;
  console.log('begin:' + i);
  foo(i - 1);
  console.log('end:' + i);
}
foo(3);

// Output:

// begin:3
// begin:2
// begin:1
// begin:0
// end:0
// end:1
// end:2
// end:3</pre>

<h3 id="Funkcje_zagnieżdżone_i_domknięcia">Funkcje zagnieżdżone i domknięcia</h3>

<p>Możesz zagnieżdżać funkcję w funkcji. Zagnieżdżona (wewnętrzna) funkcja jest prywatna dla funkcji (zewnętrznej), która ją zawiera. W ten sposób tworzy się domknięcie (<em>closure)</em>. Domknięcie jest wyrażeniem (zwykle funkcją), które może posiadać dodatkowe zmienne razem ze środowiskiem, które "wiąże" te zmienne (w ten sposób domknięcie jest zamykane).</p>

<p>Ponieważ funkcja zagnieżdżona jest równocześnie domknięciem, to oznacza, że może "dziedziczyć" wszystkie argumenty i zmienne funkcji, która ją zawiera. Innymi słowy, funkcja wewnętrzna zawiera zakres funkcji zewnętrznej.</p>

<p>Podsumowując:</p>

<ul>
 <li>Funkcja wewnętrzna może być dostępna tylko przez instrukcje z funkcji zewnętrznej.</li>
</ul>

<ul>
 <li>Funkcja wewnętrzna tworzy domknięcie: może używać argumentów i zmiennych funkcji zewnętrznej, podczas gdy funkcja zewnętrzna nie może używać argumentów i zmiennych funkcji wewnętrznej.</li>
</ul>

<p>Poniższy przykład obrazuje funkcje zagnieżdżone:</p>

<pre class="brush: js">function addSquares(a,b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2,3); // returns 13
b = addSquares(3,4); // returns 25
c = addSquares(4,5); // returns 41
</pre>

<p>Ponieważ funkcja wewnętrzna tworzy domknięcie, możesz wywołać funkcję zewnętrzną i podać argumenty zarówno dla zewnętrznej, jak i wewnętrznej funkcji:</p>

<pre class="brush: js">function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
result = fn_inside(5); // returns 8

result1 = outside(3)(5); // returns 8
</pre>

<h3 id="Zachowywanie_zmiennych">Zachowywanie zmiennych</h3>

<p>Zwróć uwagę jak zmienna <code>x</code> jest zachowana, kiedy zwracana jest funkcja <code>inside</code>. Domknięcie musi zachować argumenty i zmienne we wszystkich zakresach, do których się odwołuje. Jako że każde wywołanie potencjalnie dostarcza różne wartości argumentów, przy każdym wywołaniu <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">outside</span></font> jest tworzone nowe domknięcie. Pamięć może być zwolniona, tylko jeśli zwracany <code>inside</code> nie jest więcej dostępny.</p>

<p>Ten sposób nie różni się od zachowywania referencji w innych obiektach, lecz jest mniej oczywisty, ponieważ referencje nie są tworzone bezpośrednio i nie można ich zweryfikować.</p>

<h3 id="Wielokrotnie_zagnieżdżone_funkcje">Wielokrotnie zagnieżdżone funkcje</h3>

<p>Funkcje mogą być zagnieżdżone wielokrotnie, np. funkcja (A) zawierająca funkcję (B) zawierającą funkcję (C). Obydwie funkcje B i C tworzą domknięcia więc B ma dostęp do A a C ma dostęp do B. Dodatkowo, ponieważ C ma dostęp do B która ma dostęp do A, więc C również ma dostęp do A. W ten sposób domknięcia mogą zawierać wiele zakresów; zawierają rekurencyjne zakresy funkcji, które je zawierają. Efekt ten nazywa się <em>wiązaniem zakresów (</em><em>scope chaining)</em>. (Później zostanie wyjaśnione określenie "chaining".)</p>

<p>Rozważ poniższy przykład:</p>

<pre class="brush: js">function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); // logs 6 (1 + 2 + 3)
</pre>

<p>W tym przykładzie <code>C</code> ma dostęp do zmiennej <code>y</code> w <code>B</code> i <code>x</code> w <code>A</code>. Jest to możliwe, ponieważ:</p>

<ol>
 <li><code>B</code> tworzy domknięcie zawierające <code>A</code> i dlatego <code>B</code> ma dostęp do argumentów i zmiennych <code>A</code>.</li>
 <li><code>C</code> tworzy domknięcie zawierające <code>B</code>.</li>
 <li>Ponieważ domknięcie <code>B</code> zawiera <code>A</code>, to domknięcie <code>C</code> również zawiera <code>A</code>. <code>C</code> ma dostęp do zmiennych i argumentów zarówno <code>B</code> jak i <code>A</code>. Innymi słowy <code>C</code> wiąże zakresy <code>B</code> i <code>A</code>.</li>
</ol>

<p>Jednak sytuacja odwrotna nie jest już prawdziwa. <code>A</code> nie ma dostępu do <code>C</code>, ponieważ <code>A</code> nie może dostać się do żadnego argumentu i zmiennej <code>B</code>, dla której <code>C</code> jest zmienną. Zatem <code>C</code> pozostaje prywatny (dostępny) tylko dla <code>B</code>.</p>

<h3 id="Konflikty_nazw">Konflikty nazw</h3>

<p>Gdy dwa argumenty lub zmienne w zakresach danego zamknięcia mają tę samą nazwę, wtedy występuje konflikt nazw. Czym bardziej wewnętrzny zakres, tym większe pierwszeństwo, więc najbardziej wewnętrzny zakres ma najwyższy priorytet, a najbardziej zewnętrzny zakres ma najniższy. Sytuacja ta, określana jest wiązaniem zakresów. Pierwszy w łańcuchu to najbardziej wewnętrzny zakres, a ostatni to najbardziej zewnętrzny. Rozważ następujący przykład:</p>

<pre class="brush: js">function outside() {
  var x = 10;
  function inside(x) {
    return x;
  }
  return inside;
}
result = outside()(20); // returns 20 instead of 10
</pre>

<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p>

<h2 id="Closures">Closures</h2>

<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the outer function itself, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p>

<pre class="brush: js">var pet = function(name) {   // The outer function defines a variable called "name"
  var getName = function() {
    return name;             // The inner function has access to the "name" variable of the outer function
  }
  return getName;            // Return the inner function, thereby exposing it to outer scopes
},
myPet = pet("Vivie");

myPet();                     // Returns "Vivie"
</pre>

<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p>

<pre class="brush: js">var createPet = function(name) {
  var sex;

  return {
    setName: function(newName) {
      name = newName;
    },

    getName: function() {
      return name;
    },

    getSex: function() {
      return sex;
    },

    setSex: function(newSex) {
      if(typeof newSex == "string" &amp;&amp; (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
pet.getName();                  // Vivie

pet.setName("Oliver");
pet.setSex("male");
pet.getSex();                   // male
pet.getName();                  // Oliver
</pre>

<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner function act as safe stores for the inner functions. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p>

<pre class="brush: js">var getCode = (function(){
  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want outsiders to be able to modify...

  return function () {
    return secureCode;
  };
})();

getCode();    // Returns the secureCode
</pre>

<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p>

<pre class="brush: js">var createPet = function(name) {  // Outer function defines a variable called "name"
  return {
    setName: function(name) {    // Enclosed function also defines a variable called "name"
      name = name;               // ??? How do we access the "name" defined by the outer function ???
    }
  }
}
</pre>

<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined.</p>

<h2 id="Using_the_arguments_object">Using the arguments object</h2>

<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p>

<pre class="brush: js">arguments[i]
</pre>

<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p>

<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p>

<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>

<pre class="brush: js">function myConcat(separator) {
   var result = "", // initialize list
       i;
   // iterate through arguments
   for (i = 1; i &lt; arguments.length; i++) {
      result += arguments[i] + separator;
   }
   return result;
}
</pre>

<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p>

<pre class="brush: js">// returns "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah; "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley. "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
</pre>

<div class="note">
<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that is has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p>
</div>

<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p>

<h2 id="Function_parameters">Function parameters</h2>

<p>Starting with ECMAScript 6, there are two new kinds of parameters: default parameters and rest parameters.</p>

<h3 id="Default_parameters">Default parameters</h3>

<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p>

<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code>  when evaluating <code>a*b</code> and the call to <code>multiple</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p>

<pre class="brush: js">function multiply(a, b) {
  b = typeof b !== 'undefined' ?  b : 1;

  return a*b;
}

multiply(5); // 5
</pre>

<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p>

<pre class="brush: js">function multiply(a, b = 1) {
  return a*b;
}

multiply(5); // 5</pre>

<p>Fore more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p>

<h3 id="Rest_parameters">Rest parameters</h3>

<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p>

<pre class="brush: js">function multiply(multiplier, ...theArgs) {
  return theArgs.map(x =&gt; multiplier * x);
}

var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]</pre>

<h2 id="Arrow_functions">Arrow functions</h2>

<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (also known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p>

<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p>

<h3 id="Shorter_functions">Shorter functions</h3>

<p>In some functional patterns, shorter functions are welcome. Compare:</p>

<pre class="brush: js">var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s =&gt; s.length );</pre>

<h3 id="Lexical_this">Lexical <code>this</code></h3>

<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p>

<pre class="brush: js">function Person() {
  // The Person() constructor defines `<code>this`</code> as itself.
  this.age = 0;

  setInterval(function growUp() {
    // In nonstrict mode, the growUp() function defines `this`
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    this.age++;
  }, 1000);
}

var p = new Person();</pre>

<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p>

<pre class="brush: js">function Person() {
  var self = this; // Some choose `that` instead of `self`.
                   // Choose one and be consistent.
  self.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    self.age++;
  }, 1000);
}</pre>

<h2 id="Predefined_functions">Predefined functions</h2>

<p>JavaScript has several top-level, built-in functions:</p>

<dl>
 <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
 <dd>
 <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
 <dd>
 <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
 <dd>
 <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
 <dd>
 <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
 <dd>
 <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
 <dd>
 <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p>
 </dd>
 <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
 <dd>
 <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
 <dd>
 <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
 <dd>
 <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
 </dd>
 <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
 <dd>
 <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
 </dd>
 <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
 <dd>
 <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p>
 </dd>
 <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
 <dd>
 <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p>
 </dd>
</dl>

<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>