Slice and Splice in Javascript
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 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/hiteshdo...
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...
Full course is FREE and will be available here
courses.learncodeonline.in/learn/Complete-Javascript-course
The most important difference between splice and slice is that splice changes the actual array while slice creates a new copy of the array.
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.
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}
// `);
@@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);
@@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
@@vijaynavale3919 Can you give me any reason why var can be used over let or const? BTW the examples were really good 🙂
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.!!!
I was very confused in Slice and splice now this concept is clear sir , Thank you ,great js series forever ❤️
This might be the first TH-cam 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!
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
1:17 This is year 2020 and this raises a lot of Questions
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
I am coming across the same doubt, please explain if you have learnt the reason.
bro please check this one
var user=["ram","syam","sita","gita","reeta","manu","lovi","run","jhun"];
console.log(user.splice(1,2,"Hello", "Hi"))
same.
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 ?
Splice alters the original array right whereas slice doesnt ?
amazing content clearly understood.
why no one talking about slice(1,-2)
Present Sir
Really 2 Days left
😊
What 2 days left
@@muthuvalli333 Wait 2 Days
@@programoftech9200 i found it...superb
Where we use splice function in real life programs??
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.
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.
@@rajaryansingh230 👍
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.
When you teach everything becomes so easy! thank you sir :)
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' ]
Splice and filter looks similar
Sir can u please explain why
users.splice(1,4,"HI");
console.log(users);
and
console.log(users.splice(1,4,"HI'));
works differently ?
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}
// `);
Can negative values also with it
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...
@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?
thank you!
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.
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! :)
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"));
I guess you cant use a splice method inside a console . Please let me know if this is true because i myself is confused :)
Slice is boring 😂
got a good understanding
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
Thank you sir...
been working with js since 6 months and back here again to clear some of the doubts⚡!
Birthday Cake example is there because his birthday is on August 2
finally i understand ... both methods , tq...
well explained
Awesome.
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
Jhooth bole khasi aae
Thank you so much, it helped a lot. I really appreciate it!
var result = users.splice(1, 3, "HI", "BYE");
console.log(result); //why it's not working?
write your user arrray too here
Hi sir
What is parent prototype and base prototype sir .any help
Bring more such array methods.. like reduce,flat.
Awesome sir
I am learning day by day
Keep it up
Good explanation.
Sir at least cover map and filter methods plzz then go ahead😊
filter covered
#10minutesJS day 23!
nicely explained
Supr
Keep it up, best tutorials
My head is spinning now😂
#firstviewer
Keep going 👍