Modern JavaScript (ES2022)

Array/String .at()

Access elements with negative indices - count from the end!

Find videos you like?

Save to resource drawer for future reference!

What is the .at() Method?

The .at() method lets you access elements with negative indices! Use .at(-1) for the last element,.at(-2) for second-to-last. Works on arrays and strings!

Simpler Than [arr.length - 1]!

Before: arr[arr.length - 1]. Now: arr.at(-1). Much cleaner!

Example 1: Accessing Array Elements

Use positive and negative indices

javascript

code

DarkEditable

const fruits = ['apple', 'banana', 'orange', 'mango', 'grape'];

// Positive indices (from start)
console.log(fruits.at(0));   // "apple" (first)
console.log(fruits.at(1));   // "banana"
console.log(fruits.at(2));   // "orange"

// Negative indices (from end) - The magic!
console.log(fruits.at(-1));  // "grape" (last) ✨
console.log(fruits.at(-2));  // "mango" (second-to-last)
console.log(fruits.at(-3));  // "orange" (third-to-last)

// Old way vs new way
const arr = [10, 20, 30, 40, 50];

// Get last element
console.log(arr[arr.length - 1]);  // 50 (old way)
console.log(arr.at(-1));           // 50 (new way!) ✅

// Get second-to-last
console.log(arr[arr.length - 2]);  // 40 (old way)
console.log(arr.at(-2));           // 40 (new way!) ✅

// Out of bounds returns undefined
console.log(fruits.at(10));   // undefined
console.log(fruits.at(-10));  // undefined

// Works with strings too!
const text = 'Hello';
console.log(text.at(0));   // "H"
console.log(text.at(-1));  // "o" (last char)
console.log(text.at(-2));  // "l"

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for .at()

javascript

code

DarkEditable

// 1. Get last item in a function
function getLastElement(arr) {
  return arr.at(-1);  // Clean and simple!
}

console.log(getLastElement([1, 2, 3, 4, 5]));  // 5

// 2. Working with data from APIs
const userMessages = [
  { id: 1, text: 'Hello' },
  { id: 2, text: 'How are you?' },
  { id: 3, text: 'Good!' }
];

const latestMessage = userMessages.at(-1);
console.log(latestMessage);
// { id: 3, text: 'Good!' }

// 3. Get file extension
function getExtension(filename) {
  const parts = filename.split('.');
  return parts.at(-1);  // Last part is extension
}

console.log(getExtension('document.pdf'));      // "pdf"
console.log(getExtension('image.backup.jpg'));  // "jpg"

// 4. Check last character of string
function endsWithPunctuation(text) {
  const lastChar = text.at(-1);
  return ['.', '!', '?'].includes(lastChar);
}

console.log(endsWithPunctuation('Hello!'));    // true
console.log(endsWithPunctuation('Hello'));     // false

// 5. Get penultimate (second-to-last) element
const scores = [85, 90, 78, 92, 88];
const secondBest = scores.sort((a, b) => b - a).at(1);
console.log(secondBest);  // Second highest score

// 6. Dynamic index from end
function getNthFromEnd(arr, n) {
  return arr.at(-n);
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(getNthFromEnd(numbers, 1));  // 10 (last)
console.log(getNthFromEnd(numbers, 3));  // 8 (third from end)

Console Output

Click "Run Code" to see output here...

.at() vs Bracket Notation

Use .at() When

✅ Need negative indices
✅ Accessing from end of array
✅ Dynamic indices (might be negative)
✅ Cleaner code for last element

Use [] When

✅ Simple positive indices
✅ Performance critical (slightly faster)
✅ Assigning values (can't use .at())
✅ Older browser support needed

Key Takeaways

➖

Negative Indices

Count from the end: -1 is last, -2 is second-to-last

✨

Cleaner Code

Replace arr[arr.length-1] with arr.at(-1)

🔤

Works on Strings

Both arrays and strings support .at()

💡

ES2022

Modern convenience method

Previous Topic

Top-Level Await

Using await at module top level without async wrapper (ES2022).

Next Topic

Object.hasOwn

Safer alternative to hasOwnProperty for checking properties (ES2022).

Ask a Question

Have a question about Array/String .at()? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.