๊ด€๋ฆฌ ๋ฉ”๋‰ด

Hey Tech

[JavaScript] ๋ฐฐ์—ด ์ธ๋ฑ์‹ฑ์œผ๋กœ ํŠน์ • ์›์†Œ ์ถœ๋ ฅ/์ œ๊ฑฐ/์ถ”๊ฐ€ํ•˜๊ธฐ(slice, splice ํ•จ์ˆ˜) ๋ณธ๋ฌธ

SW ๊ฐœ๋ฐœ/Vanilla JS

[JavaScript] ๋ฐฐ์—ด ์ธ๋ฑ์‹ฑ์œผ๋กœ ํŠน์ • ์›์†Œ ์ถœ๋ ฅ/์ œ๊ฑฐ/์ถ”๊ฐ€ํ•˜๊ธฐ(slice, splice ํ•จ์ˆ˜)

Tony Park (ํ† ๋‹ˆ) 2021. 12. 1. 16:52
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ’ก ๋ชฉํ‘œ

JavaScript์—์„œ ๋ฐฐ์—ด ์ธ๋ฑ์‹ฑ์„ ํ†ตํ•ด ์›์†Œ๋ฅผ ์ถœ๋ ฅ, ์ œ๊ฑฐ, ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.

1.  slice ํ•จ์ˆ˜: ํŠน์ • ๊ตฌ๊ฐ„ ์ธ๋ฑ์Šค์˜ ์›์†Œ ๋ฐ˜ํ™˜

ํ•จ์ˆ˜ ์›ํ˜•

๋ฐฐ์—ด.slice(์‹œ์ž‘ ์ธ๋ฑ์Šค, ๋ ์ธ๋ฑ์Šค)

slice ํ•จ์ˆ˜๋Š” ํŠน์ • ๊ตฌ๊ฐ„์˜ ์ธ๋ฑ์Šค์— ํ•ด๋‹นํ•˜๋Š” ์›์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

2๊ฐœ์˜ ์ •์ˆ˜ํ˜• ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š”๋ฐ ๊ฐ๊ฐ ์‹œ์ž‘ ์ธ๋ฑ์Šค, ๋ ์ธ๋ฑ์Šค์ž…๋‹ˆ๋‹ค.

ํŠนํžˆ, ๋์  ์ธ๋ฑ์Šค๋Š” ํฌํ•จํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—,

์›์†Œ๋ฅผ ์ถ”์ถœํ•˜๋Š” ๊ตฌ๊ฐ„์„ ์ˆ˜ํ•™์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๋ฉด [์‹œ์ž‘์ , ๋์ )์ž…๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let arrSlice = arr1.slice(2, 6); // [start, end) ๊ตฌ๊ฐ„ ์ธ๋ฑ์‹ฑ
console.log(arrSlice); // 3, 4, 5, 6

์œ„์˜ ์˜ˆ์ œ์—์„œ ์‹œ์ž‘์ ์€ 2์ด๊ณ  ๋์ ์€ 6์ด๋ฏ€๋กœ 2๋ฒˆ์งธ๋ถ€ํ„ฐ 5๋ฒˆ์งธ ์›์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

2.  splice ํ•จ์ˆ˜: ํŠน์ • ๊ตฌ๊ฐ„ ์ธ๋ฑ์Šค์˜ ์›์†Œ ์‚ญ์ œ/์ถ”๊ฐ€

ํ•จ์ˆ˜ ์›ํ˜•

๋ฐฐ์—ด.splice(์‹œ์ž‘ ์ธ๋ฑ์Šค, ์‚ญ์ œํ•  ๋ฐ์ดํ„ฐ ๊ฐœ์ˆ˜, ์ถ”๊ฐ€ํ•  ์›์†Œ ๋‚˜์—ด)

splice ํ•จ์ˆ˜๋Š” ํŠน์ • ์ธ๋ฑ์Šค์—์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์›์†Œ N๊ฐœ๋ฅผ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž ์ž„์˜๋Œ€๋กœ ์›์†Œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์ง๊ด€์ ์œผ๋กœ ํ•จ์ˆ˜ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ 1

let arr2 = [1, 2, 3];
arr2.splice(1, 0, 4, 5); // ์‹œ์ž‘ ์ธ๋ฑ์Šค: 1, ์›์†Œ ์‚ญ์ œ ๊ฐœ์ˆ˜: 0, ๋ฐ์ดํ„ฐ [4, 5] ์ถ”๊ฐ€
console.log(arr2); // [1, 4, 5, 2, 3]

์˜ˆ์ œ ์ฝ”๋“œ 2

let arr3 = [10, 20, 30, 40, 50];
arr3.splice(2, 2, 6, 7, 88, 99, 77); // ์‹œ์ž‘ ์ธ๋ฑ์Šค: 2, ์›์†Œ ์‚ญ์ œ ๊ฐœ์ˆ˜: 2, ๋ฐ์ดํ„ฐ [6, 7, 88, 99, 77] ์ถ”๊ฐ€
console.log(arr3); // [10, 20, 6, 7, 88, 99, 77, 50]

ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ์•„๋ž˜์— ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”!

๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ์ฆ๊ฒ๊ณ  ๋ฉ‹์ง„ ๋งŒ๋“œ์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๊ณ ๋ง™์Šต๋‹ˆ๋‹ค :-)

728x90
๋ฐ˜์‘ํ˜•