JavaScript үндэс / Arrow функц

Arrow функц

Өмнөх хичээлд function түлхүүр үгээр функц бичиж сурсан. JavaScript-д үүний богино, орчин үеийн хэлбэр байдаг — arrow функц (=>). Орчин үеийн JavaScript код дахь функцуудын дийлэнх нь arrow хэлбэрт байдаг тул энэ хичээл маш практик чухал.

Arrow функцийн бүтэц

Энгийн функцийг arrow функц болгон хэрхэн бичдгийг харьцуулж харцгаая:

javascript
// Энгийн функц
function greet(name) {
  return `Сайн байна уу, ${name}!`;
}

// Arrow функц — яг адил үйлдэл
const greet = (name) => {
  return `Сайн байна уу, ${name}!`;
};

console.log(greet("Болд")); // Сайн байна уу, Болд!

function үгийн оронд => (fat arrow) тэмдэглэгээ ашиглана. Функцийг хувьсагчид оноож хадгална.

Богино хэлбэрүүд

Arrow функцийн бас нэг давуу тал нь нөхцлөөс хамааран маш товч хэлбэрт бичиж болдог явдал юм.

Нэг параметр — хашилт алгасаж болно:

javascript
// Хашилттай
const double = (n) => {
  return n * 2;
};

// Хашилтгүй — нэг параметр үед
const double = (n) => {
  return n * 2;
};

console.log(double(5)); // 10

Нэг мөрт return — хаалт ба return алгасна:

javascript
// Бүтэн хэлбэр
const square = (n) => {
  return n * n;
};

// Богино хэлбэр — нэг илэрхийлэл байвал
const square = (n) => n * n;

console.log(square(4)); // 16

Параметргүй функц — хоосон хашилт заавал байна:

javascript
const sayHello = () => console.log("Сайн уу!");

sayHello(); // Сайн уу!

this түлхүүр үгтэй ялгаа

Arrow функцийн энгийн функцтэй нэг чухал ялгаа байдаг: arrow функц өөрийн this утга үүсгэдэггүй, харин гаднах this-г өвлөдөг. Энэ нь object-н method болон callback бичихэд маш чухал.

javascript
const timer = {
  seconds: 0,

  // Энгийн функц — this нь тодорхойгүй болдог
  startWrong: function () {
    setInterval(function () {
      this.seconds++; // ❌ this нь timer биш!
      console.log(this.seconds);
    }, 1000);
  },

  // Arrow функц — this нь timer объект хэвээр
  startCorrect: function () {
    setInterval(() => {
      this.seconds++; // ✅ this нь timer
      console.log(this.seconds);
    }, 1000);
  },
};

Одоохондоо энэ ялгааг бүрэн ойлгохгүй байсан ч асуудалгүй — callback болон object хичээлд дахин тайлбарлана.

Array методуудтай хослуулах

Arrow функц нь map, filter, reduce зэрэг array методуудтай хамт хэрэглэхэд маш тохиромжтой — код нь нэг мөртэй, цэвэрхэн болдог.

javascript
const scores = [45, 72, 88, 93, 61, 55];

// Тэнцсэн оноонуудыг шүүнэ (60-аас дээш)
const passed = scores.filter((score) => score >= 60);
console.log(passed); // [72, 88, 93, 61]

// Бүх оноог хоёр дахин нэмнэ
const doubled = scores.map((score) => score * 2);
console.log(doubled); // [90, 144, 176, 186, 122, 110]

map ба filter-г дараагийн хичээлд дэлгэрэнгүй үзнэ — гэхдээ arrow функц хэрхэн кодыг товчлохыг аль хэдийнэ харж байна.

Хэзээ arrow, хэзээ энгийн функц ашиглах вэ?

javascript
// ✅ Arrow — callback, array методод
const evens = [1, 2, 3, 4].filter((n) => n % 2 === 0);

// ✅ Arrow — богино тооцооны функц
const add = (a, b) => a + b;

// ✅ Энгийн функц — object-н method
const player = {
  name: "Болд",
  greet: function () {
    console.log(`Би ${this.name}`); // this зөв ажиллана
  },
};

// ✅ Энгийн функц — том, нарийн төвөгтэй функц
function processLesson(lesson, user, options) {
  // Олон мөрт логик...
}

Arrow функц бол орчин үеийн JavaScript-ийн гол хэрэгсэл. Гэхдээ object-д method бичихдээ энгийн функц ашиглах нь алдаагаас сэргийлдэг.

Дараагийн хичээлд:

Scope — хувьсагч хаана харагдах, хаана харагдахгүй болохыг тодорхойлдог хамрах хүрээний тухай үзнэ. var, let, const-ын scope-ын ялгааг судлана.

← Өмнөх хичээлФункцүүдДараах хичээл →Хамрах хүрээ (Scope)