[ TIL ] [ μ •κ·œκ³Όμ • : ν”„λ‘œκ·Έλž˜λ° 기초2 ] splice, slice , concat λ©”μ„œλ“œ

2023. 8. 22. 00:56ㆍ0. TiL ( Today I Learned )

μ•Œκ³ λ¦¬μ¦˜ 문제λ₯Ό ν’€λ©΄μ„œ, λ‹€λ₯Έ μ‚¬λžŒλ“€μ˜ λ¬Έμ œλ“€μ„ λ³΄λ©΄μ„œ λ°°μ› λ˜ λ©”μ„œλ“œ 쀑

splice, slice , concat λ©”μ„œλ“œμ— λŒ€ν•΄μ„œ μΆ”κ°€ 곡뢀λ₯Ό ν•΄λ³΄μ•˜λ‹€.

spliceλŠ” λ‹¨μˆœνžˆ μ‚­μ œμš©λ„λ§Œ μ‚¬μš©ν–ˆλŠ”λ°, μΆ”κ°€μš”μ†Œλ‘œ μ“Έ 수 μžˆλ‹€λŠ”κ²ƒμ„ μ•Œκ²Œ λ˜μ—ˆλ‹€! 

 


 

1. splice() λ©”μ„œλ“œ 

 

splice() λ©”μ„œλ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λ°°μ—΄μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ‚΄μž₯ν•¨μˆ˜λ‹€.

이 ν•¨μˆ˜λŠ” λ°°μ—΄μ˜ λ‚΄μš©μ„ λ³€κ²½ν•  수 μžˆλ‹€.  splice() ν•¨μˆ˜λŠ” μ„Έ 개의 λ§€κ°œλ³€μˆ˜λ₯Ό λ°›λŠ”λ‹€.

첫 번째 λ§€κ°œλ³€μˆ˜λŠ” λ°°μ—΄μ—μ„œ μ‚­μ œν•˜κ±°λ‚˜ λŒ€μ²΄ν•˜λ €λŠ” μš”μ†Œμ˜ μ‹œμž‘ 인덱슀.

두 번째 λ§€κ°œλ³€μˆ˜λŠ” μ‚­μ œν•˜λ €λŠ” μš”μ†Œμ˜ 개수.

μ„Έ 번째 λ§€κ°œλ³€μˆ˜λΆ€ν„°λŠ” 배열에 μΆ”κ°€ν•˜λ €λŠ” μš”μ†Œμž…λ‹ˆλ‹€.

 

arr. splice(n, m, ×)

// n : λ°°μ—΄μ—μ„œ μ‚­μ œν•˜κ±°λ‚˜, λŒ€μ²΄ν•˜λ €λŠ” μš”μ†Œμ˜ μ‹œμž‘μΈλ±μŠ€ 
// m : μš”μ†Œμ˜ 개수 
// x : 배열에 μΆ”κ°€ν•˜λ €λŠ” μš”μ†Œ

 

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

// ** 이 λ°°μ—΄μ—μ„œ 인덱슀 2ν„°, 2개의 μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  κ·Έμžλ¦¬μ— 6,7을 μΆ”κ°€ ν•˜λ €λ©΄ μ•„λž˜μ™€ 같이 μ‚¬μš©

arr.splice(2, 2, 6, 7);
console.log(arr); // [1, 2, 6, 7, 5]

// ** λ§Œμ•½ m값에 (2번째)'0'을 λ„£κ²Œλ˜λ©΄, νŠΉμ •μš”μ†Œλ₯Ό μ§€μšΈκ²ƒμ΄ μ—†λ‹€. κ·ΈλŸ¬λ―€λ‘œ μΆ”κ°€'만'λœλ‹€.

 

μ°Έμ‘° : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice


 

2. slice() λ©”μ„œλ“œ 

 

slice() λ©”μ„œλ“œ μžλ°”μŠ€ν¬λ¦½νŠΈ λ°°μ—΄μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ‚΄μž₯ ν•¨μˆ˜λ‹€.

이 ν•¨μˆ˜λŠ” λ°°μ—΄μ˜ 일뢀뢄을 μΆ”μΆœν•˜μ—¬ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.

slice() ν•¨μˆ˜λŠ” 두 개의 λ§€κ°œλ³€μˆ˜λ₯Ό λ°›λŠ”λ‹€.

첫 번째 λ§€κ°œλ³€μˆ˜λŠ” μΆ”μΆœν•˜κ³ μž ν•˜λŠ” μš”μ†Œμ˜ μ‹œμž‘ 인덱슀.

두 번째 λ§€κ°œλ³€μˆ˜λŠ” μΆ”μΆœν•˜κ³ μž ν•˜λŠ” μš”μ†Œμ˜ λ§ˆμ§€λ§‰ 인덱슀. λ§ˆμ§€λ§‰ μΈλ±μŠ€λŠ” μΆ”μΆœν•˜μ§€ μ•ŠλŠ”λ‹€.

 

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

// ** 이 λ°°μ—΄μ—μ„œ 인덱슀 1λΆ€ν„° 3κΉŒμ§€μ˜ (숫자 2, 3, 4) μš”μ†Œλ₯Ό μΆ”μΆœ ** //

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

//** μœ„ μ½”λ“œμ—μ„œ slice() ν•¨μˆ˜λŠ” arr λ°°μ—΄μ—μ„œ 인덱슀 1λΆ€ν„° 3κΉŒμ§€μ˜ μš”μ†Œλ₯Ό μΆ”μΆœ
// μƒˆλ‘œμš΄ λ°°μ—΄ result에 μ €μž₯ν•œλ‹€. λ”°λΌμ„œ result 배열은 [2, 3, 4]κ°€ λœλ‹€. **//

 

μ°Έμ‘° : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice


 

3. concat() λ©”μ„œλ“œ

 

λ©”μ„œλ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λ°°μ—΄μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ‚΄μž₯ ν•¨μˆ˜.

이 ν•¨μˆ˜λŠ” λ°°μ—΄μ˜ μš”μ†Œλ“€μ„ ν•©μ³μ„œ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.

concat() ν•¨μˆ˜λŠ” 인자둜 μ „λ‹¬λœ λ°°μ—΄μ΄λ‚˜ 값듀을 κΈ°μ‘΄ 배열에 ν•©μ³μ„œ μƒˆ 배열을 λ°˜ν™˜ν•œλ‹€.

κΈ°μ‘΄ 배열을 λ³€κ²½ν•˜μ§€ μ•Šκ³ , μΆ”κ°€λœ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// ** λ‘κ°œμ˜ 배열을 ν•©μΉ λ•Œ concat() ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•΄μ„œ ν•©μΉ˜λŠ”κ²ƒμ΄ κ°€λŠ₯ν•˜λ‹€. **//

const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

//** concat() ν•¨μˆ˜λŠ” arr1κ³Ό arr2 두 개의 배열을 ν•©μ³μ„œ μƒˆλ‘œμš΄ λ°°μ—΄ result에 μ €μž₯λœλ‹€.
λ”°λΌμ„œ result 배열은 [1, 2, 3, 4, 5, 6]κ°€ λœλ‹€. **//

 

μ°Έμ‘° : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

 

 


μ•Œκ³ λ¦¬μ¦˜ 주간에 μ™€μ„œ 많이 λ‚™λ‹΄ν–ˆλ‹€..

μ›λž˜λ„ 문과기질 강함 + 수포자 μ˜€κΈ°μ— 

μ•Œκ³ λ¦¬μ¦˜μ— 약할쀄 μ•Œκ³  μžˆμ—ˆλ‹€. 

μž˜ν•˜λŠ” μ‚¬λžŒλ“€μ΄ λ§ŽμœΌλ‹ˆ 괜히 기죽게 되고 κ·Έλž¬λ‹€.

λΆ„λͺ… λ‚˜λ§Œμ˜ μŠ€νƒ μŠ€κ°€ μžˆλŠ”λ°, 

λ‹€λ₯Έ μ‚¬λžŒλ“€μ΄ 잘 ν•˜λŠ” λͺ¨μŠ΅λ§Œμ„ λ³΄λ©΄μ„œ

'빨리 μ €κ±Έ ν•΄ λ‚΄μ•Όν•˜λ‚˜?' ν•˜λ©° μ’€ λΆˆμ•ˆν–ˆλ˜ 것 κ°™λ‹€.

였늘 μ£Όλ³€μ‚¬λžŒλ“€λ‘œ λΆ€ν„° λ§Žμ€ 이야기λ₯Ό λ“£κ³ , 

쑰금 마음 νŽΈν•˜κ²Œ λ¬Έμ œμ— μ ‘κ·Όν•΄ 보기둜 ν–ˆλ‹€. 

μ•Œκ³ λ¦¬μ¦˜ λ˜ν•œ μ·¨μ—…μ΄λ‚˜, λ‚˜μ€‘μ„ μœ„ν•΄μ„œ  μž˜ ν•΄μ•Όν•˜λŠ” 것도 λ§žμ§€λ§Œ,

λ‚΄κ°€ μ§€κΈˆ 그리고 길게 λ³΄μ•„μ„œ μ•žμœΌλ‘œ 

무엇을 제일 μž˜ν•΄μ•Ό ν•˜λŠ”μ§€ λͺ©μ μ„ 뚜렷이 κ°€μ Έμ•Όκ² λ‹€.

λ„ˆλ¬΄ λ‚™λ‹΄ν•˜μ§€ 말자!