DEV Community: thomasaudo

Array manipulation in JavaScript 🧐

thomasaudo — Tue, 12 Feb 2019 23:59:41 +0000

Introduction

When we start programming, we tend do create our own function with our own loop to manipulate arrays.

In reality, almost all OOP languages, including JavaScript, provide us methods to achieve it.

If you begin with JavaScript, this article should be really useful, for others, it will be a great reminder

Every

The every method allows us to test if all the elements of an array verify a condition.
This method returns true if all elements verify the test, otherwise, false.
The condition is a function.

For example, the following example will test if every 'human' in our array is an adult:

// The condition has to return a boolean
function condition (human) {
    return human.age >= 18
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.every(condition))
// Should output false

However, the some() method returns true if at least one element passes the test

Filter

The filter method creates and returns a new array with all elements that verify a condition.
The condition is a function.

The following example returns an array uniquely composed of adult:

function condition (human) {
    return human.age >= 18
}
var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.filter(condition))
// Returns Thomas and Luc

Find

The method find() returns the first element in the array that verify the condition.
Otherwise, if no element verifies it, find() returns 'undefined'.
As usual, the condition is a function.

This example returns the first adult:

function condition (human) {
    return human.age >= 18
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.find(condition))
// Should returns Thomas

Map

The map method creates a new array with the return value of a function executed for each element of the calling array

This example increments the age of each human:

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.map(function(element){
    element.age += 1    
    return element
}))

Reduce

Last but not least, the reduce() method is for me the most tricky one.

The reduce method reduces an array to a single value by executing a provided function for each value of the array.
For each element, the return value is stored in an 'accumulator' that can be used in all the iterations.
The final return value of the reduce() method is this accumulator.
The accumulator should be initialized in the method call

Furthermore, the reducer function can take two other parameters:

The current index
The source array

This example returns the sum of ages:

function reducer (accumulator,element) {
    return accumulator + element.age
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.reduce(reducer,0))

The previous example is very simple, but the reduce() method is really powerful, you can achieve a lot of things with it.

Conclusion

Thank's for reading me, if you have any questions, ask them! 🧐

Better if statement w/ ternary operator ? : 💻

thomasaudo — Tue, 05 Feb 2019 20:45:48 +0000

The if operator is a mainstay of computer programming, we use it everywhere.

Sometimes we need to test a value to then, execute some simple code:


if (a === b) {
    console.log('true');
} else {
    console.log('false');
}

This syntax is really clear and simple to use, but it takes a lot of place.

In a large-scale program, it can reduce the visibility and comprehension of the whole.

For a simple case like this, it's often more simple to use the ternary operator.

Syntax

(condition) ? (operation A) : (operation B)

This operator is very useful but often unknown or misunderstood by programmers.

Details:
- condition, the condition
- operation A, the action to execute if the condition returns true
- operation B, the action to execute if the condition is false, concretely an else

Example

Here is a simple example in javascript :

// If the age >= 18, then the adult variable takes the value true, otherwise, it's taking the value 
//false

age >= 18 ? adult = true : adult = false

// With a basic if statement

if (age >= 18 ) {
    adult = true
} else {
    adult = false
}

Way simpler no?

Another example: a function which returns the GCD of a and b.
However it's not the best example at all.

Indeed, it's not easy to read, a normal if statement will be better in this case.

function gcd(a, b) {

    return ( (a%b) === 0 ?  b : gcd(b, a%b) )

}

Conclusion

To conclude, this notation is really helpful and help us increase our productivity.
However, it has to be used in really simple cases.

For complex statements or operations, the if / else notation is still the best way!

Thanks for reading me 😇

Get started with GitHub GraphQL API 👨‍🔬

thomasaudo — Wed, 23 Jan 2019 18:04:10 +0000

GraphQL APIs are since a few years more and more popular. The purpose of this tutorial is not to teach you the GraphQL concepts and techniques but to teach you how to query the GitHub GraphQL API.
I will use Node.js for the example, but you can achieve it with any programming language which allows you to perform HTTP request.

Setting up

First of all, you need to create a personal access token.

github > settings > developper settings > personnal access token > generate new token

Github will ask you a token description and the scope for your application, select what you need.

Now that we have our token, it's query time 🎯

Create Query

To test and create your queries, GitHub proposes a very powerful tool : GraphQL API Explorer.

For this example, I've created a very simple query to get my GitHub pinned repositories, which is not possible with the GitHub REST API.

query{
  repositoryOwner(login: "thomasaudo") {
    ... on User {
      pinnedRepositories(first: 6) {
        edges {
          node {
            name,
            description,
            url
          }
        }
      }
    }
  }
}

The documentation is really complete 📒

Query

To query the GitHub server, we will need to send a post request to the unique endpoint
Of course, we have to custom a little bit our request :

A parameter: the query
Bearer Authentication also known as token authentication: your personal access token ( in the header )

A CURL example from the GitHub official documentation :

curl -H "Authorization: bearer token" -X POST -d " \
 { \
   \"query\": \"query { viewer { login }}\" \
 } \
" https://api.github.com/graphql

I have created a really simple nodeJS example. To perform the query, I use the package 'axios'.

// Require axios to perform easy promise-based POST request
const axios = require('axios');
// Define constant
// Endpoint URL
const githubUrl = 'https://api.github.com/graphql'
// Your personal access token
const token = '7bacddc5d40dabfe6edca28b986a0247cfe3803b'
// The Authorization in the header of the request
const oauth = {Authorization: 'bearer ' + token}
// The GraphQL query, a string
const query = '{' +
                'repositoryOwner(login: "thomasaudo") { ' +
                  '... on User {' +
                    'pinnedRepositories(first: 6) {' +
                      'edges {' +
                        'node {' +
                          'name,' +
                          'description,' +
                          'url' +
                          '}' +
                        '}' +
                      '}' +
                    '}' +
                  '}' +
                '}'

// Post request, axios.post() return a Promise
axios.post(githubUrl, {query: query}, {headers: oauth})
  .then(function (response) {
    // On success, print the response
    console.log(response.data);
  })
  .catch(function (error) {
    On error, print the error
    console.log(error);
  });

Here we are!

I hope you have liked this post, my first one 🚀