๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์–ธ์–ด/Javascript

[JS] Array api ์ด ์ •๋ฆฌ

by lee365 2021. 7. 5.
๋ฐ˜์‘ํ˜•

๐Ÿ“ split : String โžœ Array

{
  const fruits = '๐ŸŽ, ๐Ÿฅ, ๐ŸŒ, ๐Ÿ’';
  console.log(fruits.split(','));
  console.log(fruits.split(',', 2)); // ๋ฆฌํ„ด ๋ฐ›์„ ๋ฐฐ์—ด ์ˆ˜
}

 

 

๐Ÿ“ join : Array โžœ String

{
  const fruits = ['apple', 'banana', 'orange'];
  console.log(fruits.join());    // apple,banana,orange
  console.log(fruits.join('|')); // apple|banana|orange
}

 

๐Ÿ“ Reverse 

{
  const array = [1, 2, 3, 4, 5];
  console.log(array.reverse()); //๋ณธ ๋ฐฐ์—ด๋„ ์ •๋ ฌ๋จ.
}

๊ฒฐ๊ณผ๊ฐ’: [5, 4, 3, 2, 1]

 

๐Ÿ“ Slice : ์–•์€ ๋ณต์‚ฌ

- ์ง€์ •ํ•œ ๋ฒ”์œ„๋ฅผ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๊ฐ์ฒด๋กœ return (์›๋ณธ ๋ฐฐ์—ด ์ˆ˜์ •X)

make new array without the first two elements

{
  const array = [1, 2, 3, 4, 5];
  console.log(array.slice(2, 5)); // ๋ฐฐ์—ด์—์„œ ์›ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ return
}
// ๊ฒฐ๊ณผ๊ฐ’ [3, 4, 5]
// array = [1, 2, 3, 4, 5]

 

๐Ÿ“ Splice : ๋ฐฐ์—ด ๊ธฐ์กด ์š”์†Œ ์ˆ˜์ •

- ๋ฐฐ์—ด์˜ ๊ธฐ์กด ์š”์†Œ๋ฅผ ์‚ญ์ œ ๋˜๋Š” ๊ต์ฒดํ•˜๊ฑฐ๋‚˜ ์ƒˆ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๋‚ด์šฉ์„ ๋ณ€๊ฒฝ

- ์›๋ณธ ๋ฐฐ์—ด ๋ณ€๊ฒฝ!

{
  const array = [1, 2, 3, 4, 5];
  console.log(array.splice(0, 2)); // ๋ณธ ๋ฐฐ์—ด์—์„œ 1,2๋ฅผ ์‚ญ์ œ
}
// ๊ฒฐ๊ณผ๊ฐ’ [1, 2]
// array = [3, 4, 5]

 

๐Ÿ“ find : ์กฐ๊ฑด์— ํ•ด๋‹นํ•˜๋Š” ์ฒซ๋ฒˆ์งธ ์š”์†Œ ๋ฐ˜ํ™˜

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

// find a student with the score 90
{
  students.find((student) => student.score === 90);
}

 

๐Ÿ“ filter : ์กฐ๊ฑด์ด true์ธ ์š”์†Œ๋“ค์„ ๋ชจ์•„์„œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋ฆฌํ„ด

- ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๊ฐ์ฒด๋กœ return 

// make an array of enrolled students
{
  console.log(students.filter((student) => student.enrolled === true));
}

 

๐Ÿ“ map

- ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋“ค์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ•˜๋‚˜์”ฉ ๊บผ๋‚ด์–ด callbackํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , callbackํ•จ์ˆ˜์—์„œ ๋ฐ˜ํ™˜๋˜์–ด์ง„ ๊ฐ’๋“ค๋กœ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฆฌํ„ด

// make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
   console.log(students.map((student) => student.score));
}

 

๐Ÿ“ some & every

- some
  :๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์—์„œ callbackํ•จ์ˆ˜์˜ ๋ฆฌํ„ด ์กฐ๊ฑด์ด ํ•˜๋‚˜๋ผ๋„ true์ด๋ฉด ture๋ฅผ ๋ฐ˜ํ™˜ (OR)
  
- every
  :๋ฐฐ์—ด์— ๋“ค์–ด์žˆ๋Š” ๋ชจ๋“  ์š”์†Œ๋“ค์ด ๋ฆฌํ„ด ์กฐ๊ฑด์„ ์ถฉ์กฑํ•˜๋ฉด true, ์•„๋‹ˆ๋ฉด false (AND)
  ๋ชจ๋“  ๋ฐฐ์—ด์˜ ์กฐ๊ฑด์ด ๋งŒ์กฑ๋˜์•ผํ•  ๋•Œ ์“ธ ๊ฒƒ

// check if there is a student with the score lower than 50
{
  // some()
  const result = students.some((student) => student.score < 50);

  // every()
  const result2 = !students.every((student) => student.score >= 50);
  console.log(result);
}

 

๐Ÿ“ reduce : ๋ฐฐ์—ด ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋Œ๋ฉด์„œ ๋ˆ„์ ํ•  ๋•Œ ์“ฐ๋Š” API

// compute students' average score
{
  // my code
  let temp = 0;
  students.forEach((student) => (temp += student.score));
  console.log(temp / students.length);

  // answer
  const result = students.reduce(function (prev, curr) {
    return prev + curr.score;
  }, 0);
  console.log(result / students.length);
}

 

๐Ÿ“ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ : map + filter + join

// make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  // ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ
  const result = students
    .map((student) => student.score)
    .filter((score) => score > 50)
    .join();
  console.log(result);
}

 

๐Ÿ“ Ascending order

// Bonus! do sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  console.log(
    students
      .map((student) => student.score)
      .sort((a, b) => b - a) // desc
      .sort((a, b) => a - b) // asc
      .join()
  );
}



์ฐธ๊ณ 

๐ŸŒŸ๋“œ๋ฆผ์ฝ”๋”ฉ ์—˜๋ฆฌ๋‹˜์˜ youtube๊ฐ•์˜๋ฅผ ๋ณด๊ณ  ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ํฌ์ŠคํŒ…์ž…๋‹ˆ๋‹ค๐ŸŒŸ

๐Ÿ‘‰youtube๊ฐ•์˜ https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9

 

๋ฐ˜์‘ํ˜•

'์–ธ์–ด > Javascript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

TIL01 | JavaScrpit ๋ณ€์ˆ˜  (0) 2021.09.26
[JS] Dynamic typing (dynamic type vs static type)  (0) 2021.07.10
[JS] undefined์™€ null  (0) 2021.07.10
[JS] async function  (0) 2021.07.08
[JS] Promise ๊ฐœ๋… ๋ฐ ํ™œ์šฉ  (0) 2021.07.06