Jump to content
predatorx

Learn ES6

Recommended Posts

I really want to learn es6, but don't really know much javascript. Is it best to learn javascipt, then es6 or can I just try to learn es6?

 

Can anyone point me in the right direction for good books/courses on es6 for beginners?

 

Thanks

Share this post


Link to post
Share on other sites

es6 is JavaScript. It's an update to the language. Personally, I'd start learning the fundamentals of JavaScript:

 

  • Types / Primitives
  • Conditionals
  • Loops
  • Arrays (in particular array methods such as forEach, map, filter, reduce, every. Mozilla Developer Network is a great resource)
  • Functions
  • Scope
  • etc

 

You can learn all of the above using resources such as Treehouse, Codeschool, Codecademy, FreeCodeCamp, plus many others.

 

You'll also find some of these links useful:

 

Edited by Lyndsey

Share this post


Link to post
Share on other sites

there's differing opinions on this, but If I were teaching a newcomer to JavaScript I would be using ES6 right from the beginning. It is an update to the language so like learning any new language start from the basics.

 

Unfortunately a lot of the ES6 courses assume a level of experience with JavaScript so that makes following my suggestion quite difficult for somebody in your position so I would actually recommend here you learn ES5 first and then come and use one of the ES6 courses. Wes Bos has some good courses so https://es6.io/ is well worth checking out.

 

Feel free to post any questions you might have in the general JavaScript topic regarding ES6 and we'll be happy to explain!

Share this post


Link to post
Share on other sites

Unfortunately a lot of the ES6 courses assume a level of experience with JavaScript so that makes following my suggestion quite difficult for somebody in your position so I would actually recommend here you learn ES5 first and then come and use one of the ES6 courses.

 

This is true and it is the reason I'd learn the fundamentals first, in particular es5's Array methods which are used heavily. I'd also learn functions, scope and how callbacks work before attempting es6.io.

Share this post


Link to post
Share on other sites

 

This is true and it is the reason I'd learn the fundamentals first, in particular es5's Array methods which are used heavily. I'd also learn functions, scope and how callbacks work before attempting es6.io.

 

Yeah, but for example if I was personally teaching and mentoring somebody who had no exposure to JavaScript I would teach them with ES6 first. It's just that there's not many good courses out there at the moment that teach people this way.

is a good talk discussing this very topic.

Share this post


Link to post
Share on other sites

Thanks for this. I have been looking for a beginner's guide to es6, but couldn't find anything. That's why I reached out to people on here. I figured it would be best to learn es6 as it will help in the future.

Share this post


Link to post
Share on other sites

Thanks for this. I have been looking for a beginner's guide to es6, but couldn't find anything. That's why I reached out to people on here. I figured it would be best to learn es6 as it will help in the future.

 

You're right learning ES6 will help for the future, and even now many JavaScript job postings require experience with it.

 

Bear in mind that ES5 is still valid ES6, it's just additions to the language so don't feel that you need to know all of ES6 to use it in projects. I've been using ES6 for around 18 months now but only recently learnt about generator functions as I had no use for them until now.

 

Also worth bearing in mind that we already have ES7 (ES2016) and ES8 will be next. I just like to put them all under the term ESNext as the language will have updates on a yearly basis. Babel which transpiles this code into ES5 also supports those features that are in one of 4 draft stages depending on how you set it up. Although I would generally recommend against using experimental proposals / drafts in production code.

 

I would recommend you start with `const` and `let` statements then go onto arrow functions, object/array destructuring and just gradually introduce things as you learn them.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By GrahamUK33
      I have found a slideshow from the w3schools.com website, it comes with some Javascript to give the function of a left and right arrow and also indicator buttons that can be selected to display a required photo without using the left and right arrows.
      I also found more JavaScript (carousel) that animates the slideshow, but the indicator buttons do not update when the different photos are being displayed.
      Can someone please edit the code below and maybe give a brief description of what the code is doing.
      var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" slideshow-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " slideshow-white"; } var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); }  
    • By Lyndsey
      Hi guys,
       
      I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly:
       
      General Stuff:
      http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site.  
      CSS:
      http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts.  
      Responsive Design:
      http://www.getskeleton.com/ - Responsive Grid.  
      Server-Side Coding:
      http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP!  
      Form Validation (Client-Side):
      https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do
       
      Lyndsey.
    • By asomanikofi
      Issue:1
      I am using juqeryui widgets to create section tags which contains data from an external json file I have attempted to style the data that is printed out however the text will appear on the right handside of the image for some entries while other ones pieces of text just filter down to the bottom of the page
      How do I go about fixing this issue?
      DisplayHoliday.css
      HolidayForm.html
    • By predatorx
      Hello all
       
      I am trying to use the jQuery plugin EasyAutocomplete, but I have run into an issue.
       
      I have the plugin working in test from a json file which is fine. What happens is when the user types in a search, the search list filters and the user can click on one of the dropdown enters and be taken to another page.
       
      This is working as intended.
       
      My issue is that I have a submit button and when the user selects there search term, the submit button does not do anything. You also cannot select a search term by typing in the input field and pressing enter to be taken to that page.
       
      I would like the user to be able to go to the next page by either typing in the input field and pressing enter, pressing the submit button or clicking the link they want to use.
       
      You can view the test that I have mocked up here.
       
      Can anyone help with this? If more information is needed I can try to provide it?
       
      Thanks
    • By GrahamUK33
      I have an issue with a responsive menu that I have been working on One the screen size becomes 1024px the mobile menu button appears, the problem is that the menu does not appear as it should. Anyone know what the problem is? HTML with JavaScript <div class="container navigation group"> <div class="navigation-desktop" id="myNavigation"> <a href="index.html" class="active">Home</a> <a href="index.html">Item 1</a> <a href="index.html">Item 2</a> <a href="index.html">Item 3</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myNavigation"); if (x.className === "navigation-desktop") { x.className += "navigation-mobile"; } else { x.className = "navigation-desktop"; } } </script> CSS
      html,body { font-family: 'Open Sans',sans-serif; background-color: #ffffff; margin: 0px; } .container { position: relative; clear: both; padding: 0px; margin: 0px; } .navigation { background-color: #000099; height: 400px; color: #ffffff; } .navigation-desktop { overflow: hidden; background-color: #333; } .navigation-desktop a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navigation-desktop a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .navigation-desktop .icon { display: none; } /*-- solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+. --*/ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } @media screen and (max-width: 1024px) { .navigation-desktop a:not(:first-child) { display: none; } .navigation-desktop a.icon { float: right; display: block; } } @media screen and (max-width: 1024px) { .navigation-desktop .navigation-mobile { position: relative; } .navigation-desktop .navigation-mobile .icon { position: absolute; right: 0; top: 0; } .navigation-desktop .navigation-mobile a { float: none; display: block; text-align: left; } }  
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,535
    • Most Online
      4,970

    Newest Member
    Rose Hale
    Joined
  • Forum Statistics

    • Total Topics
      65,732
    • Total Posts
      455,406
×