Slice and Splice in Javascript

Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdotcom
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@HiteshChoudharydotcom]

Full course is FREE and will be available here courses.learncodeonline.in/learn/Complete-Javascript-course

[@haythamkenway8343]

The most important difference between splice and slice is that splice changes the actual array while slice creates a new copy of the array.

[@vijaynavale3919]

Yaa slice can be helpful in converting nodelist in array because its create shallow copy of array but agaij you have to use call method to perform this task.

[@kuzhalmalan4703]

Hi Kenway, How can we add type of operator in the below console.log using interpolation to get group of results in single query. Can you help me on this ? console.log (` // Added number is : ${add} // Subracted number is : ${sub} // Multiply number is : ${mul} // Divided number is : ${div} // Modulus number is : ${mod} // Greater number is : ${greater} // Lesser number is : ${lesser} // Equal number is : ${equal} // `); I have tried to use typeof as below and will getting result as string alone. console.log (typeof` // Added number is : ${add} // Subracted number is : ${sub} // Multiply number is : ${mul} // Divided number is : ${div} // Modulus number is : ${mod} // Greater number is : ${greater} // Lesser number is : ${lesser} // Equal number is : ${equal} // `);

[@haythamkenway8343]

@@kuzhalmalan4703 Are you trying to do something like this? I've stored the string inside a variable because it doesn't look good to have a massive string inside of console.log and it's reusable, not to mention easier for debugging too. const outcome = ` // Added number is : ${typeof add} // Subracted number is : ${typeof sub} // Multiply number is : ${typeof mul} // Divided number is : ${typeof div} // Modulus number is : ${typeof mod} // Greater number is : ${typeof greater} // Lesser number is : ${typeof lesser} // Equal number is : ${typeof equal} `; console.log(outcome);

[@vijaynavale3919]

@@kuzhalmalan4703 var mixArray = [7, 'Dosa', 2, 'Pani-puri', 1, true]; var arr = []; //----------using forEach method mixArray.forEach(function (item) { console.log(`${typeof item}`); }); //-----------using filter method var arr = mixArray.filter(function (item) { if(typeof item === 'number'){ console.log(`${typeof item}`); return item; }; }); console.log(arr); you can do something like this too you will get result of all data types one by one using these methods

[@haythamkenway8343]

@@vijaynavale3919 Can you give me any reason why var can be used over let or const? BTW the examples were really good 🙂

[@tasneemkhilonawala6021]

Sir the way you teach is FANTABULOUS. I am a developer with 7 years of experience, and still used to get confused with so many things in JS. But your videos have just helped me understand in the most simple way possible. THANK YOU SO MUCH.!! Best part is you belong from the same state that I do and that somewhere makes me feel proud too. LOVE YOU SIR.!! And THANK YOU AGAIN A LOT.!!!

[@ianmcdonald2588]

This might be the first KZbin video I've ever commented on. I'm taking a JS class right now and your explanation of splice would have saved me hours of frustration if I had seen it earlier. Thank you!

[@gopalukani6526]

I was very confused in Slice and splice now this concept is clear sir , Thank you ,great js series forever ❤️

[@akansha3109]

When you teach everything becomes so easy! thank you sir :)

[@siemen_subbaiah]

been working with js since 6 months and back here again to clear some of the doubts⚡!

[@xZecica]

wow the inclusive and exclusive thing has been bothering me for long, what a great way to explain it, that the 2nd option is exclusive. this is definitely going to help me remember. Thanks! :)

[@singhkaushaki8590]

finally i understand ... both methods , tq...

[@ankushthakur2177]

Awesome sir I am learning day by day

[@piyushmahapatra5402]

1:17 This is year 2020 and this raises a lot of Questions

[@rmaheshchalke]

@Hitesh Choudhary One more difference between slice and splice i.e. slice does not have side effect and splice does have side effect. It means slice will create new array from existing array and splice will change the existing array. am I right sir?

[@creativegeeks613]

Hello Hitesh Sir, i have problem in understabnding slice & splice when start & end range comes up with negative number. it will be more helpful if you make a video on same

[@gouthamrohan7116]

hey, Hitesh can you tell the difference between console.log(users.slice(1)); and console.log(users.splice(1)); which both do the same thing upon execution can you help from this tq in advance...

[@adnanabbasi9482]

referring splicing at timestamp 6:15 console.log(users.splice(1,3, "HI"); result: ['Tim', 'Ton', 'Sam'] I am not sure, but does it somehow related to the context / global scope? if so, please explain.

[@seidkhan]

Thank you so much, it helped a lot. I really appreciate it!

[@__Y1a2s3h4__]

Can negative values also with it

[@lalitkumarmehta1721]

Keep it up, best tutorials

[@kuzhalmalan4703]

Good Evening Hitesh, I am following up your videos from last week and need some clarifications on below mentioned: How can we add type of operator in the below console.log using interpolation to get group of results in single query. console.log (` // Added number is : ${add} // Subracted number is : ${sub} // Multiply number is : ${mul} // Divided number is : ${div} // Modulus number is : ${mod} // Greater number is : ${greater} // Lesser number is : ${lesser} // Equal number is : ${equal} // `); I have tried to use typeof as below and will getting result as string alone. console.log (typeof` // Added number is : ${add} // Subracted number is : ${sub} // Multiply number is : ${mul} // Divided number is : ${div} // Modulus number is : ${mod} // Greater number is : ${greater} // Lesser number is : ${lesser} // Equal number is : ${equal} // `);

[@mubeenahmed30]

got a good understanding

[@tanishbajpai9952]

Sir can u please explain why users.splice(1,4,"HI"); console.log(users); and console.log(users.splice(1,4,"HI')); works differently ?

[@manishthakur2645]

Sir, when we pass only 1 in slice method why does it removed "Ted" and not "Tim" as i think we pass the index no. inside this method. Sir, will u please explain this.

[@arpitnigam6128]

hi splice function cant be written inside a console.log ?? i tried both here's what i tried - const arr1 = ["a","b","c","d","e","f"]; console.log(arr1.splice(1,4,"HI")); output = [ 'b', 'c', 'd', 'e' ] const arr1 = ["a","b","c","d","e","f"]; arr1.splice(1,4,"HI"); console.log(arr1); output = [ 'a', 'HI', 'f' ] What's the difference ?

[@rukeshpM]

Hi sir What is parent prototype and base prototype sir .any help

[@jilluvlog2616]

Great mentor 😌

[@puneetahuja3902]

Good explanation.

[@Learner010]

nicely explained

[@shahidavali_syed]

well explained

[@muradiancode]

Awesome.

[@ameyabhave1886]

Just tried out that if not given any values after the delete count, 'slice' and 'splice' give complementary results! :-D var users = ['Ted','Tim','Ton','Sam','Sor','Sod'] console.log(users.slice(0,users.length-3)); //[ 'Ted', 'Tim', 'Ton' ] users.splice(0,users.length-3) console.log(users); //[ 'Sam', 'Sor', 'Sod' ]

[@ankushladani496]

Thank you sir...

[@dajindersingh9538]

Hi Hitesh, thank you for creating this awesome playlist on js. I have a question, why console.log(user.splice(1,2,"Hello", "Hi")) is not working as expected? Correct me if I am doing something wrong. Thanks

[@chiragbose3577]

I am coming across the same doubt, please explain if you have learnt the reason.

[@sachinpandey816]

bro please check this one var user=["ram","syam","sita","gita","reeta","manu","lovi","run","jhun"]; console.log(user.splice(1,2,"Hello", "Hi"))

[@FarhanAli-gd2qv]

same.

[@ravalravi882]

i have seen video before , but at that time its wasn't useful that much ,,,,and now i am working with React ...it save my ass Thank you sir

[@flatliner_1203]

thank you!

[@vijaynavale3919]

Keep going 👍

[@FarhanKhan-dc3zc]

user.splice(1 , 3 , "hii", "bye"); console.log(user) above code works well but console.log(user.splice(1 , 3 , "hii", "bye")); this will not work correctly @HITESH CHOUDHARY sir please give an explanation

[@trendingtopics960]

Keep it up

[@y.s.jenifersingh2153]

Supr

[@programoftech9200]

Present Sir Really 2 Days left 😊

[@muthuvalli333]

What 2 days left

[@programoftech9200]

@@muthuvalli333 Wait 2 Days

[@muthuvalli333]

@@programoftech9200 i found it...superb

[@shubhamverma2366]

Where we use splice function in real life programs??

[@vijaynavale3919]

If you want to delete something from data structure or from UI then just target whatever item you want delete and that item should be in array so that when you apply splice you will remove it.

[@rajaryansingh230]

Yes , you can actually see how pagination works at some places like google search engine and many more. when you request a keyword like apple in the search bar then there will be 1000 of search results and if we don't control it then it will reduce the speed of the page , you can think that it will take too much time to show you all the results at the same time on the same page. Now here one of method comes into play "SPLICE". Now what we do , we can store all the search results in an array. suppose we have 16 results. var res = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; now for first page we can control the result to 8. var page 1 = exp.splice(0 , 8) (8) [1, 2, 3, 4, 5,6,7,8] and for the another page , the same no of result 8. var page 2 = exp.splice(8, res.length + 1); (8) [9,10,11,12,13,14,15,16] and one by one for the 2 pages we can show only 8 search results. Now , I think picture is something clear to you that how PAGINATION works and how SPLICE helped us in doing so. I am not saying that google search results work like this , i have taken an example of it. and yes we developers use it most oftenly. My english is terrible but i thing you are getting my point and dont worry if it is not 100% clear to you , it will.. just keep learning , you will automatically learn by the time.

[@sudarshanjha6737]

@@rajaryansingh230 👍

[@prasannapilankar6260]

My head is spinning now😂

[@programoftech9200]

Birthday Cake example is there because his birthday is on August 2

[@igu642]

why no one talking about slice(1,-2)

[@nurnabi4897]

var result = users.splice(1, 3, "HI", "BYE"); console.log(result); //why it's not working?

[@Yuvraj-kp2xc]

write your user arrray too here

[@jagadeeshmanoharan9613]

Bring more such array methods.. like reduce,flat.

[@vraj3115]

#10minutesJS day 23!

[@kamalnath1070]

Splice and filter looks similar

[@vijaynavale3919]

Sir at least cover map and filter methods plzz then go ahead😊

[@kirankamath5891]

filter covered

[@ProgrammingWithProject]

#firstviewer

[@Adarsh-mn7pl]

Jhooth bole khasi aae

[@HimanshuKumar-lw2fv]

Help!!! The below code is not replacing using splice -- var num = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; console.log(num.splice(1, 3, "H"));

[@priyangjoshi619]

I guess you cant use a splice method inside a console . Please let me know if this is true because i myself is confused :)