Essential utility functions for common programming tasks - debounce, throttle, array manipulation, and more

Utilities & Helper Functions

YakaJS includes a comprehensive collection of utility functions for common programming tasks, making your code cleaner and more efficient.

Safe Mode

`_.safe()`

Enable safe mode to prevent crashes when elements don't exist. Perfect for dynamic content and conditional rendering.

// Without safe mode - throws error if element missing_('#nonexistent').hide();  // Error!// With safe mode - fails gracefully_('#nonexistent').safe().hide().fadeIn();  // No error!// Perfect for dynamic contentconst userId = getCurrentUser();_(`#user-${userId}`).safe().addClass('active');// Chain multiple operations safely_('#maybe-exists')    .safe()    .addClass('highlighted')    .fadeIn(300)    .css('color', 'red');

Returns: YakaJS object for chaining

Use Cases:

Working with dynamically loaded content
Optional UI elements
User-specific features
A/B testing scenarios

Performance Utilities

`_.debounce(fn, delay)`

Debounce function calls to limit execution frequency. Perfect for search inputs and resize handlers.

// Search as user types (with delay)const searchProducts = _.debounce(function(query) {    _.get('/api/search', { q: query })        .then(results => displayResults(results));}, 300);  // Wait 300ms after user stops typing_('#search').on('input', function() {    searchProducts(_(this).val());});// Window resize handlerconst handleResize = _.debounce(function() {    console.log('Window resized to:', window.innerWidth);    adjustLayout();}, 250);_(window).on('resize', handleResize);

Parameters:

fn (Function) - Function to debounce
delay (Number) - Delay in milliseconds

Returns: Debounced function

How it works: Waits until the specified time has passed since the last call before executing.

`_.throttle(fn, limit)`

Throttle function calls to execute at most once per time period. Perfect for scroll handlers.

// Scroll handler (max once per 100ms)const handleScroll = _.throttle(function() {    const scrollTop = _(window).scrollTop();    console.log('Scroll position:', scrollTop);        if (scrollTop > 100) {        _('#back-to-top').fadeIn();    } else {        _('#back-to-top').fadeOut();    }}, 100);_(window).on('scroll', handleScroll);// Mouse move trackerconst trackMouse = _.throttle(function(e) {    console.log('Mouse at:', e.clientX, e.clientY);}, 50);_(document).on('mousemove', trackMouse);

Parameters:

fn (Function) - Function to throttle
limit (Number) - Minimum time between calls (ms)

Returns: Throttled function

How it works: Ensures function is called at most once per specified time period, even if triggered multiple times.

Array Utilities

`_.chunk(array, size)`

Split array into chunks of specified size.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];const chunks = _.chunk(numbers, 3);// [[1, 2, 3], [4, 5, 6], [7, 8, 9]]// Paginate itemsconst items = getItems();  // 100 itemsconst pages = _.chunk(items, 10);  // 10 pages of 10 items eachpages.forEach((page, index) => {    console.log(`Page ${index + 1}:`, page);});

Parameters:

array (Array) - Array to split
size (Number) - Chunk size

Returns: Array of arrays

`_.uniq(array)`

Remove duplicate values from array.

const numbers = [1, 2, 2, 3, 3, 3, 4];const unique = _.uniq(numbers);// [1, 2, 3, 4]// Remove duplicate user IDsconst userIds = [101, 102, 101, 103, 102];const uniqueIds = _.uniq(userIds);// [101, 102, 103]// Works with objects (by reference)const items = [{id: 1}, {id: 2}, {id: 1}];const uniqueItems = _.uniq(items);

Parameters:

array (Array) - Array with potential duplicates

Returns: Array with unique values

`_.flatten(array, depth)`

Flatten nested arrays.

const nested = [1, [2, 3], [4, [5, 6]]];const flat = _.flatten(nested);// [1, 2, 3, 4, [5, 6]]// Deep flattenconst deepFlat = _.flatten(nested, Infinity);// [1, 2, 3, 4, 5, 6]// Flatten one levelconst shallow = _.flatten([[1, 2], [3, 4]], 1);// [1, 2, 3, 4]

Parameters:

array (Array) - Nested array
depth (Number, optional) - Depth to flatten (default: 1)

Returns: Flattened array

Object Utilities

`_.extend(target, ...sources)`

Merge objects (shallow copy).

const defaults = { color: 'blue', size: 'medium' };const options = { size: 'large', weight: 'bold' };const merged = _.extend({}, defaults, options);// { color: 'blue', size: 'large', weight: 'bold' }// Merge into targetconst config = { theme: 'dark' };_.extend(config, { language: 'en', timezone: 'UTC' });// config is now { theme: 'dark', language: 'en', timezone: 'UTC' }

Parameters:

target (Object) - Target object (modified)
sources (Object[]) - Source objects to merge

Returns: Target object

`_.deepClone(object)`

Create deep copy of object.

const original = {    user: {        name: 'John',        address: {            city: 'New York',            zip: '10001'        }    },    items: [1, 2, 3]};const copy = _.deepClone(original);copy.user.address.city = 'Boston';console.log(original.user.address.city);  // 'New York' (unchanged)console.log(copy.user.address.city);      // 'Boston'

Parameters:

object (Object) - Object to clone

Returns: Deep copy of object

String Utilities

`_.capitalize(string)`

Capitalize first letter of string.

_.capitalize('hello world');  // 'Hello world'_.capitalize('HELLO');        // 'HELLO'_.capitalize('hello');        // 'Hello'

`_.truncate(string, length, suffix)`

Truncate string to specified length.

const text = 'This is a very long text that needs truncation';_.truncate(text, 20);  // 'This is a very long...'_.truncate(text, 20, '…');  // 'This is a very long…'// Product descriptionsconst description = getProductDescription();_('#preview').text(_.truncate(description, 100));

Parameters:

string (String) - String to truncate
length (Number) - Maximum length
suffix (String, optional) - Suffix to add (default: '...')

Returns: Truncated string

`_.slugify(string)`

Convert string to URL-friendly slug.

_.slugify('Hello World!');           // 'hello-world'_.slugify('YakaJS is AWESOME!!!');   // 'yakajs-is-awesome'_.slugify('  Multiple   Spaces  ');  // 'multiple-spaces'// Create URL from titleconst title = 'Getting Started with YakaJS';const url = `/blog/${_.slugify(title)}`;// '/blog/getting-started-with-yakajs'

Parameters:

string (String) - String to slugify

Returns: URL-friendly slug

Number Utilities

`_.random(min, max)`

Generate random number in range.

_.random(1, 10);      // Random number between 1-10_.random(0, 100);     // Random number between 0-100_.random(5, 5);       // Always returns 5// Random colorconst r = _.random(0, 255);const g = _.random(0, 255);const b = _.random(0, 255);const color = `rgb(${r}, ${g}, ${b})`;// Random delayconst delay = _.random(100, 500);setTimeout(doSomething, delay);

Parameters:

min (Number) - Minimum value (inclusive)
max (Number) - Maximum value (inclusive)

Returns: Random number

`_.clamp(number, min, max)`

Clamp number to range.

_.clamp(5, 0, 10);    // 5_.clamp(-5, 0, 10);   // 0 (clamped to min)_.clamp(15, 0, 10);   // 10 (clamped to max)// Keep value in boundsconst volume = _.clamp(userVolume, 0, 100);const progress = _.clamp(percentage, 0, 100);

Parameters:

number (Number) - Number to clamp
min (Number) - Minimum value
max (Number) - Maximum value

Returns: Clamped number

URL Utilities

`_.param(object)`

Convert object to URL query string.

const params = {    search: 'yakajs',    page: 2,    sort: 'date'};const query = _.param(params);// 'search=yakajs&page=2&sort=date'// Build URLconst url = `/api/search?${_.param({ q: 'test', limit: 10 })}`;// '/api/search?q=test&limit=10'

Parameters:

object (Object) - Object to serialize

Returns: URL query string

`_.deparam(string)`

Parse URL query string to object.

const query = 'search=yakajs&page=2&sort=date';const params = _.deparam(query);// { search: 'yakajs', page: '2', sort: 'date' }// Parse current URLconst currentParams = _.deparam(window.location.search.slice(1));

Parameters:

string (String) - Query string to parse

Returns: Object with parameters

Type Checking

`_.isArray(value)`

Check if value is an array.

_.isArray([1, 2, 3]);      // true_.isArray('string');       // false_.isArray({});             // false_.isArray(null);           // false

`_.isObject(value)`

Check if value is an object.

_.isObject({});            // true_.isObject([]);            // false (arrays excluded)_.isObject(null);          // false_.isObject(new Date());    // true

`_.isFunction(value)`

Check if value is a function.

_.isFunction(() => {});            // true_.isFunction(function() {});       // true_.isFunction('string');            // false

`_.isString(value)`, `_.isNumber(value)`, `_.isBoolean(value)`

Type checking utilities.

_.isString('hello');       // true_.isNumber(42);            // true_.isBoolean(true);         // true

Timing Utilities

`_.delay(fn, wait, ...args)`

Execute function after delay.

_.delay(function() {    console.log('Executed after 2 seconds');}, 2000);// With arguments_.delay(function(name) {    console.log('Hello, ' + name);}, 1000, 'John');// Animation sequence_.delay(() => _('#box1').fadeIn(), 0);_.delay(() => _('#box2').fadeIn(), 500);_.delay(() => _('#box3').fadeIn(), 1000);

Parameters:

fn (Function) - Function to execute
wait (Number) - Delay in milliseconds
args (Any) - Arguments to pass to function

Returns: Timeout ID

Best Practices

Use debounce for search inputs:

const search = _.debounce(performSearch, 300);

Use throttle for scroll handlers:

const scroll = _.throttle(handleScroll, 100);

Enable safe mode for dynamic content:
_('#dynamic-element').safe().show();
Cache computed values:
const uniqueItems = _.uniq(items);

Use type checking before operations:

if (_.isArray(data)) {    data.forEach(processItem);}

Next Steps

Performance Optimization - Virtual scroll, lazy loading
Storage - LocalStorage and IndexedDB helpers
Security - Input sanitization and XSS protection
Premium Features - Eye tracking, rich editor, tours

Utilities & Helper Functions

Utilities & Helper Functions

On this page