Small Logo
Hammockweb
JavaScript arrays, Content Manipulation of JS Arrays

Hammockweb Logo Hammockweb Logo

Header Image

JavaScript Arrays and Methods for Content Manipulation
Mar 27 2016

    Arrays are very useful type of data structures extensively used in computer programming. An Array is defined as a linear collection of elements, where any element of the Array can be accessed via indices, usually an integer. In JavaScript, Arrays are non-homogeneous JavaScript Objects. Literal JavaScript arrays are formed using square brackets []. Elements of literal arrays are also accessed using the same square brackets []. All Arrays have a length property (arrayname.length;) which declares the number of elements present in an Array. JavaScript Arrays can consist of elements such as numbers, non-homogeneous elements such as number and strings, separate arrays, and functions. The indices in JavaScript Arrays are property names which can be integers. These integers are first converted to strings, just like any other JavaScript object.

    Useful JavaScript methods for Content Manipulation of Arrays

    1.  Adding or Removing Single Elements at the Beginning or End of an Array: Use unshift to add a single element at the beginning or front of an array, and shift to remove a single element from the beginning or front of an array. Following example will further clarify:

    const arr1 = [1, 2, 3];

    arr.unshift(“4”);// returns 4; arr is now [4, 1, 2, 3]

    arr.shift(); //returns 4; arr is now back to [1, 2, 3]

    Use push to add a single element at the end or back of an array, and pop to remove a single element from the end or back of an array. Following example will further clarify:

    const arr = ["b", "c", "d"];

    arr.push("e");// returns 4; arr is now ["b", "c", "d", "e"]

    arr.pop();// returns "e"; arr is now ["b", "c", "d"]

     

    2.  Adding Multiple Elements at the End of an Array: Use concat method to add multiple elements to an array. Using concat will not break arrays inside arrays. Example:

    const arr = [1, 2, 3];

    arr.concat(7, 8, 9);// returns [1, 2, 3, 7, 8, 9]; arr unmodified

    arr.concat([7, 8, 9]);// returns [1, 2, 3, 7, 8, 9]; arr unmodified

    arr.concat([7, 8], 9);// returns [1, 2, 3, 7, 8, 9]; arr unmodified

    arr.concat([7, [8, 9]]);// returns [1, 2, 3, 7, [8, 9]]; arr unmodified

     

    3.  Getting a Subarray: Use slice to get a subarray from an array. It can take two arguments, which will define the beginning and end of the subarray. If we don’t use the end argument the subarray will return everything till the end of string. Following example will explain the concept in more detail:

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

    arr.slice(3);// returns [4, 5]; arr unmodified

    arr.slice(2, 4);// returns [3, 4]; arr unmodified

     

    4.  Adding and Removing elements at a specific position of an Array: Use splice to add or remove any number of elements from an array. The first argument specifies the index element from which modification should start. The second argument specifies the elements we want removed (using 0 in case you don’t want to remove any element). The third argument/s provides the elements to be added in an array. Example of splice method:

    const arr = [1, 5, 7];

    arr.splice(1, 0, 2, 3, 4);// returns []; arr is now [1, 2, 3, 4, 5, 7]

    arr.splice(5, 0, 6);// returns []; arr is now [1, 2, 3, 4, 5, 6, 7]

    arr.splice(1, 2);// returns [2, 3]; arr is now [1, 4, 5, 6, 7]

    arr.splice(2, 1, 'a', 'b');// returns [5]; arr is now [1, 4, 'a', 'b', 6, 7]

     

    5.  Cutting and Replacing within an Array: Use copyWithin to take a sequence of elements from an array and replace them to a different part of the array or overwrite whatever elements are there. The first argument of this method will specify the target where intended elements are to be copied. The second argument will mention the element from where the copying will start. The third argument is optional and will mention the element where copying should stop. Example of copyWithin method.

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

    arr.copyWithin(1, 2);// arr is now [1, 3, 4, 4]

    arr.copyWithin(2, 0, 2);// arr is now [1, 3, 1, 3]

    arr.copyWithin(0, -3, -1);// arr is now [3, 1, 1, 3]

     

    6.  Filling an Array with a Specific Value: Use fill to set any number of elements with a fixed value. Example of fill method are:

    const arr = new Array(5).fill(1);// arr initialized to [1, 1, 1, 1, 1]

    arr.fill("a");// arr is now ["a", "a", "a", "a", "a"]

    arr.fill("b", 1);// arr is now ["a", "b", "b", "b", "b"]

    arr.fill("c", 2, 4);// arr is now ["a", "b", "c", "c", "b"]

    arr.fill(5.5, -4);// arr is now ["a", 5.5, 5.5, 5.5, 5.5]

    arr.fill(0, -3, -1);// arr is now ["a", 5.5, 0, 0, 5.5]

     

    7.  Reversing and Sorting Arrays: Use reverse method to reverse the order of an Array and sort to sort the elements of an Array. Sort method also allows us to use a sort function. Example:

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

    arr.reverse();// arr is now [5, 4, 3, 2, 1]

     

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

    arr.sort();// arr is now [1, 2, 3, 4, 5]

     

    const arr = [{ name: "Suzanne" }, { name: "Jim" }, { name: "Trevor" }, { name: "Amanda" }];

    arr.sort((a, b) => a.name > b.name);// arr sorted alphabetically and then by name property

    arr.sort((a, b) => a.name[1] < b.name[1]); // arr sorted reverse alphabetically and then by second letter of name property

     

    JavaScript Web Development Company

    HammockWeb is a Web Development Company having expertise in JavaScript. If you are looking for outsourcing JavaScript projects then do Contact Us.


     Comments

    No Comment Found

    Your name field required
    Comments field required
    Captch code field required

    Blog Category

    You may also like...

    Web Design That Generates Leads

    Unless they’re coming in from one of your amazing blog posts (you do have a blog, right?), your home page will be the first impression your future client or customer gets of you. It may be the only time they ever look at your business. You don’t want them to run screaming off into the distance. You want them to, you know, stick around and eventually maybe even buy your stuff or hire you. Here are some tips from a leading web design agency in Los Angeles, for designing a home page that generates leads. 

    Make It Professional

    The first step to designing a home page that generates leads is to make sure it looks professional. I’m sure you already know that you don’t want a website that looks like it’s designed by a kindergartener (although these days…)

    This isn’t the 90s. Slapping fifty different colors down on a black background with three JavaScript popups is a thing of the past. But you also can’t just stick your text into the basic WordPress theme and call it a day.

    You want a site that looks reputable. And that might cost some money. You should at least spend a bit for the pro version of a theme.

    Before you spend some bucks, though, do some research. Who are your competitors? Better yet, which of your competitors seem to be doing good business. What does their website look like? What do other professional sites in your field look like?

    Take some notes. Make some sketches. Yes, I know. It’s like school, but it’ll pay off in the end. You don’t want other people getting your business, just because your website looks sketchy.

    Now look at your notes. Can you make your website with a WordPress theme? Great! Go ahead!

    Need a fancier website. Find WordPress intimidating? Hire a web development firm. You’ll thank yourself later.

    If you’re making the web page yourself, here are a few tips.

    •        Leave some white space

    •        Keep clutter down

    •        Use one or two compelling images that represent what your company does

    •        Don’t do almost anything that looks like it walked out of the 90s

    Tell Them What You Do and How It’ll Help Them

    This may seem like a no-brainer, but when you're designing a home page, you should definitely make sure your potential customers or clients know what you do or what you sell. I don’t just mean something vague like “web designer.” Be specific, because your future customers are looking for specifics. Let them know you’re a web designer specializing in e-commerce sites or a ranch that sells, specifically, organic free-range dinosaurs.

    Once they know what you do, make sure your visitors know how what you do will benefit them. Your e-commerce site designs may increase their sales or their productivity. Your free-range dinosaur meat may give them vitamins lost since the dawn of time.

    Don’t forget to provide examples. If you do project work, such as designing web pages or editing books, link to a portfolio. That way customers can get an idea of what you do and how you do it.

    Give a Clear, Immediate Call-to-Action

    In order to design a home page that generates leads, you have to actually prompt people to do something that will add them to your list potential clients. Now, it may take a bit to reel in a new client. Or they may be ready to work with you right this moment. Either way, your home page should direct the visitor to do, well, something. And, for the eager visitor, it should do it before that visitor ever scrolls down. This should be your primary call-to-action, which means it should be something like “Get a Free Quote” or “Buy This Thing and Save 20%” or “Fill Out This Form and Get This Free Thing.”

    Personalize Your CTAs

    This will get a bit more complicated, but if you can you should personalize your CTAs. Hubspot says that personalized CTAs work 42% better than just plain old unpersonalized CTAs.

    What’s a personalized CTA? A personalized CTA adapts to your visitor. For instance, if your visitor has already filled out your newsletter form, you don’t want your CTA to prompt them to fill out the same form again. Instead, you might want offer them a free quote instead.

    Provide Social Proof

    You know what the best advertisement is? Word of mouth. Word of mouth, however, is a bit hard to set off just whenever you want.

    You know what’s almost the same as word of mouth? Testimonials and big name clients. Put a few on your front page to prove you’ve actually done something that someone likes.

    This is called social proof. Dr. Robert Cialdini did a study (see a write-up of it) where he encouraged people to reuse towels in a hotel. Cialdini found that more people reused towels if told that other people also reused towels than reused towels if told that reusing towels would mean the hotel would donate money to help the environment. In other words, social proof was an even more powerful motivator than altruism.

    Where do you get testimonials? Well, from your clients and customers. It’s not rude to ask. If people like your work, I’ve found they’ll be eager to give you a bit of help.

    Put Your Address and Telephone Number

    If you have a physical address, put it on your home page. If you have a telephone number, put it on your home page. They’ll make you look like you’re a real person. (You are a real person, right?)

    Keep Your Home Page Your Home Page

    One-page home pages are popular right now, but if you can’t keep your website sleek enough to fit one page, I’d suggesting putting some stuff a bit deeper. Put an example post or two on your front page, but give the rest of your blog its own space. Same with your portfolio. Basically, just don’t make your visitors scroll on for all eternity.

    Make Sure Your Website is Responsive

    Your whole website should be responsive, but pay special attention to how your home page design looks on mobile phones. Is the call-to-action still one of the first things your visitor sees. Is it still obvious what you do? Is the text large and readable? Can a visitor still fill out any forms, even if they’re on a phone?

    Basically, if you give your business card to someone and then they look up your website on their smartphone, will they be impressed or confused?

    Your home page is important. It's not just something you throw up because you're supposed to have a main page! It's not just a welcome mat. It is, in a way, your front window into the world. And, with a little thought, a home page can be designed so that it generates leads and brings you more business

    6 Things you need to Know to Design a Great Website User Experience

    A website that makes a visitor feel like it was designed just for them, does wonders in retaining those users and making them come back for more. Navigation, text, media and graphics are the primary factors which should be kept in mind while designing a website.

    Understanding how visitors browse through sites is important to determine the dos and don’ts of web development. Here, we are listing some tips that will improve your website’s user experience and navigation.

    Information is Important

    Imagine this: You visit a website which is attractive in design, but it doesn’t give you the information you need, or is overshadowed by the visuals. Will you stay on the website?

    Although design is a great factor in attracting visitors, it is not usually the design a user is looking for. A website that focuses on the design more than the information tends to be overwhelming to the visitor, leading to the user abandoning the webpage and searching for another source.

    A web development company should bear in mind to keep the design simple and uncluttered. Integrate designs and images in your website which will help the user easily determine what the site is about and where to look for certain information. If the design hinders the user in acquiring information, get rid of it and replace it with a design that aids the user in finding out what they want in a hassle-free manner.

    Be Responsive

    The saying “content is like water” is the basis of responsive web designs. Designing a website that is responsive means that content can be viewed easily in all devices—laptops, mobiles, tablets, you name it. Getting a responsive design for your website ensures that your visitors are not annoyed if they have to constantly zoom in to read the content while using a smartphone.

    Since 80% of internet users utilize mobile devices, it is important for a website designing company to understand that websites should accommodate mobile and smartphone users or be left behind in the competitive race of web development.

    Furthermore, Google has changed its algorithm and now ranks your website on the basis of how mobile-friendly it is. So if businesses want to improve the ranking of their websites, going mobile is a great option.

    Cut Down on the Page Load Time

    Whether you are standing in a queue, or hanging around for the lunch you ordered to arrive, waiting is frustrating. Waiting for a webpage to load is a similar experience and since, in this case, a user has the choice to leave the page entirely, this is commonly the option people opt for when a page takes too long to load. According to Radware, a two second delay in website’s loading time resulted in abandonment rates as high as 87%.

    Moreover, with a high page load time, businesses suffer more today than they did a few years back. In 2010, if a page took six seconds to load, it suffered a conversion hit of -40%. Today, the same time will take a hit of -50%. Users expect a sleek and friendly webpage where they don’t have to wait too long and it is up to the web development company to provide them that.

    You can use GT Metrix, Website Grader, and Google’s PageSpeed Insights to analyze your site’s speed and make fixes wherever required. Enabling browser caching and compression and optimizing images will minimize your page load time to a great extent.

    Be Visually Responsible

    Images are a great way to tell a story without words. Successful websites make the use of images on their home pages to tell the visitor what the business is about and what the visitor will get out of it. Too much of a good thing, however, is dangerous.

    As we’ve mentioned above, images hog a lot of bandwidth, which results in a high page load time for a website. To counter that, images should be scaled down or compressed so that bandwidth remains free and visitors to your website can enjoy a great website-user experience.

    Another thing to keep in mind, while designing a website, is that images should not be stock photos. Instead, use images of your own. Remember, the purpose of a website is to brand your image, and it won’t be possible if you are not using images of your own company/products.

    The Navigation Bar is Your Friend

    So, now that you have a responsive website with a simple, elegant design and have taken measures to reduce the page load time, you have ensured that a user will visit your website without hassle. The next step is to plan to make the visitor stay on your site, and here’s where the navigation bar comes into play.

    Navigation bar is a guide to your website, and if the guide is not helpful, the visitor will not be engaged and will promptly leave. According to a research by Forrester, if the first visit to a website is negative, 40% of the visitors will not return.

    When you are hiring a website development company to design a corporate website, discuss your content with them and the design for the navigation bar. Design director Daniel Alves comments that the navigation bar is “the most important design element on a website.”

    In order to create an interactive navigation bar, keep the design simple and easy-to-read. Since people read in a left-to-right pattern, it is advised to keep your products and services on the left of the bar and the “actions” on the right.

    Sharing is Caring

    Social sharing is the new boom. Integration of social media sharing buttons gives you the opportunity to make your visitors your advertisers. The more the people share your web pages on social networks, the more your exposure is increased. So embrace the practice of social media sharing and watch as the traffic on your website multiplies!

     

    Bottom line: Keep the user’s perspective in mind. If there is anything that annoys you while browsing sites, chances are that they will annoy other users, too, so it is best to employ those methods which help the user find exactly what they are looking for on your site without getting lost or overwhelmed by your website navigation. A user-friendly website will entice new visitors and turn them into regulars.