<div id="readability-page-1" class="page"><div itemprop="articleBody">
 

 

 

 <img src="https://user-images.githubusercontent.com/33862991/183242066-2caa0b9b-f9b9-4962-b079-2eecd0ef870f.jpg" alt="출처 : Unsplash - @amyhirschi https://unsplash.com/photos/9EFF087BPXk">
<h3 id="Index"><a href="#Index" title="Index"></a>Index</h3><ul>
<li><a href="#map">Map</a></li>
<li><a href="#filter">Filter</a></li>
<li><a href="#find">Find, FindIndex</a></li>
<li><a href="#indexOf">IndexOf, Includes</a></li>
<li><a href="#sort">Sort</a></li>
<li><a href="#reduce">Reduce</a></li>
<li><a href="#join">Join</a></li>
<li><a href="#reverse">Reverse</a></li>
<li><a href="#slice">Slice</a></li>
<li><a href="#some">Some</a></li>
</ul>
 

<h2 id="Map"><a href="#Map" title="Map"></a><a name="map">Map</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map">MDN - Array.prototype.map()</a>
배열내 모든 요소에 대해 주어진 함수로 호출한 결과를 바탕으로 새로운 배열을 반환
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const array = [1,2,3,4,5]; const map = array.map(x =&gt; x*2); console.log(map); </pre></td></tr></tbody></table></figure>

 

<h2 id="Filter"><a href="#Filter" title="Filter"></a><a name="filter">Filter</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">MDN - Array.prototype.filter()</a>
파라미터로 주어진 callback 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>const players = [ { name: 'rooney', goal: 22 }, { name: 'nistelrooij', goal: 30 }, { name: 'jisung', goal: 5 }, { name: 'scholes', goal: 6 } ]; const strikers = players.filter(player =&gt; player.goal &gt; 10); console.log(strikers); </pre></td></tr></tbody></table></figure>

 

<h2 id="Find-FindIndex"><a href="#Find-FindIndex" title="Find, FindIndex"></a><a name="find">Find, FindIndex</a></h2>Reference : 
<ul>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Find">MDN - Array.prototype.find()</a></li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex">MDN - Array.prototype.findIndex()</a></li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">MDN - Array.prototype.indexOf()</a></li>
</ul>
<h3 id="Find"><a href="#Find" title="Find"></a>Find</h3>주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
파라미터로 callback 함수를 받을 수 있는데, 이 callback 함수가 true를 반환할대까지 callback 함수를 실행한다.
true이면 해당 값을 반환하고, callback 함수가 true인 값을 찾지 못하면 undefined를 반환한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element =&gt; element &gt; 10); console.log(found); </pre></td></tr></tbody></table></figure>

<code>filter()</code>와 달리 true인 모든 값을 찾아서 반환하지 않고, callback 함수가 처음으로 true인 값만 반환한다는 특징에 주의하자.
<h3 id="FindIndex"><a href="#FindIndex" title="FindIndex"></a>FindIndex</h3>위의 find()와 비슷하게 파라미터로 받은 callback 함수가 true일 때 값 대신 배열의 인덱스를 반환한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const array1 = [5, 12, 8, 130, 44]; const found = array1.findIndex(element =&gt; element &gt; 10); console.log(found); </pre></td></tr></tbody></table></figure>

 

<h2 id="IndexOf-Includes"><a href="#IndexOf-Includes" title="IndexOf, Includes"></a><a name="indexOF">IndexOf, Includes</a></h2><h3 id="IndexOf-searchElement-fromIndex"><a href="#IndexOf-searchElement-fromIndex" title="IndexOf(searchElement, fromIndex)"></a>IndexOf(searchElement, fromIndex)</h3>파라미터로 주어진 값(<code>searchElement</code>)에 해당하는 배열의 인덱스를 반환한다.
두번째 인자는 배열의 인덱스 어디서부터 조회할지를 결정한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>const array = ['andy', 'bart', 'chris', 'lex', 'sam']; console.log(array.indexOf('andy')); console.log(array.indexOf('bart', 2)); console.log(array.indexOf('kevin')); </pre></td></tr></tbody></table></figure>

두번째 <code>console.log</code>에서 <code>'bart'</code>라는 element는 배열에 존재하나 <code>array[2]</code>부터 조회했을때는 조회되지 않아서 <code>-1</code>을 반환했다.
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>array.indexOf('bart') = 1; </pre></td></tr></tbody></table></figure>

<h3 id="Includes"><a href="#Includes" title="Includes"></a>Includes</h3>indexOf와 같게 파라미터로 주어진 값과 일치하는 값이 배열에 있는지를 조회하되 인덱스는 반환하지 않고 boolean 타입만 반환한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>const array = ['andy', 'bart', 'chris', 'lex', 'sam']; console.log(array.includes('andy')); console.log(array.includes('bart', 2)); console.log(array.includes('kevin')); </pre></td></tr></tbody></table></figure>

 

<h2 id="Sort"><a href="#Sort" title="Sort"></a><a name="sort">Sort</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">MDN - Array.prototype.sort()</a>
배열의 요소를 유니코드 기준으로 정렬하는 함수이다. 원본 배열을 변환하고, 변환된 배열을 반환한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const numbers = [21,1,17,4,5]; numbers.sort(); console.log(numbers); </pre></td></tr></tbody></table></figure>

수를 정렬할 때에도 왜 이렇게 정렬되는지에 대해 MDN 문서에서 설명되어 있다. <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description">Go to MDN</a>
수를 정렬할 때 <code>sort()</code>를 그냥 사용하면 기대와 같이 정렬되지 않는다. 이 때는 아래와 같이 이용하면 numeric하게 <code>sort()</code>를 사용할 수 있다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const numbers = [21, 1, 17, 4, -5] numbers.sort((a,b) =&gt; a-b); console.log(numbers); </pre></td></tr></tbody></table></figure>

 

<h2 id="Reduce"><a href="#Reduce" title="Reduce"></a><a name="reduce">Reduce</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">MDN - Array.prototype.reduce()</a>
배열의 모든 요소에 대해 reducer 함수를 실행하여 하나의 결과값만 반환
<code>reduce()</code> 함수는 reducer 함수와 실행시 필요한 초기값, 두개의 인자를 갖는다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre>const array = [1, 2, 3, 4, 5]; const initValue = 0; const sum = array.reduce( (x,y) =&gt; x+y, initValue); console.log(sum); </pre></td></tr></tbody></table></figure>

 

<h2 id="Join"><a href="#Join" title="Join"></a><a name="join">Join</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Join">MDN - Array.prototype.join()</a>
배열의 모든 요소를 연결해 하나의 문자열로 만든다.
파라미터로 들어온 문자열을 기준으로 배열의 각 요소를 구분한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 </pre></td><td><pre>const array = ['Fire', 'Air', 'Water']; console.log(array.join()); console.log(typeof array.join()); console.log(array.join('')); console.log(array.join('-')); </pre></td></tr></tbody></table></figure>

 

<h2 id="Reverse"><a href="#Reverse" title="Reverse"></a><a name="reverse">Reverse</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reverse">MDN - Array.prototype.reverse()</a>
배열의 순서를 반전한다. 호출한 배열을 반전하고, 원본 배열을 변형한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const array = ['one', 'two', 'three']; console.log(array.reverse()); console.log(array); </pre></td></tr></tbody></table></figure>

원본 배열을 변환한다는 사실에 주의하자.
 

<h2 id="Slice"><a href="#Slice" title="Slice"></a><a name="slice">Slice</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Slice">MDN - Array.prototype.slice()</a>
<code>Array.prototype.slice(firstIndex, lastIndex)</code>
배열의 <code>[firstIndex]</code>부터 <code>[lastIndex-1]</code> 까지 반환하는 배열
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 </pre></td><td><pre>const array = ['hello', 'prototype', 'language', 'javascript']; console.log(array.slice(1,3)); console.log(array.slice(1, -1)); console.log(array.slice(-1)); console.log(array.slice()); </pre></td></tr></tbody></table></figure>

 

<h2 id="Some"><a href="#Some" title="Some"></a><a name="some">Some</a></h2>Reference : <a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Some">MDN - Array.prototype.some()</a>
파라미터로 주어진 callback 함수가 배열의 모든 요소를 대상으로 하나로 true를 반환하면, 함수의 결과로 true를 반환한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 </pre></td><td><pre>const array = [2, 5, 8, 1, 4]; const isBiggerThan5 = array.some((number)=&gt;number&gt;5); const isBiggerThan10 = array.some((number)=&gt;number&gt;10); console.log(isBiggerThan5); console.log(isBiggerThan10); </pre></td></tr></tbody></table></figure>

 
 </div></div>

JavaScript Array APIs

댓글