[JavaScript] Array Methods

oneยท2021๋…„ 6์›” 6์ผ
0

[TIL]What I Want To Know...

๋ชฉ๋ก ๋ณด๊ธฐ
4/22
post-thumbnail

๐Ÿ“’ Essential Array Methods

๐Ÿ’พ join(separator?: string): string;

  • Adds all the elements of an array separated by the specified separator string.

//  Q. make a string out of an array
const fruits = ['mango', 'melon', 'peach'];
const result = fruits.join();
const result2 = fruits.join(" ");

console.log(result); // mango,melon,peach
console.log(result2); // mango melon peach
console.log(typeof result); // "string"

๐Ÿ’พ split()

  • Split a string into substrings using the specified separator and return them as an array.

// Q. make an array out of a string
const fruits = 'cherry,melon,peach';
const result = fruits.split(',');

console.log(result); // ["cherry", "melon", "peach"]

๐Ÿ’พ reverse()

  • Reverses the elements in an array in place.

// Q. result should be: [5, 4, 3, 2, 1]
const arr = [1, 2, 3, 4, 5]
const result = arr.reverse();

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

๐Ÿ’พ slice()

  • Returns a copy of a section of an array.

  • @param end The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.

// Q. Returns a section of an array. 
const array = [1, 2, 3, 4, 5];
const result = array.slice(0, 2);

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

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()

  • Returns the value of the first element in the array where predicate is true, and undefined otherwise.

// Find a student with the score 90
const result = students.find((student) => 
	 student.score === 90);

console.log(result); // Student {name: "C", age: 30, enrolled: true, score: 90}

๐Ÿ’พ filter()

  • Returns the elements of an array that meet the condition specified in a callback function.

const result = students.filter((student) => student.enrolled);

console.log(result); // [Student, Student, Student]

๐Ÿ’พ map()

  • Calls a defined callback function on each element of an array, and returns an array that contains the results.

// make an array containing only the students' score
const result = students.map((student) => student.score);

console.log(result); // [45, 80, 90, 66, 88]

๐Ÿ’พ some()

  • Determines whether the specified callback function returns true for any element of an array.

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

console.log(result); // true


// use every()
const result2 = !students.every((student) => student.score >= 50)

console.log(result2); // true

๐Ÿ’พ reduce()

  • Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

// compute students' average score
const result =  students.reduce((prev, curr) => prev + curr.score, 0)

console.log(result / students.length); // 73,8

๐Ÿ“€ combine javascript methods together

//make a string containing all the scores bigger than 50
// result should be: '80, 90, 66, 88'
const result = students
.map((student) => student.score)
.filter((score) => score >= 50)
.join();

console.log(result) // 80,90,66,88

๐Ÿ“€ sort()

  • Sorts an array in place.

  • This method mutates the array and returns a reference to the same array.

// sorted in ascending order
// result should be: '45, 66, 80, 88 90'
const result = students
.map(student => student.score)
.sort((a, b) => a - b)
.join();

console.log(result) // 45,66,80,88,90

์ถœ์ฒ˜ : MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
๋“œ๋ฆผ์ฝ”๋”ฉ by ์—˜๋ฆฌ
https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=LL&index=1&t=12s
w3schools
https://www.w3schools.com/js/js_array_methods.asp

profile
๋Š˜ ํ˜ธ๊ธฐ์‹ฌ์„ ๊ฐ–๊ณ , ์ƒˆ๋กœ์šด ๊ฒƒ์— ๋„์ „ํ•  ๊ฒƒ.

0๊ฐœ์˜ ๋Œ“๊ธ€