[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions [Back]  [Original]

- JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

JavaScript . JavaScript (procedure) , . .

JavaScript .

In this article

( ) .

  • , .
  • JavaScript . { /* ... */ }

, square .

js
function square(number) {
  return number * number;
}

square number . (number) . return .

js
return number * number;

number . .

.

js
function myFunc(theObject) {
  theObject.make = "Toyota";
}

const mycar = {
  make: "Honda",
  model: "Accord",
  year: 1998,
};

// `x`  "Honda".
const x = mycar.make;

// `make`    `Toyota` .
myFunc(mycar);

// `y`  "Toyota".
const y = mycar.make;

(Array) .

js
function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

(function expression) .

. . , square .

js
const square = function (number) {
  return number * number;
};
const x = square(4); // `x`   16 .

. , .

js
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3));

. , map .

js
function map(fn, arr) {
  const result = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    result[i] = fn(arr[i]);
  }
  return result;
}

.

js
function map(fn, arr) {
  const result = new Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    result[i] = fn(arr[i]);
  }
  return result;
}

const fn = function (x) {
  return x * x * x;
};

const numbers = [0, 1, 2, 5, 10];
const cube = map(fn, numbers);
console.log(cube);

[0, 1, 8, 125, 1000] .

JavaScript . , num 0 myFunc .

js
let myFunc;

if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = "Toyota";
  };
}

eval() Function .

(method) . .

. .

. square .

js
square(5);

5 . 25 .

. . ( .)

( ).

js
console.log(square); // square  undefined  .
console.log(square(5)); // TypeError: square  .
square = function (n) {
  return n * n;
};

. . showProps() .

. , .

js
function factorial(n) {
  if (n == 0 || n == 1) return 1;
  else return n * factorial(n - 1);
}

1 5 .

js
const a = factorial(1); // a  1 .
const b = factorial(2); // b  2 .
const c = factorial(3); // c  6 .
const d = factorial(4); // d  24 .
const e = factorial(5); // e  120 .

. , , .

(Function ) . apply() .

js
console.log(square(5)); // `25`

function square(n) {
  return n * n;
}

square . JavaScript .

js
//      .
function square(n) {
  return n * n;
}

console.log(square(5)); // `25`

. . .

js
console.log(square); // ReferenceError:    `square`   .

const square = function (n) {
  return n * n;
};

, . .

, . , .

js
//     .
const num1 = 20;
const num2 = 3;
const name = "Chamakh";

//     .
function multiply() {
  return num1 * num2;
}

multiply(); // 60

//   
function getScore() {
  const num1 = 2;
  const num2 = 3;

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

  return add();
}

getScore(); // "Chamakh scored 5"

. .

  1. arguments.callee

, .

js
var foo = function bar() {
  //   .
};

.

  1. bar()
  2. arguments.callee()
  3. foo()

. . , ( ) .

, .

js
var x = 0;
while (x < 10) {
  //  : "x < 10"
  //  .
  x++;
}
js
function loop(x) {
  if (x >= 10)
    // "x >= 10"    ("!(x < 10)" )
    return;
  //  .
  loop(x + 1); //  
}
loop(0);

. , DOM .

js
function walkTree(node) {
  if (node == null) {
    return;
  }
  //    .
  for (var i = 0; i < node.childNodes.length; i++) {
    walkTree(node.childNodes[i]);
  }
}

loop , .

.

( ) . .

js
function foo(i) {
  if (i < 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

. () () .

. ( "") ( ).

, "" . , .

,

  • .

  • : , .

.

js
function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // 13
b = addSquares(3, 4); // 25
c = addSquares(4, 5); // 41

, .

js
function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
//    3   .
fn_inside = outside(3);
result = fn_inside(5); // 8

result1 = outside(3)(5); // 8

inside x . . , outside . inside .

, .

. .

  • A B , B C .
  • B, C . B A, C B .
  • C A B A .

, . . ( "" .)

.

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)

, C B y A x , .

  1. B A . , B A .
  2. C B .
  3. C B B A , C A . C A . , C A .

A C B . C B .

, . . , . (scope chain). , . .

js
function outside() {
  var x = 10;
  function inside(x) {
    return x * 2;
  }
  return inside;
}
result = outside()(20); // 10  20 

x * 2 , inside x outside x . {inside, outside, } . inside x outside x , 20(inside x) 10(outside x) .

JavaScript . JavaScript ( ) , ( ) .

. .

, , . .

js
const pet = function (name) {
  //   'name'   .
  const getName = function () {
    return name; //     'name'  .
  };
  return getName; //   ,   .
};

const myPet = pet("Vivie");

myPet(); // "Vivie" .

. .

js
const createPet = function (name) {
  let sex;

  const pet = {
    // `setName(newName)`  
    // `setName: function (newName)` .
    setName(newName) {
      name = newName;
    },

    getName() {
      return name;
    },

    getSex() {
      return sex;
    },

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

  return pet;
};

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

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

name , . . '' '' . .

js
const getCode = (function () {
  const secureCode = "0]Eal(eh&2"; //       .

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

getCode(); // `secureCode` .

: !

, . ( . .)

js
//    `name` .
const createPet = function (name) {
  return {
    //     `name` .
    setName(name) {
      //     `name`   ?
      name = name;
    },
  };
};

(arguments)

. , .

js
arguments[i];

i 0 . arguments[0] . arguments.length .

(arguments) , . . arguments.length , (arguments) .

, . . .

js
function myConcat(separator) {
  //  
  let result = "";
  // arguments  
  for (let i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
  }
  return result;
}

, "" .

js
// "red, orange, blue, " .
myConcat(", ", "red", "orange", "blue");

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

// "sage. basil. oregano. pepper. parsley. " .
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

: (arguments) . . .

Function .

ECMAScript 2015 (parameter syntax) .

JavaScript undefined . . .

, undefined .

b , a * b b undefined multiply NaN . .

js
// ECMAScript 2015 
function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a * b;
}

multiply(5); // 5

. b 1 .

js
// ECMAScript 2015 
function multiply(a, b = 1) {
  return a * b;
}

multiply(5); // 5

, .

.

, 2 . . (arrow) .

js
function multiply(multiplier, ...theArgs) {
  return theArgs.map((x) => multiplier * x);
}

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

( (fat arrow) ) this . . hacks.mozilla.org "ES6 In Depth: Arrow functions" .

this .

. .

js
var a = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

var a2 = a.map(function (s) {
  return s.length;
});
console.log(a2); // logs [8, 6, 7, 9]

//   
var a3 = a.map((s) => s.length);
console.log(a3); // logs [8, 6, 7, 9]

this

new this ( new , , " " ). .

js
function Person() {
  // `Person()`  `this`  .
  this.age = 0;

  setInterval(function growUp() {
    //   `growUp()`  `this`   .
    //  `Person()`    `this` .
    this.age++;
  }, 1000);
}

var p = new Person();

ECMAScript 3/5 this .

js
function Person() {
  var self = this; // `self`  `that`   .
  //       .
  self.age = 0;

  setInterval(function growUp() {
    //    `self`  .
    self.age++;
  }, 1000);
}

this growUp() , .

this . . setInterval this this .

js
function Person() {
  this.age = 0;

  setInterval(() => {
    // `this` person  .
    this.age++;
  }, 1000);
}

var p = new Person();

JavaScript :


Web Proxy Viewer  |  New URL  |  Original Page