What is console.log in JavaScript? | JS for Beginners Ep. 1

In this JavaScript beginner tutorial, we learn about the console.log() method, how to use it, what it does, and why it is useful to debug our scripts. Examples in the video are made using Visual Studio Code to output and manipulate strings and numbers-or, more particularly, values from variables-onto the Chrome DevTools console.
JS For Beginners tutorials: • What is console.log in...

Пікірлер: 89

  • @stephblank8204
    @stephblank82043 жыл бұрын

    if anyone is here for the answer, "what is console.log" it starts at 3:58 the rest is just setting up your editor

  • @nextrie

    @nextrie

    3 жыл бұрын

    Thanks Steph. I try to waste less time in my newer videos. 😁

  • @stephblank8204

    @stephblank8204

    3 жыл бұрын

    @@nextrie all good!

  • @afrobeatswithelixir8497

    @afrobeatswithelixir8497

    2 жыл бұрын

    Thanks a lot Steph

  • @nausheenrahman6853
    @nausheenrahman68533 жыл бұрын

    Out of all the videos I have seen this was explained the best... Thank you so much sir 😊

  • @nextrie

    @nextrie

    3 жыл бұрын

    I'm glad you found my video helpful, and thanks for your kind comment!

  • @carolinesexton2977
    @carolinesexton29772 жыл бұрын

    thank you for simple and understandable explanation of the console.log!!!

  • @nextrie

    @nextrie

    2 жыл бұрын

    Thanks Caroline! I've got many more JavaScript tutorials as short videos on my channel, by the way. I hope you enjoy them and subscribe :)

  • @giulia6930
    @giulia69302 жыл бұрын

    thank you very much! This is a super clear tutorial, I couldn't understand what conosle.log was, thanks so much, you really helped me!!

  • @nextrie

    @nextrie

    2 жыл бұрын

    Great to know my video helped! I have an extensive playlist of JavaScript tutorials on my channel, so I hope you enjoy the other videos too and subscribe :)

  • @sobaru-san8358
    @sobaru-san83582 жыл бұрын

    i can do the same with document.write(a+b); can you tell the difference between log.console and document.write

  • @nextrie

    @nextrie

    2 жыл бұрын

    Hey, in a nutshell, the document.write() method writes content to a (HTML) document. But careful, because it will clear any previous/existing HTML on the loaded document. On the other hand, the console.log() methods writes content/data to your browser's console and is useful for debugging purposes. You may want to watch the tutorial I made on document.write(), in this playlist: kzread.info/dash/bejne/f41mupRpY6nagqw.html

  • @x3los
    @x3los3 жыл бұрын

    Thanks for the help!

  • @nextrie

    @nextrie

    3 жыл бұрын

    Anytime, Carlos! By the way, I'll resume the uploading of new videos soon, so hopefully you subscribe for more tutorials :)

  • @ayoonamusi1067
    @ayoonamusi10674 жыл бұрын

    Thank you very much for your video it was very well explained

  • @nextrie

    @nextrie

    4 жыл бұрын

    You're welcome, Ayo! Hope you subscribe!

  • @ayoonamusi1067

    @ayoonamusi1067

    4 жыл бұрын

    NexRank already subscribed. Thanks

  • @nextrie

    @nextrie

    4 жыл бұрын

    You're awesome!

  • @vivekkhatri6540
    @vivekkhatri6540 Жыл бұрын

    Thank You

  • @sahiku5357
    @sahiku53573 жыл бұрын

    hello, i have a question: if u eneter a website that have for example 2 buttons and each one have a function when clicking on them (function1 and function2) is it possible to see what is the function that was excuted when clicking each button ? let's say f1(a,b){a+b} and f2(a,b){a*b} when i click button1 can i see (a+b) for example in the console or anywhere else ??

  • @nextrie

    @nextrie

    3 жыл бұрын

    Hey Dziri, there may be tools for that, but many websites minify their scripts anyway (partly for performance reasons), so they gets purposely obfuscated and hard to understand. However, if you have access to a site's source scripts, then you can simply add a breakpoint in the script where you wish, in the browser console.

  • @sahiku5357

    @sahiku5357

    3 жыл бұрын

    @@nextrie how to do that, i can find some js file and one of them have some functions that when i copy them and post them in the console i get the same result like when clicking the button, but the script is too long and hard to understand

  • @nextrie

    @nextrie

    3 жыл бұрын

    @@sahiku5357 Hey Dziri, this is a bit more advanced. However, I recommend you check out the following resources to learn more about debugging JavaScript in Chrome, and get a better idea on how to go about it: - developer.chrome.com/docs/devtools/javascript/ - javascript.info/debugging-chrome Hope this helps.

  • @ciceroaraujo5183
    @ciceroaraujo51834 жыл бұрын

    Amazing channel for beginners like me

  • @nextrie

    @nextrie

    4 жыл бұрын

    Yay! Glad you subscribed! I'm posting C++ content for beginners these days, which is great to get a strong foundation of programming in general. I hope you'll enjoy it too!

  • @ciceroaraujo5183
    @ciceroaraujo51834 жыл бұрын

    You are a great teacher

  • @nextrie

    @nextrie

    4 жыл бұрын

    Thank you! New video coming up in a few minutes. Please make sure you've got your notifications turned on :) :)

  • @ciceroaraujo5183

    @ciceroaraujo5183

    4 жыл бұрын

    @@nextrie cool

  • @Kanglese
    @Kanglese3 жыл бұрын

    Does something need to be installed in order to get the HTML template to fill out by typing a ! and then the tab key? It does nothing for me except add a tab after the exclamation mark.

  • @nextrie

    @nextrie

    3 жыл бұрын

    Hey Kurt, yes, you need to download the Emmet extension in Visual Studio Code to use these shortcuts.

  • @DJVibeDubstep
    @DJVibeDubstep Жыл бұрын

    Love the video, but I don't have the "open with live server" option. Tried right clicking everywhere.

  • @nextrie

    @nextrie

    Жыл бұрын

    Hey, you need to install the Live Server extension for VS Code first.

  • @frenchmike
    @frenchmike3 жыл бұрын

    do you know why when I type console.log in vscode it automatically autocorrects to console.timeLog(), it's annoying. thanks

  • @nextrie

    @nextrie

    3 жыл бұрын

    Hey Mike, I guess it depends on your auto-completion settings, whether you are using an extension to autocorrect what you write in the editor, and also your VS Code version. But I guess you can look into how to disable auto-completion to avoid that and see if it resolves the issue.

  • @momo-zz2sm
    @momo-zz2sm3 жыл бұрын

    Lecture is really helpful

  • @nextrie

    @nextrie

    3 жыл бұрын

    Thanks Mounika! Great to know you enjoyed the video. Are you just getting started with JavaScript?

  • @momo-zz2sm

    @momo-zz2sm

    3 жыл бұрын

    @@nextrie yes, beginner

  • @nextrie

    @nextrie

    3 жыл бұрын

    Nice! Are you only interested in JavaScript for web development? Or are you interested in programming in general? I'm asking because all my recent videos are about C and C++ programming, and they also serve as training for problem solving and technical job interviews. But these videos are for beginners as well, so they should suit you if you're interested :)

  • @momo-zz2sm

    @momo-zz2sm

    3 жыл бұрын

    @@nextrie for web development

  • @wellsleep549
    @wellsleep5494 жыл бұрын

    Man more people should subscribe to you

  • @nextrie

    @nextrie

    4 жыл бұрын

    I hope so, man! I'll keep uploading. Btw, I hope my explanation to your concatenation question worked for you. Let me know, otherwise.

  • @alstonestvtm2935
    @alstonestvtm29353 жыл бұрын

    When I right click on visual studio code "Open with live server" does not appear, and I do not now why...

  • @nextrie

    @nextrie

    3 жыл бұрын

    If you already have the extension installed and it used to work fine, I recommend you simply try restarting VS Code and your Chrome browser.

  • @alstonestvtm2935

    @alstonestvtm2935

    3 жыл бұрын

    @@nextrie thanks

  • @nextrie

    @nextrie

    3 жыл бұрын

    @@alstonestvtm2935 you're welcome! Hope you subscribe!

  • @akshayshukla7167

    @akshayshukla7167

    3 жыл бұрын

    open its html tab and then right click.. then u gonna get it🙏🏼

  • @sandeepreyyi5124
    @sandeepreyyi5124 Жыл бұрын

    Thank you sir

  • @nextrie

    @nextrie

    Жыл бұрын

    Welcome, Sandeep. Hope you subscribe!

  • @agexa8492
    @agexa84922 жыл бұрын

    Thx

  • @afrobeatswithelixir8497
    @afrobeatswithelixir84972 жыл бұрын

    Great tutorials, nice accent. Nigerian, yeah?😊

  • @nextrie

    @nextrie

    2 жыл бұрын

    Thanks. Nope, I'm not Nigerian though.

  • @user-qf2fm4js1z
    @user-qf2fm4js1z Жыл бұрын

    Very helpful for a beginner like me. Thanks a lot! Do you have web 3 course? I am eager to find a good one like this video.

  • @nextrie

    @nextrie

    Жыл бұрын

    You're welcome. I do not have a Web 3 course though. I plan to return to regular content uploads on my channel in a few weeks. But my focus this time around will be around Machine Learning/Data Science.

  • @jasminbt21
    @jasminbt21Ай бұрын

    thank youuuuuuuuuuuuuuuu sooo muchhhhh

  • @nextrie

    @nextrie

    Ай бұрын

    You're welcome!

  • @agexa8492
    @agexa84922 жыл бұрын

    Your great

  • @JessicaABG
    @JessicaABG3 жыл бұрын

    For anyone after me, "Open with Live server" is an extension found in the cube image on the left panel (Extensions) . lol I too am beginner beginner

  • @nextrie

    @nextrie

    3 жыл бұрын

    You are right! Apologies if I didn't emphasize that in the video.

  • @JessicaABG

    @JessicaABG

    3 жыл бұрын

    @@nextrie no worries thanks for the content, its helping alot!

  • @nextrie

    @nextrie

    3 жыл бұрын

    Great, Jessica! These days, I focus more on C++, but I hope you'll find that useful as well. The C++ videos are also beginner friendly :)

  • @spraveenkumar4209
    @spraveenkumar42093 жыл бұрын

    What will be output of console.log("test" && "book")? It is printing only book !! Why?

  • @nextrie

    @nextrie

    3 жыл бұрын

    Hey Praveen, in your example, both "test" and "book" are string literals, and they are not undefined. So it's as if your console logging statement is verifying two values that both evaluate to TRUE. In this case, using the logical AND operator (&&) will cause the function to log the last TRUE value (which is "book"). On the contrary, if you were to use the OR operator (||), then you would get the first TRUE value (which would be "test").

  • @spraveenkumar4209

    @spraveenkumar4209

    3 жыл бұрын

    @@nextrie thank you so much for replying back. Nice!!

  • @nextrie

    @nextrie

    3 жыл бұрын

    @@spraveenkumar4209 You're welcome, Praveen! I take my viewers' comments seriously :)

  • @nehamathapati9710
    @nehamathapati97103 жыл бұрын

    Sir, When I do right click, I am getting only 2 options (select all, print) not getting inspect option .. How to do now Sir..?

  • @nextrie

    @nextrie

    3 жыл бұрын

    Hi Neha, I believe you are asking about the option to open the web page using Live Server, at 3:24, right? If yes, then you need to install the Live Server extension for Visual Studio Code first. You can install the Live Server extension directly from within your text editor, or you can also go on the following official link to install it: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Hope this helps!

  • @nehamathapati9710

    @nehamathapati9710

    3 жыл бұрын

    @@nextrie at 4:35 sir.

  • @nextrie

    @nextrie

    3 жыл бұрын

    @@nehamathapati9710 Which browser are you using?

  • @nehamathapati9710

    @nehamathapati9710

    3 жыл бұрын

    @@nextrie internet explorer sir

  • @nextrie

    @nextrie

    3 жыл бұрын

    @@nehamathapati9710 On Internet Explorer, I believe you have to press the F12 key to access the DevTools. Please see here: docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/ie-mode/

  • @wellsleep549
    @wellsleep5494 жыл бұрын

    Why is expressions between variables used for like can’t we just write the response ex Var name= “john”+”smith”

  • @nextrie

    @nextrie

    4 жыл бұрын

    Hey yes, your example is a perfectly valid way of declaring and initializing a variable. Just note that because you do not have a space after "john", the string values will be concatenated as one single word ("johnsmith").

  • @wellsleep549

    @wellsleep549

    4 жыл бұрын

    NexRank that the point why not directly write “johnsmith” instead of “john”+”smith” or “john smith” instead of “john “+”smith”

  • @nextrie

    @nextrie

    4 жыл бұрын

    ​@@wellsleep549 Ah, I get you. Well no. Here's my (long) explanation: In your example, you are storing a string literal. You are the one providing the value to the variable, and you already know what it is. So you should in fact write it directly like this: "john smith" There's no need for concatenation with the + sign here. However, in the real world, web applications usually work with a lot of dynamic values. They receive data from user input (e.g. forms), or APIs, etc. Usually, you would capture these values in variables to use them later. To clarify, let's say you have a form on an HTML page with two text fields. The first one is for the user to input their first name, and the second one is for their last name. Upon submission of the form, you would capture the input from these two text fields and store them into two variables. I'll call these variables fname and lname. Now, let's say you want to display a greeting that includes the user's full name. The greeting is supposed to read: "Hello, John Smith!". That's when concatenation is useful. You can only access the user's first name and last name via the two variables in which you stored the input. So the string for your greeting to the user would look like this: "Hello, " + fname + " " + lname + "!" If another user now submits the form with a different first name and last name, then the greeting will dynamically reflect their details. But your script won't change. The values are still being stored in the fname and lname variables. That's a good point for concatenation. Personally, I prefer to use template literals instead of that classic style of concatenation. I recommend you check out my two videos on that to understand more about concatenation below. Hope this helps! Concatenation: kzread.info/dash/bejne/f41mupRpY6nagqw.html Template literals: kzread.info/dash/bejne/k6hrlalyqpetYZc.html

  • @prajwalponna3138
    @prajwalponna31382 жыл бұрын

    Cannot get anything in console.log in windows 10 chrome.. Please help

  • @nextrie

    @nextrie

    2 жыл бұрын

    Hey Prajwal, using Chrome with/without Windows 10 will not stop you from using console.log(), as the latter is a method directly from JavaScript (and not implemented by the OS). Try the following steps: - Open a fresh Chrome window - Press (at the same time) CTRL + SHIFT + I (the last key is a capital i, not an L) - In the DevTools window that appears, click on the Console tab - In the Console tab, type this: console.log("Testing") - Press the Enter key - You will see "Testing" printed back to you on the next line in DevTools So, if you have some JavaScript file or code that fails to print anything in the console, then it could be that you're looking at the logs from the wrong browser tab/wrong Chrome window, or that your server isn't running, or that your code has a bug preventing your log statements from being executed in the first place.

  • @prajwalponna3138

    @prajwalponna3138

    2 жыл бұрын

    Ok sir thank you.. The testing is printed in console.. But js function statements are not showing in console.log

  • @nextrie

    @nextrie

    2 жыл бұрын

    @@prajwalponna3138 Its hard to say why without seeing your script. You also need to link your script file to your index.html before loading the page.

  • @prajwalponna3138

    @prajwalponna3138

    2 жыл бұрын

    @@nextrie tq sir i forgot to link to HTML file.. Now I linked everything is fine.. I subscribed to ur channel sir 😃😃..

  • @nextrie

    @nextrie

    2 жыл бұрын

    @@prajwalponna3138 Glad I helped, Prajwal! Thanks for subscribing.

  • @agexa8492
    @agexa84922 жыл бұрын

    :D

  • @emanwhitlow8018
    @emanwhitlow80183 жыл бұрын

    skip to 5:25 for explanation for console.log

  • @nextrie

    @nextrie

    3 жыл бұрын

    I guess I dragged my explanation a bit. Sorry... that was one of my first videos on this channel. I hope my newer videos are more straightforward. :)

  • @agexa8492
    @agexa84922 жыл бұрын

    :D i just wanted to make the comments on 69 D:

  • @andrewkuhlman1665
    @andrewkuhlman1665 Жыл бұрын

    Cut the first 4 mins from this video or change the title.

  • @nextrie

    @nextrie

    Жыл бұрын

    I admit this video was dragged and could be more straightforward, but this video is from years ago and one of the first I published on my channel. So, I was still learning how to be direct. To resolve this, I created many short videos (under 60 seconds each) to explain important JS concepts more directly. You can find them in my JavaScript playlist. Hope this helps.

  • @agexa8492
    @agexa84922 жыл бұрын

    :D