๐Ÿ“’ Javascript ๋ฐ์ดํ„ฐ #01 :)

67588 ๋‹จ์–ด JavaScriptJavaScript
  • String: "", '', ``
  • Number
  • Boolean: true, false
  • undefined
  • null
  • Array: []
  • Object: {}

1. ๋ฌธ์ž(String)

  • String ์ „์—ญ ๊ฐ์ฒด๋Š” ๋ฌธ์ž์—ด(๋ฌธ์ž์˜ ๋‚˜์—ด)์˜ ์ƒ์„ฑ์ž์ด๋‹ค.
  • ๋ฌธ์ž์—ด์€ String ์ „์—ญ ๊ฐ์ฒด๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”ต String ์ƒ์„ฑ์ž ํ•จ์ˆ˜

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์„ ํ• ๋‹นํ•œ String ๋ž˜ํผ๊ฐ์ฒด๋Š” ๋ฐฐ์—ด๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ length ํ”„๋กœํผํ‹ฐ์™€ ์ธ๋ฑ์Šค๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ˆซ์ž ํ˜•์‹์˜ ๋ฌธ์ž์—ด์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ, ๊ฐ ๋ฌธ์ž๋ฅผ ํ”„๋กœํผํ‹ฐ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š” ์œ ์‚ฌ๋ฐฐ์—ด ๊ฐ์ฒด์ด๋ฉด์„œ ์ดํ„ฐ๋Ÿฌ๋ธ”์ด๋‹ค.
  • ๋ฐฐ์—ด๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ๋ฌธ์ž์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•จ.
  • String์˜ prototype๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋‘ ์›๋ณธ๋ฌธ์ž์—ด์„ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜ํ•จ!!

๐Ÿ”ต String.prototype.indexOf()

  • indexOf() ๋ฉ”์„œ๋“œ๋Š” ํ˜ธ์ถœํ•œ String๊ฐ์ฒด์—์„œ ์ฃผ์–ด์ง„ ๊ฐ’๊ณผ ์ผ์น˜ํ•˜๋Š” ์ฒซ ๋ฒˆ์งธ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ์ผ์น˜ํ…์ŠคํŠธํ•˜๋Š” ๊ฐ’์ด ์—†์œผ๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ์ฐพ์œผ๋ ค๋Š” ๋ฌธ์ž์—ด์ธ์ˆ˜์— ์•„๋ฌด ๊ฐ’๋„ ์ฃผ์–ด์ง€์ง€ ์•Š์œผ๋ฉด ๋ฌธ์ž์—ด "undefined"๋ฅผ ์ฐพ์œผ๋ ค๋Š” ๋ฌธ์ž์—ด๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

๐Ÿ‘พ #1

const str = "Hello wold"

console.log(str.indexOf('zooyaho') !== -1) // false

๐Ÿ‘พ #2

const str = "Hello wold"

console.log(str.indexOf()) // -1

๐Ÿ”ต String.prototype.subString()

  • subString(์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค ์ˆซ์ž, ๋งˆ์ง€๋ง‰ ์ธ๋ฑ์Šค ์ˆซ์ž)
  • ๋Œ€์ƒ ๋ฌธ์ž์—ด์—์„œ ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ธ๋ฑ์Šค์— ์œ„์ฐจํ•˜๋Š” ๋ฌธ์ž๋ถ€ํ„ฐ ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ธ๋ฑ์Šค์— ์œ„์น˜ํ•˜๋Š” ๋ฌธ์ž์˜ ๋ฐ”๋กœ ์ด์ „๊นŒ์ง€์˜ ๋ถ€๋ถ„ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜ ์ƒ๋žต ๊ฐ€๋Šฅ, ๋งˆ์ง€๋ง‰ ๋ฌธ์ž๊นŒ์ง€ ๋ฐ˜ํ™˜

๐Ÿ”ต String.prototype.slice()

  • subString()๊ณผ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘.
  • ์Œ์ˆ˜์ธ ๋ฉ”์„œ๋“œ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ณ , ์Œ์ˆ˜์ธ ์ธ์ˆ˜๋Š” ๋Œ€์ƒ ๋ฌธ์ž์—ด์˜ ๊ฐ€์žฅ ๋’ค์—์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ฌธ์ž์—ด์„ ์ž˜๋ผ๋‚ด์–ด ๋ฐ˜ํ™˜

๐Ÿ‘พ #1

const str = "Hello World"
console.log(str.slice(0,3)) // Hel

๐Ÿ”ต String.prototype.search()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ •๊ทœํ‘œํ˜„์‹๊ณผ ๋ฌธ์ž์—ด์ด ๋งค์น˜ํ•˜๋Š” ๋ฌธ์ž์—ด์„ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์ž์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜
  • ๊ฒ€์ƒ‰์— ์‹คํŒจํ•˜๋ฉด -1 ๋ฐ˜ํ™˜

๐Ÿ”ต String.prototype.includes()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์—ฌ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฐ์œผ๋กœ ๋ฐ˜ํ™˜
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๋ฅผ ์ „๋‹ฌ

๐Ÿ”ต String.prototype.startsWith()

  • ๋Œ€์ƒ ๋ฌธ์ž์—ด์ด ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด๋กœ ์‹œ์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์‚ฌ, ๋ถˆ๋ฆฐ์œผ๋กœ ๋ฐ˜ํ™˜
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๋ฅผ ์ „๋‹ฌ

๐Ÿ”ต String.prototype.endsWith()

  • ๋Œ€์ƒ ๋ฌธ์ž์—ด์ด ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด๋กœ ๋๋‚˜๋Š”์ง€ ๊ฒ€์‚ฌ, ๋ถˆ๋ฆฐ์œผ๋กœ ๋ฐ˜ํ™˜
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๊ฒ€์ƒ‰ํ•  ๋ฌธ์ž์—ด์˜ ๊ธธ์ด๋ฅผ ์ „๋‹ฌ

๐Ÿ”ต String.prototype.charAt()

๋Œ€์ƒ ๋ฌธ์ž์—ด์—์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ธ๋ฑ์Šค์— ์œ„์น˜ํ•œ ๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜

  • ์ธ๋ฑ์Šค๊ฐ€ ๋ฌธ์ž์—ด์˜ ๋ฒ”์œ„๋ฅผ ๋ฒ—์–ด๋‚œ ์ •์ˆ˜์ธ ๊ฒฝ์šฐ ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜

๐Ÿ”ต String.prototype.replace()

replace('๋ฐ”๋€” ๋‹จ์–ด', '๋ฐ”๊ฟ€ ๋‹จ์–ด')

๐Ÿ‘พ #1

const str = 'Hello world!'
console.log(str.replace('world','zooyaho')) // Hello zooyaho!

๐Ÿ‘พ #2

๐Ÿ‘‰๐Ÿป ๋‹จ์–ด ์ œ๊ฑฐ ์‹œ ์œ ์šฉ -> ๋นˆ๋ฌธ์ž ์ด์šฉ

str.replace(' world!', '') // Hello

๐Ÿ”ต String.prototype.match()

์ •๊ทœํ‘œํ˜„์‹ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • ๋ฌธ์ž๋ฅผ ๋ฐฐ์—ด๋ฐ์ดํ„ฐ๋กœ ๋ฐ˜ํ™˜ํ•จ.

๐Ÿ‘พ #1

const str = '[email protected]'
console.log(str.match(/.+(?=@)/)[0]) // zooyaho

๐Ÿ”ต String.prototype.trim()

๋ฌธ์ž ์ฒ˜์Œ๊ณผ ๋์˜ ๊ณต๋ฐฑ๋ฌธ์ž๋ฅผ ์ œ๊ฑฐํ•ด์คŒ.

๐Ÿ‘พ #1

const str = ' Hello world '
console.log(str.trim()) // Hello world

๐Ÿ”ต String.prototype.split()

  • String ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•œ ๊ตฌ๋ถ„์ž๋ฅผ ์ด์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ฌธ์ž์—ด๋กœ ๋‚˜๋ˆ”.
  • ์ธ์ˆ˜๋ฅผ ์ƒ๋žตํ•˜๋ฉด ๋ฌธ์ž์—ด ์ „์ฒด๋ฅผ ๋‹จ์ผ ์š”์†Œ๋กœ ํ•˜๋Š” ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ(์˜ต์…˜)

๐Ÿ‘พ #1

const myName = "my name is zooyaho";
console.log(myName.split(' '));
// ["my","name","is","zooyaho"]

๐Ÿ‘พ #2 ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์„ ์—ญ์ˆœ์œผ๋กœ ๋’ค์ง‘๋Š”๋‹ค.

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('Hello Wold!')); 
// '!dloW olleH'

๐Ÿ”ต String.prototype.repeat()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ •์ˆ˜๋งŒํผ ๋ฐ˜๋ณตํ•ด ์—ฐ๊ฒฐํ•œ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•จ.
  • ์ธ์ˆ˜๊ฐ€ 0์ด๋ฉด ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜!, ์Œ์ˆ˜์ด๋ฉด RangeError๋ฅผ ๋ฐœ์ƒ, ์ƒ๋žตํ•˜๋ฉด ๊ธฐ๋ณธ๊ฐ’ 0

๐Ÿ”ต String.prototype.replace()

  • replace(๊ต์ฒด๋‹นํ•  ๋ฌธ์ž์—ด, ๊ต์ฒดํ•  ๋ฌธ์ž์—ด)
  • ์ฒซ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ •๊ทœํ‘œํ˜„์‹๊ณผ ๋ฌธ์ž์—ด์„ ์ง€์ •ํ• ์ˆ˜ ์žˆ์Œ.
  • ๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ๊ต์ฒด๋จ.

2-1. ์ˆซ์ž(Number)

๐Ÿ”ต Number.isInteger()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ˆซ์ž๊ฐ’์ด ์ •์ˆ˜์ธ์ง€ ๊ฒ€์‚ฌํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์œผ๋กœ ๋ฐ˜ํ™˜
  • ์ธ์ˆ˜๋ฅผ ์•”๋ฌต์  ํƒ€์ž… ๋ณ€ํ™˜ํ•˜์ง€ ์•Š์Œ.
Number.isInteger(0) // true
Number.isInteger('12') // false
Number.isInteger(Infinity) // false

๐Ÿ”ต Number.isNaN()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ˆซ์ž๊ฐ’์ด NaN์ธ์ง€ ๊ฒ€์‚ฌํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์œผ๋กœ ๋ฐ˜ํ™˜
  • ์ธ์ˆ˜๋ฅผ ์•”๋ฌต์  ํƒ€์ž… ๋ณ€ํ™˜ํ•˜์ง€ ์•Š์Œ.
Number.isNaN(NaN) // true
Number.isNaN(undefined) // false

// ์•”๋ฌต์  ํƒ€์ž… ๋ณ€ํ™˜์œผ๋กœ undefined์ด NaN์ด ๋จ.
isNaN(undefined) // true

๐Ÿ”ต Number.prototype.toFixed()

  • toFixed() ๋ฉ”์„œ๋“œ๋Š” ์ˆซ์ž๋ฅผ ๊ณ ์ • ์†Œ์ˆ˜์  ํ‘œ๊ธฐ๋ฒ•(fixed-point notation)์œผ๋กœ ํ‘œ์‹œํ•จ.
  • ๊ฐ’์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด 0์„ ์‚ฌ์šฉํ•จ.
  • ๊ณ ์ • ์†Œ์ˆ˜์  ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‚˜ํƒ€๋‚ธ ์ˆ˜๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜ํ•จ.
const pi = 3.1415926535

console.log(pi.toFixed(2)) // '3.14'

๐Ÿ”ต Number.prototype.toString()

  • ์ˆซ์ž๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ์ง„๋ฒ•์„ ๋‚˜ํƒ€๋‚ด๋Š” 2~36 ์‚ฌ์ด์˜ ์ •์ˆ˜๊ฐ’์œผ๋กœ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ธ์ˆ˜๋ฅผ ์ƒ๋žตํ•˜๋ฉด ๊ธฐ๋ณธ๊ฐ’ 10์ง„๋ฒ•์ด ์ง€์ •๋œ๋‹ค.
(10).toString() // '10'
(16).toString(2) // '10000'

๐Ÿ”ต Number.parseInt()

  • Number.parseInt() ๋ฉ”์„œ๋“œ๋Š” ๋ฌธ์ž์—ด ์ธ์ž๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ํŠน์ • ์ง„์ˆ˜(์ˆ˜์˜ ์ง„๋ฒ• ์ฒด๊ณ„์—์„œ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ฐ’)์˜ ์ •์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
const pi = 3.1415926535
const str = pi.toFixed(2) // '3.14'

console.log(parseInt(str)) // 3

2-2. Math

Math๋Š” ์ˆ˜ํ•™์ ์ธ ์ƒ์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ ์œ„ํ•œ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง„ ๋‚ด์žฅ ๊ฐ์ฒด์ด๋‹ค. ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๋‹ค!!!

  • Math.abs(n): n์˜ ์ ˆ๋Œ€๊ฐ’ ๋ฐ˜ํ™˜(absolute)
  • Math.min(n,n): n๊ฐ’์ค‘ ์ž‘์€ ๊ฐ’ ๋ฐ˜ํ™˜
  • Math.max(n,n): n๊ฐ’์ค‘ ํฐ ๊ฐ’ ๋ฐ˜ํ™˜
  • Math.ceil(n): ์˜ฌ๋ฆผ ๊ฐ’ ๋ฐ˜ํ™˜
  • Math.floor(n): ๋‚ด๋ฆผ ๊ฐ’ ๋ฐ˜ํ™˜
  • Math.round(n): ๋ฐ˜์˜ฌ๋ฆผ ๊ฐ’ ๋ฐ˜ํ™˜
  • Math.random(): 0~1 ์‚ฌ์ด์— ๋žœ๋ค ๊ฐ’ ๋ฐ˜ํ™˜(๋‚œ์ˆ˜)

๐Ÿ”ต Math.min(), Math.max()

๋ฐฐ์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์—์„œ ์ตœ๋Œ€๊ฐ’, ์ตœ์†Œ๊ฐ’์„ ๊ตฌํ•˜๋ ค๋ฉด Function.prototype.apply()๋ฉ”์„œ๋“œ ๋˜๋Š” ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

Math.max.apply(null, [1,3,5]); // 5
Math.max(...[2,7,1]); // 7

3. ๋ฐฐ์—ด(Array)

๋ฐฐ์—ด์˜ ๊ฐ’๋“ค์„ "element = ์š”์†Œ = item"๋ผ ์นญํ•จ

๐Ÿ”ต Array.isArray()

  • ์ธ์ž๊ฐ€ Array์ธ์ง€ ํŒ๋ณ„ํ•จ. true,false ๋ฐ˜ํ™˜
  • typeOf๋กœ ํŒ๋ณ„ํ•˜๋ฉด object๊ฐ€ ๋ฐ˜ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ •ํ™•ํ•˜๊ฒŒ ์•Œ ์ˆ˜ ์—†์Œ.
const fruits = ['Banana', 'Apple', 'Cherry'];
console.log(Array.isArray(fruits)); // true

๐Ÿ”ต Array.prototype.concat()

๋‘๊ฐœ์˜ ๋ฐฐ์—ด๋ฐ์ดํ„ฐ๋ฅผ ๋ณ‘ํ•ฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋ฐ์ดํ„ฐ๋ฅผ ๋ด”ํ™˜ , ์›๋ณธ์˜ ๋ฐ์ดํ„ฐ๋Š” ์†์ƒ๋˜์ง€ ์•Š์Œ.

๐Ÿ‘พ #1

const numbers = [5, 6, 12]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.concat(fruits));
// [5, 6, 12, 'Apple', 'Banana', 'Cherry']

๐Ÿ”ต Array.prototype.sort()

  • ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ •๋ ฌ, ์›๋ณธ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉฐ ์ •๋ ฌ๋œ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜
  • ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•จ.
  • sort()๋Š” ์œ ๋‹ˆ์ฝ”๋“œ ์ฝ”๋“œํฌ์ธํŠธ์˜ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ˆซ์ž ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์„ ์ •๋ ฌํ•  ๋•Œ๋Š” ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•จ.

๐Ÿ‘พ #1

const fruits = ['Banana', 'Apple', 'Cherry'];
fruits.sort(); // ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
console.log(fruits) // ['Apple', 'Banana', 'Cherry']

๐Ÿ‘พ #2 ์ˆซ์ž ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด

const points = [40, 100, 23, 4, 21]; 

// ์˜ค๋ฆ„์ฐจ์ˆœ
points.sort((a,b)=> a - b);
console.log(points); // [4,21,23,40,100]

// ๋‚ด๋ฆผ์ฐจ์ˆœ
points.sort((a,b)=> b - a);
console.log(points); // [100,40,23,21,4]

๐Ÿ‘พ #3 ๊ฐ์ฒด๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด

const todos = [
  { id: 3, content: 'JS'},
  { id: 1, content: 'HTML'},
  { id: 5, content: 'CSS'}
];

// ๋น„๊ตํ•จ์ˆ˜, ๋งค๊ฐœ๋ณ€์ˆ˜ key๋Š” ํ”„๋กœํผํ‹ฐ ํ‚ค์ด๋‹ค.
function compare(key){
  return (a,b) => ( a[key] > b[key] ? 1 : ( a[key] < b[key] ? -1 : 0));
}
// id๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
todos.sort(compare('id'));
console.log(todos); // [{id:1..}, {id:3..}, {id:5..}]

// content๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
todos.sort(compare('content'));
console.log(todos);

๐Ÿ”ต Array.prototype.forEach()

  • forEach() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜)๋ฅผ ๋ฐฐ์—ด ์š”์†Œ ๊ฐ๊ฐ์— ๋Œ€ํ•ด ์‹คํ–‰ํ•จ.
  • forEach(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)
    • item: ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ ์š”์†Œ๊ฐ’
    • index: ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ ์š”์†Œ์˜ ์ธ๋ฑ์Šค (opt)
    • array: forEach()๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด (opt)
  • class์˜ ๋ฉ”์†Œ๋“œ์—์„œ forEachํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ํ™”์‚ดํ‘œํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๋ฅผ ์ฐธ์กฐํ•˜๋ฉด ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ์ฐธ์กฐํ•จ. ์ฝœ๋ฐฑํ•จ์ˆ˜์—์„œ this์ฐธ์กฐ ์‹œ ํ™”์‚ดํ‘œํ•จ์ˆ˜๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ, forEachํ•จ์ˆ˜์˜ ๋‘๋ฒˆ์งธ ์ธ์ˆ˜์ธ 'this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด'๋ฅผ ์ƒ๋žตํ•ด๋„ ๋˜๊ธฐ ๋•Œ๋ฌธ.

๐Ÿ‘พ #1

const fruits = ['Apple', 'Banana', 'Cherry']

fruits.forEach(function(element, index, array) {
  console.log(element, index, array)
});

๐Ÿ“Console

๐Ÿ‘พ #2

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.forEach(function(fruit, index) {
console.log(`${fruit} - ${index}`)
});

console.log(b); 

๐Ÿ“Console

๐Ÿ‘พ #3

class Numbers {
  numberArray = [];
  
  multiply(arr){
    // ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๋ฅผ ์ฐธ์กฐํ•˜๋ฉด ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ์ฐธ์กฐํ•œ๋‹ค.
    arr.forEach(item => this.numberArray.push(item * item));
  }
}

const numbers = new Numbers();
numbers.multiply([1,2,3]);
console.log(numbers.numberArray); // [1,4,9]

๐Ÿ”ต Array.prototype.map()

  • map() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ ๊ฐ๊ฐ์— ๋Œ€ํ•˜์—ฌ ์ฃผ์–ด์ง„ ํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜)๋ฅผ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • map(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)

๐Ÿ‘พ #1

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.map(function(fruit, index) {
return`${fruit} - ${index}`
});

console.log(b); // ['Apple-0', 'Banana-1', 'Cherry-2']

๐Ÿ‘พ #2

b = fruits.map(function (fruit, index){ 
  return { id:index, name:fruit }
});
console.log(b);

/* ์ถ•์•ฝํ˜• */
b = fruits.map( (fruit, index) =>{ 
  id:index, name=fruit 
}); 

๐Ÿ“Console

๐Ÿ”ต Array.prototype.filter()

  • filter() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜)์˜ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ชจ์•„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•จ.
  • filter(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)

๐Ÿ‘พ #1

const numbers = [1, 2, 3, 4]
const a = numbers.filter(number => {
  return number < 3
});
console.log(a); // [1,2]

๐Ÿ”ต Array.prototype.reduce()

  • ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋‹ค์Œ ์ˆœํšŒ์‹œ์— ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ์ฒซ๋ฒˆ์žฌ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋ฉด์„œ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๊ฐ’์„ ๋งŒ๋“ค์–ด ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์›๋ณธ๋ฐฐ์—ด ๋ณ€๊ฒฝ์•ˆ๋จ.
  • reduce(์ฝœ๋ฐฑํ•จ์ˆ˜((์ดˆ๊ธฐ๊ฐ’ or ์ด์ „๋ฐ˜ํ™˜๊ฐ’), ์š”์†Œ๊ฐ’, ์ธ๋ฑ์Šค, arr), ์ดˆ๊ธฐ๊ฐ’) -> ์ดˆ๊ธฐ๊ฐ’ ์ƒ๋žต ๊ฐ€๋Šฅ(ํ•˜์ง€๋งŒ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•จ.)

๐Ÿ‘พ #1

const sum = [1,2,3,4].reduce((ammulator, currentValue, index, arr)=> ammulator + currentValue,0);

console.log(sum); // 10

๐Ÿ‘พ #2 ํ‰๊ท ๊ตฌํ•˜๊ธฐ

const values = [1,2,3,4,5,6];
const average = values.reduce((acc, cur, i, {length}) => {
  return i === length - 1 ? (acc + cur) / length : acc+cur;
}, 0);

console.log(average); // 3.5

๐Ÿ‘พ #3 ์š”์†Œ์˜ ์ค‘๋ณต ํšŸ์ˆ˜ ๊ตฌํ•˜๊ธฐ

const fruits = ['Apple', 'Banana', 'Cherry', 'Cherry', 'Apple'];

const count = fruits.reduce((acc,cur) => {
  // ๋งŒ์•ฝ ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด undefined(์ฒ˜์Œ ๋“ฑ์žฅํ•˜๋Š” ์š”์†Œ)์ด๋ฉด ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ 1๋กœ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค.
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
},{});

console.log(count); // object {'Apple': 2, 'Banana': 1, 'Cherry': 2}

๐Ÿ‘พ #4 ์ค‘๋ณต ์š”์†Œ ์ œ๊ฑฐ

const values = [1,2,1,3,5,4,5,3,4,4];

let result = values.reduce(
  (unique, val, i, _values) => {
    // true -> [...unique,val]: unique๋ฐฐ์—ด์— val์š”์†Œ ์ถ”๊ฐ€
    // false -> unique: ์ถ”๊ฐ€ ํ•˜์ง€ ์•Š์Œ.
    return _values.indexOf(val) === i ? [...unique,val] : unique},
  [] // ์ดˆ๊ธฐ๊ฐ’: ๋นˆ ๋ฐฐ์—ด
);

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

/* filter()๊ฐ€ ๋” ์ง๊ด€์ ์ž„ */
result = values.filter((val, i, _values) => _values.indexOf(val) === i);
console.log(result); // [1,2,3,5,4]

๐Ÿ”ต Array.prototype.find()

  • find(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)
  • find()๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ๋งŒ์กฑํ•˜๋Š” ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•จ.
  • ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋‹ค๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•จ.

๐Ÿ‘พ #1

const array = [5, 6, 12]
const found = array.find( el => el > 10 )
console.log(found); // 12

๐Ÿ‘พ #2

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.find(fruit => {
  return /^B/.test(fruit)
});
console.log(a); // Banana

๐Ÿ”ต Array.prototype.findIndex()

  • findIndex() ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํŒ๋ณ„ ํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜)๋ฅผ ๋งŒ์กฑํ•˜๋Š” ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์— ๋Œ€ํ•œ ๋ฐ˜ํ™˜.
  • ๋งŒ์กฑํ•˜๋Š” ์š”์†Œ๊ฐ€ ์—†์œผ๋ฉด -1์„ ๋ฐ˜ํ™˜.
  • findIndex(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)

๐Ÿ‘พ #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.findIndex(fruit => {
  return /^C/.test(fruit)
});
console.log(a); // 2

๐Ÿ”ต Array.prototype.some()

  • some(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)
  • ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋‹จ ํ•œ๋ฒˆ์ด๋ผ๋„ ์ฐธ์ด๋ฉด true, ๋ชจ๋‘ ๊ฑฐ์ง“์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ผ ๊ฒฝ์šฐ false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

๐Ÿ‘พ #1

[5,10,15].some(item => item < 10); // true
[5,10,15].some(item => item < 5); // false

๐Ÿ”ต Array.prototype.every()

  • every(์ฝœ๋ฐฑํ•จ์ˆ˜(item, index, arr), this๋กœ ์‚ฌ์šฉํ•  ๊ฐ์ฒด)
  • ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋ชจ๋‘ ์ฐธ์ด๋ฉด true, ๋‹จ ํ•œ๋ฒˆ์ด๋ผ๋„ ๊ฑฐ์ง“์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ผ ๊ฒฝ์šฐ true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

๐Ÿ‘พ #1

[5,10,15].some(item => item < 50); // true
[5,10,15].some(item => item < 10); // false

๐Ÿ”ต Array.prototype.flatMap()

  • map๋ฉ”์„œ๋“œ์™€ flat๋ฉ”์„œ๋“œ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค.
  • ํ‰ํƒ„ํ™” ๊นŠ์ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์—†๊ณ  1๋‹จ๊ณ„๋งŒ ํ‰ํƒ„ํ™”ํ•œ๋‹ค.

๐Ÿ‘พ #1

const arr = ['hello','world'];
let result = arr.flatMap(x => x.split(''));

console.log(result); 
// ["h","e","l","l","o","w","o","r","l","d"]

result = arr.map(x => x.split(''));
console.log(result); 
// [["h","e","l","l","o"],["w","o","r","l","d"]]

๐Ÿ”ต Array.prototype.includes()

includes() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์ด ํŠน์ • ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š”์ง€ ํŒ๋ณ„ํ•จ.

๐Ÿ‘พ #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.includes('Apple');
console.log(a); // true

๐Ÿ”ต Array.prototype.push()

  • push() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๋์— ํ•˜๋‚˜ ์ด์ƒ์˜ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ๋ฐฐ์—ด์˜ ์ƒˆ๋กœ์šด ๊ธธ์ด๋ฅผ ๋ฐ˜ํ™˜ํ•จ.
  • ์›๋ณธ ์ˆ˜์ •๋จ.

๐Ÿ‘พ #1

const numbers = [1, 2, 3, 4]
numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5]

๐Ÿ”ต Array.prototype.unshift()

  • unshift() ๋ฉ”์„œ๋“œ๋Š” ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ๋ฐฐ์—ด์˜ ๋งจ ์•ž์ชฝ์— ์ถ”๊ฐ€ํ•˜๊ณ , ์ƒˆ๋กœ์šด ๊ธธ์ด๋ฅผ ๋ฐ˜ํ™˜ํ•จ.
  • ์›๋ณธ ์ˆ˜์ •๋จ.

๐Ÿ‘พ #1

const numbers = [1, 2, 3, 4]
numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4]

๐Ÿ”ต Array.prototype.reverse()

  • reverse() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ์ˆœ์„œ๋ฅผ ๋ฐ˜์ „ํ•จ. ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋Š” ๋งˆ์ง€๋ง‰ ์š”์†Œ๊ฐ€ ๋˜๋ฉฐ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋Š” ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๊ฐ€ ๋จ.
  • ์›๋ณธ ์ˆ˜์ •๋จ.

๐Ÿ‘พ #1

const numbers = [1, 2, 3, 4]
numbers.reverse()
console.log(numbers) // [4, 3, 2, 1]

๐Ÿ”ต Array.prototype.slice()

  • slice() ๋ฉ”์„œ๋“œ๋Š” ์–ด๋–ค ๋ฐฐ์—ด์˜ begin๋ถ€ํ„ฐ end๊นŒ์ง€(end ๋ฏธํฌํ•จ)์— ๋Œ€ํ•œ ์–•์€ ๋ณต์‚ฌ๋ณธ์„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด ๊ฐ์ฒด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์›๋ณธ ๋ฐฐ์—ด์€ ๋ฐ”๋€Œ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ‘พ #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.slice(1,3);
console.log(a); // ['Banana', 'Cherry']

๐Ÿ”ต Array.prototype.splice()

  • splice() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๊ธฐ์กด ์š”์†Œ๋ฅผ ์‚ญ์ œ ๋˜๋Š” ๊ต์ฒดํ•˜๊ฑฐ๋‚˜ ์ƒˆ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๋‚ด์šฉ์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
  • ์›๋ณธ ์ˆ˜์ •๋จ.

๐Ÿ‘พ #1

/* splice(์‚ญ์ œ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๊ฐ’, ์‚ญ์ œํ•  ๊ฐœ์ˆ˜) */
const numbers = [1, 2, 3, 4]
numbers.splice(2, 1)
console.log(numbers); // [1, 2, 4]

๐Ÿ‘พ #2

/* splice( n, ์‚ญ์ œํ•  ๊ฐœ์ˆ˜ , n๋ฒˆ์งธ์— ์‚ฝ์ž…ํ•  ๋ฐ์ดํ„ฐ )
: n์ธ๋ฑ์Šค๋ถ€ํ„ฐ 2๋ฒˆ์งธ ์ธ์ˆ˜ ์ˆ˜๋งŒํผ ์‚ญ์ œํ•˜๊ณ  ๋ฐ์ดํ„ฐ ์‚ฝ์ž… */
const numbers = [1, 2, 3, 4]

numbers.splice(2, 0, 999)
console.log(numbers); // [1, 2, 999, 3, 4]

๐Ÿ”ต Array.prototype.join()

  • join() ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์—ฐ๊ฒฐํ•ด ํ•˜๋‚˜์˜ ๋ฌธ์ž์—ด๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
const myName = ['my', 'name', 'is', 'zooyaho'];
console.log(myName.join(' ')); //"my name is zooyaho"

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ