[{"data":1,"prerenderedAt":460},["ShallowReactive",2],{"blog-article-/blog/js-array-at-method":3,"blog-surround-/blog/js-array-at-method":452},{"id":4,"title":5,"body":6,"canonical":437,"date":438,"description":439,"extension":440,"featured":441,"image":442,"meta":443,"navigation":246,"ogImage":444,"path":445,"provider":446,"published":246,"seo":447,"stem":448,"tags":449,"url":437,"__hash__":451},"blog/blog/js-array-at-method.md","The JavaScript Array.at() method",{"type":7,"value":8,"toc":424},"minimark",[9,18,21,26,29,34,37,62,66,73,95,99,102,105,127,131,134,156,159,166,185,188,192,195,374,385,391,395,403,420],[10,11,12,13,17],"p",{},"Often we want to return a single item from an array. There are a few methods of doing this including the ",[14,15,16],"code",{},"at(index)"," method which returns the item at a given index. It takes both positive and negative values where negatives values count back from the last item in the array.",[10,19,20],{},"Let's take a look and compare this method with the methods we might be more familiar with.",[22,23,25],"h2",{"id":24},"getting-the-index-of-the-first-item-in-an-array","Getting the index of the first item in an array",[10,27,28],{},"Using square bracket notation is also still perfectly fine and to get the first item in an array you can do:",[30,31,33],"h3",{"id":32},"using-the-array-length-method","Using the array length method",[10,35,36],{},"You an use the square brackets passing in the index of 0 to get the first item in the array.",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-js shiki shiki-themes github-light github-dark","array[0]\n","js","",[14,45,46],{"__ignoreMap":43},[47,48,51,55,59],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sVt8B","array[",[47,56,58],{"class":57},"sj4cs","0",[47,60,61],{"class":53},"]\n",[30,63,65],{"id":64},"using-the-at-method","Using the at method",[10,67,68,69,72],{},"You can also use the ",[14,70,71],{},"at()"," method passing in the index of 0 to get the first item in the array.",[38,74,76],{"className":40,"code":75,"language":42,"meta":43,"style":43},"array.at(0)\n",[14,77,78],{"__ignoreMap":43},[47,79,80,83,87,90,92],{"class":49,"line":50},[47,81,82],{"class":53},"array.",[47,84,86],{"class":85},"sScJk","at",[47,88,89],{"class":53},"(",[47,91,58],{"class":57},[47,93,94],{"class":53},")\n",[22,96,98],{"id":97},"getting-the-index-of-the-last-item-in-an-array","Getting the index of the last item in an array",[30,100,33],{"id":101},"using-the-array-length-method-1",[10,103,104],{},"The real difference is when you want to get the last number in the array. It is very common to use the length property of an array and subtract 1, to get the last item in the array. We use a -1 because arrays start at 0 and not 1.",[38,106,108],{"className":40,"code":107,"language":42,"meta":43,"style":43},"array[array.length - 1]\n",[14,109,110],{"__ignoreMap":43},[47,111,112,115,118,122,125],{"class":49,"line":50},[47,113,114],{"class":53},"array[array.",[47,116,117],{"class":57},"length",[47,119,121],{"class":120},"szBVR"," -",[47,123,124],{"class":57}," 1",[47,126,61],{"class":53},[30,128,130],{"id":129},"using-the-slice-method","Using the slice method",[10,132,133],{},"Or you could use the slice method where you can slice from one index to another to get the value you want. However this method will return an array which might not necessarily be what you want.",[38,135,137],{"className":40,"code":136,"language":42,"meta":43,"style":43},"array.slice(-1)\n",[14,138,139],{"__ignoreMap":43},[47,140,141,143,146,148,151,154],{"class":49,"line":50},[47,142,82],{"class":53},[47,144,145],{"class":85},"slice",[47,147,89],{"class":53},[47,149,150],{"class":120},"-",[47,152,153],{"class":57},"1",[47,155,94],{"class":53},[30,157,65],{"id":158},"using-the-at-method-1",[10,160,161,162,165],{},"Although there is nothing wrong with using the method above we can use a shorter syntax using the at() method and passing in the value of -1 without having to use the ",[14,163,164],{},"array.length",".",[38,167,169],{"className":40,"code":168,"language":42,"meta":43,"style":43},"array.at(-1)\n",[14,170,171],{"__ignoreMap":43},[47,172,173,175,177,179,181,183],{"class":49,"line":50},[47,174,82],{"class":53},[47,176,86],{"class":85},[47,178,89],{"class":53},[47,180,150],{"class":120},[47,182,153],{"class":57},[47,184,94],{"class":53},[10,186,187],{},"Again both methods are fine so use the one you prefer.",[22,189,191],{"id":190},"example","Example",[10,193,194],{},"To see a real example in use, let's create an array of food and then find the index of the first and last item in the array.",[38,196,198],{"className":40,"code":197,"language":42,"meta":43,"style":43},"const food = ['pizza', 'burgers', 'sushi', 'steak', 'salad']\n\nconsole.log(food[0]) // pizza\n\nconsole.log(food.at(0)) // pizza\n\nconsole.log(food[food.length - 1]) // salad\n\nconsole.log(food.slice(-1)) // [salad]\n\nconsole.log(food.at(-1)) // salad\n",[14,199,200,241,248,269,274,295,300,321,326,348,353],{"__ignoreMap":43},[47,201,202,205,208,211,214,218,221,224,226,229,231,234,236,239],{"class":49,"line":50},[47,203,204],{"class":120},"const",[47,206,207],{"class":57}," food",[47,209,210],{"class":120}," =",[47,212,213],{"class":53}," [",[47,215,217],{"class":216},"sZZnC","'pizza'",[47,219,220],{"class":53},", ",[47,222,223],{"class":216},"'burgers'",[47,225,220],{"class":53},[47,227,228],{"class":216},"'sushi'",[47,230,220],{"class":53},[47,232,233],{"class":216},"'steak'",[47,235,220],{"class":53},[47,237,238],{"class":216},"'salad'",[47,240,61],{"class":53},[47,242,244],{"class":49,"line":243},2,[47,245,247],{"emptyLinePlaceholder":246},true,"\n",[47,249,251,254,257,260,262,265],{"class":49,"line":250},3,[47,252,253],{"class":53},"console.",[47,255,256],{"class":85},"log",[47,258,259],{"class":53},"(food[",[47,261,58],{"class":57},[47,263,264],{"class":53},"]) ",[47,266,268],{"class":267},"sJ8bj","// pizza\n",[47,270,272],{"class":49,"line":271},4,[47,273,247],{"emptyLinePlaceholder":246},[47,275,277,279,281,284,286,288,290,293],{"class":49,"line":276},5,[47,278,253],{"class":53},[47,280,256],{"class":85},[47,282,283],{"class":53},"(food.",[47,285,86],{"class":85},[47,287,89],{"class":53},[47,289,58],{"class":57},[47,291,292],{"class":53},")) ",[47,294,268],{"class":267},[47,296,298],{"class":49,"line":297},6,[47,299,247],{"emptyLinePlaceholder":246},[47,301,303,305,307,310,312,314,316,318],{"class":49,"line":302},7,[47,304,253],{"class":53},[47,306,256],{"class":85},[47,308,309],{"class":53},"(food[food.",[47,311,117],{"class":57},[47,313,121],{"class":120},[47,315,124],{"class":57},[47,317,264],{"class":53},[47,319,320],{"class":267},"// salad\n",[47,322,324],{"class":49,"line":323},8,[47,325,247],{"emptyLinePlaceholder":246},[47,327,329,331,333,335,337,339,341,343,345],{"class":49,"line":328},9,[47,330,253],{"class":53},[47,332,256],{"class":85},[47,334,283],{"class":53},[47,336,145],{"class":85},[47,338,89],{"class":53},[47,340,150],{"class":120},[47,342,153],{"class":57},[47,344,292],{"class":53},[47,346,347],{"class":267},"// [salad]\n",[47,349,351],{"class":49,"line":350},10,[47,352,247],{"emptyLinePlaceholder":246},[47,354,356,358,360,362,364,366,368,370,372],{"class":49,"line":355},11,[47,357,253],{"class":53},[47,359,256],{"class":85},[47,361,283],{"class":53},[47,363,86],{"class":85},[47,365,89],{"class":53},[47,367,150],{"class":120},[47,369,153],{"class":57},[47,371,292],{"class":53},[47,373,320],{"class":267},[10,375,376,377,384],{},"Paste it in your console and see for yourself or play around with the indexes to get different results Or checkout the ",[378,379,383],"a",{"href":380,"rel":381},"https://codepen.io/debs-obrien/pen/vYdXxdy",[382],"nofollow","codepen"," I created.",[10,386,387,388,390],{},"Again all methods work perfectly fine so choose the one you prefer. The ",[14,389,71],{}," method seems quite nice and easy to remember too and it has full browser support too. (Unless you need Internet Explorer or Opera for Android).",[22,392,394],{"id":393},"learn-more","Learn More",[10,396,397,398],{},"To read more about it check out the MDn docs for ",[378,399,402],{"href":400,"rel":401},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at",[382],"Array.prototype.at()",[404,405,406,414],"ul",{},[407,408,409,410],"li",{},"Check out my post on the ",[378,411,413],{"href":412},"/blog/js-array-filter-method","array filter method",[407,415,409,416],{},[378,417,419],{"href":418},"/blog/js-array-map-method","array map method",[421,422,423],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":43,"searchDepth":243,"depth":243,"links":425},[426,430,435,436],{"id":24,"depth":243,"text":25,"children":427},[428,429],{"id":32,"depth":250,"text":33},{"id":64,"depth":250,"text":65},{"id":97,"depth":243,"text":98,"children":431},[432,433,434],{"id":101,"depth":250,"text":33},{"id":129,"depth":250,"text":130},{"id":158,"depth":250,"text":65},{"id":190,"depth":243,"text":191},{"id":393,"depth":243,"text":394},null,"2022-05-12","Often we want to return a single item from an array. There are a few methods of doing this including the `at(index)` method which returns the item at a given index.","md",false,"photo-1562755524-cb3e786bee18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fGF0fGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=800&q=60",{},"https://images.unsplash.com/photo-1562755524-cb3e786bee18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fGF0fGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=800&q=60","/blog/js-array-at-method","imgix",{"title":5,"description":439},"blog/js-array-at-method",[450],"javascript","lelBR9nhd0WTYc-CUbXUT1MnFiCOE7WM_uUo9mo8Y4c",[453,457],{"title":454,"path":455,"stem":456,"children":-1},"Fixing Diversity in Tech","/blog/fixing-diversity-in-tech","blog/fixing-diversity-in-tech",{"title":458,"path":412,"stem":459,"children":-1},"The JavaScript Array.filter() method","blog/js-array-filter-method",1790839748573]