Frontend

20-блог: JavaScript даўамы: Функция дегенимиз не? 3-бөлим / JavaScript dawamı: Funkciya degenimiz ne? 3-bólim

JavaScript функцияларын жәриялаў, иске қосыў, параметрлер ҳәм return гилт сөзинен пайдаланыўды мысаллар менен үйренемиз.

Бүгинги блогымызда JavaScript тилинде функциялар не екени ҳаққында түсиндиремен. Инглизшесине function деп атайды. Python, C++, Kotlin ҳәм басқа бағдарламаластырыў тиллеринде де функциялар бар. Жазыў усылы басқаша болыўы мүмкин, мәниси дерлик бирдей.

Демек, функция дегенимиз не?

Функциялар бул ҳәр қандай бағдарламаластырыў тилиниң, соның менен бирге JavaScript тилиниң ең тийкарғы фундаментлеринен бири.

Функция бул бир неше көрсетпелерден қуралып, белгили бир тапсырманы орынлаў ушын жазылады. Олар жазылған кодты (коудты) әдеўир шөлкемлестирип, қайта қолланыў мүмкиншилигин жаратады.

Оларды мини-бағдарлама десек те болады. Үлкен программаның ишиндеги өз алдына тапсырманы орынлап бериўши кишкене-кишкене программалардай гәп. Усылай бир қанша (жүзлеген, мыңлаған) функциялар жыйналып үлкен бир программаны жаратады.

Әлбетте, булай түсиндирсең ҳеш ким бирден уғып кетпейди.

Мысал менен түсиндирейик.

Тек сәлемлесип билетуғын программа жаратпақшымыз. Онда көзимизди жумып отырып жаза алады екенбиз.

Сәлемлесетуғын функция иллюстрациясы

Бул программада тек бир функция болады. Усы функцияны JavaScript тилинде жазып көрейик.

function greet() {
  console.log("Salem!");
}

Яки, ҳошласатуғын программа жазып көрейик.

function sayGoodbye() {
  console.log("Goodbye!");
}

Бир функциядан ибарат болса да, өз алдына программа болыўы мүмкин.

Функцияларды қалай мәлимлеймиз?

JavaScript тилинде функцияларды жәриялаўдың бир қанша усылы бар.

1. function деген гилт сөзден пайдаланамыз

JavaScript тилинде функциялар көбинесе function деп аталатуғын гилт сөзден басланып жазылады. Әлбетте, function деген сөзден кейин сол функцияның аты ҳәм қаўсырма қойылыўы керек.

function greet() {
  console.log("Сәлем!!!");
}

Яки, майданды есаплайтуғын функция жазып көрейик. Мектепте геометрия сабағында майданды қалай есаплаўды үйренгениңиз ядыңызда шығар.

Ени ҳәм узынлығы көрсетилген майдан иллюстрациясы
function calculateArea(width, height) {
  return width * height;
}

Бул жерде, width менен height төрт тәрепли жердиң енине ҳәм кесесине узынлығын билдиреди. Екеўиниң көбеймеси майданға тең.

2. const деген гилт сөз арқалы мәлимлеймиз

const бул JavaScript тилинде айныўшы (variable) жәриялағанда/жаратқанда қолланылатуғын гилт сөз есапланады. let деген гилт сөзден де пайдаланып айныўшыны жәриялай алатуғынымызды алдыңғы блогларда үйренген едик.

let name = "Гүлайым";
let age = 38;

const деген гилт сөз арқалы айныўшыны жәриялаўдың бир себеби, сол айныўшыға кейин басқа мәнис қайтадан берилмеўин белгилеў болып есапланады. const сөзиниң мәниси бул турақлы.

Демек, басқа мәниске қайтадан өзгертиўди қәлемеген айныўшыларды жәриялағанда қолланамыз. Бирақ object яки array const пенен жәрияланған болса, оның ишиндеги мағлыўматлар өзгертилиўи мүмкин. Өзгермейтуғыны сол айныўшының басқа мәниске қайта байланыстырылыўы.

Тап сондай майданды есаплайтуғын яки сәлемлесетуғын функцияны да const пенен жәриялаўға болады.

Сол функцияны жәриялап, бир айныўшының ишине жайғастырамыз.

const greet = function() {
  console.log("Salem!");
};
const calculateArea = function(width, height) {
  return width * height;
};

Көрип турғаныңыздай, бир функцияны еки түрли жол менен жаза алдық.

function greet() {
  console.log("Сәлем!");
}
const greet = function() {
  console.log("Сәлем!");
};

Екеўи де шақырылғанда бирдей нәтийже береди. Бирақ олардың арасында hoisting сияқлы техникалық парықлар бар. Қайсы биринен пайдаланыў бул өз қәлеўиңизге (ҳәм зәрүрлигиңизге) байланыслы.

Функцияны еки түрли жәриялаў усылы

Функцияларды қалай иске қосамыз?

Функцияны әмелге асырыў жүдә аңсат. Сол функцияның атын жазып, изинен қаўсырманы жазсақ болды.

Мәселен:

greet();
// Нәтийжеси: Salem!
 
sayGoodbye();
// Нәтийжеси: Goodbye!

Бирақ жоқарыдағы майданды есаплаў функциясын қалай иске қосамыз? Оны calculateArea() деп ҳеш мәниссиз иске қоссақ, width ҳәм height undefined болады. Оларды көбейткенде нәтийже NaN болып шығады.

calculateArea функциясы параметр қабыл ететуғын функция есапланады.

Функция параметрлери дегенимиз не?

Функцияны жәриялағанда қаўсырманың ишине жазылған атларды параметр деп есаплайды. Жоқарыдағы width ҳәм height параметрлер болады.

Мәселен, майданды есаплаў деген функциямыз бар. Бирақ, ол "аспаннан алып" майданды есаплап бере алмайды.

Майданды есаплаў функциясы сан сорап турған иллюстрация

Майданды есаплаў ушын майданның енине, кесесине узынлығын билиў зәрүр. Сол еки мәнисти функцияны шақырған ўақытта қаўсырманың ишине жазамыз. Шақырыў ўақтында берилген 100 ҳәм 160 мәнислери аргументлер деп аталады.

calculateArea(100, 160);

Функцияны иске қосып, 16 000 деген жуўапты аламыз. Егер, енине 100 метр, кесесине 160 метр болса, сол жердиң майданы 16 000 метр квадрат болады.

Функциядағы return гилт сөзи бул не?

return бул инглизше сөз болып, қарақалпақшасына мәниси "қайтарыў, қайтыў, жеткериў" болады. Python тилинде де return термининен пайдаланады. Дерлик, көпшилик бағдарламаластырыў тиллеринде return термини бар.

return ағымдағы функцияның жумысын тоқтатып, көрсетилген мәнисти функция шақырылған жерге қайтарады. Ол пүтин программаны тоқтатпайды.

Майданды есаплаў функциясында да майданды есаплап болғаннан кейин нәтийжени қайтарып, функцияның жумысын тоқтат деген көрсетпени бериў ушын return деген гилт сөзден пайдаланып атырмыз.

const calculateArea = function(width, height) {
  return width * height;
};

Мәселен, төмендегидей еки санды қосатуғын функцияны жазып көрейик.

a ҳәм b санларын қосып болып, қосындыны sum деген айныўшының (variable) ишинде сақлайық.

Кейин оны console.log() менен экранға шығарамыз.

function add(a, b) {
  return a + b;
}
 
let sum = add(5, 3);
 
console.log(sum);
// Нәтийжеси: 8

Төменде функциялар туўралы бир қанша мысаллар келтирип өттим.

1. Атыңызды айтып, сәлемлесетуғын мини-программа

function greetUser(name) {
  console.log("Salem, " + name + "!");
}

Функцияны иске қосыў:

greetUser("Azamat");
// Нәтийжеси: Salem, Azamat!
 
greetUser("Qumar");
// Нәтийжеси: Salem, Qumar!

2. Жуп санба, тақ санба анықлайтуғын функция

function checkEvenOdd(number) {
  if (number % 2 === 0) {
    console.log(number + " жуп сан есапланады.");
  } else {
    console.log(number + " тақ сан есапланады.");
  }
}

Функцияны иске қосыў:

checkEvenOdd(4);
// Нәтийжеси: 4 жуп сан есапланады.
 
checkEvenOdd(7);
// Нәтийжеси: 7 тақ сан есапланады.

3. Еки санның ишинде қайсысы үлкенин анықлайтуғын функция

function findMax(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}
 
let maxNumber = findMax(10, 20);
 
console.log("The maximum number is " + maxNumber);
// Нәтийжеси: The maximum number is 20