
Let's talk about __statements__ and __expressions__. It's very important to understand difference between them.

I've checked several articles on this topic and in a lot of them authors say something like: OK, we have statements, we have expressions, we can use expressions in place of statements but not in reverse. It is kind of true, but not completely.

It's not like you can apply hammer-wrench 🛠️ analogy. Like __statement__ is a hammer 🔨 and __expression__ is a wrench 🔧. And as like with heavy enough wrench you can use it as a hammer – you can apply __expression__ in place of a __statement__.

No, it's not like that. An expression is always part of statement. Even if that statement only consists of that expression.

## Contents

* [Statements](#statements)
* [Expressions](#expressions)
* [Conclusion](#conclusion)

<a name='statements'></a>
## Statements

When we write programs - we describe the sequences of actions that should be performed to get a desired result. In programming languages those actions are called statements. 
So every _Javascript_ program basically consists of statements. In Javascript statements are separated by semicolons.

Important note:

> You can use just newlines and omit semicolons, because Javascript puts semicolons in the end of lines automatically, but ❌ __this is not recommended__. There are cases where it can lead to ambiguity. See the [automatic semicolon insertion](https://www.ecma-international.org/ecma-262/#sec-automatic-semicolon-insertion) section of ECMAScript specification.

All of those are statements:

```js
let declaredVariable; // variable declaration is a statement
let otherVariable = 0; // even with assignment
function functionCall() { // function declaration is a statement
}
if(true){} // if is statement
2+2; // even this is statement
// Even though it consists from only one expression
```

As you can see statements just do things. They are kind of language _phrases_. They can contain smaller parts, for example expressions.

<a name='expressions'></a>
## Expressions

Simply speaking an __expression__ returns a value:

```js
2+2
true
true && false
functionCall() // whatever the function returns
declaredVariable // whatever the variable value was
declaredVariable = 'new value' // assignment is an expression
```

Actually just `"foo"`, `{foo: 'bar'}`, `[1,2,3]`, or `42` are also expressions, they are called `literals` (string, object, array and number literal) because they just return their literal value.

And even this small expressions can be statements on their own.

```js
2;
```

This is statement. It's useless. It doesn't help, but still. As you can see it consists from only one expression. Statements like this are called `expression statements`.

<a name='conclusion'></a>
## Conclusion

Javascript program consists of statements. They are executed one by one, in the same order as they are written. Statements can contain other constructions like expressions, keywords, operators and other stuff.

Expressions are parts of statements that return values. So expressions can be used whenever value is expected.

Sometimes you can use `expression-statements` instead of usual statements, `if-else` is good example:

```js
let foo;
if (bar === 'bazz') {
  foo = bar;
} else {
  foo = null;
}
```

You can use this `expression` instead:

```js
let foo = bar === 'bazz' ? bar : null
```

That's it, it was short, but I hope it helped to structurize the knowledge.


Js Statements Vs Expressions


Last Tuesday I had my first talk in Stockholm and actually ever in life.

Recently (3 months ago) I moved to Stockholm. Now I work in [0+x](https://0x.se/) as a consultant. And recently I had a chance to participate in local ReactJS meetup organized by 0+x. I was talking about type checking Javascript statically.

I want to thank [@nipher_jonas](https://twitter.com/nipher_jonas), [@WayeBenjamin](https://twitter.com/WayeBenjamin) and Maria Verbenko for help and support.

Here I'd like to share the link to event recording and slides:

* [Slides](https://t.co/UFs48Ytw5e)
* [Recorded Video](https://www.facebook.com/0plusx/videos/350180662055043/)

Also this article is basically a text version of the talk - [Do You Need Static Type Checking?](http://localhost:8000/posts/static-type-checking-js/)

## Some Images

![Maksim Ivanov](/image_1.JPG)
![Maksim Ivanov](/image_2.JPG)


My First Javascript Talk


This article is part of react course I'm currently working on. It will be free beginners course published on Udemy. This is an introduction, where I tell what is React, what are React key features and give a quick app example.

## Contents

* [Where Is Used?](#where_is_used)
* [Declarative](#declarative)
* [Component Based](#component_based)
* [Easy To Test](#easy_to_test)

<a name="where_is_used"></a>
## Where Is used?

ReactJS is an open source library for building user interfaces.

It is used by many big companies: Facebook, Instagram, Netflix, Paypal, Apple and more.

React is primarily used to create applications that can change displayed data without needing to reload the page. Think of Facebook or Instagram feeds that load more posts as you scroll.

But react use cases are not limited by single page applications. It supports server rendering so you can build blazing fast static web-sites. And also it is broadly used for mobile and desktop development and even for AAA game titles like Battlefield.

Let's discuss key advantages that React provides.

<a name="declarative"></a>
## Declarative

React provides a JSX syntax to declaratively describe your applications UI.

Basically you define simple views for each state of your application and React handles data updates and automatically re-renders only the affected parts.

As opposed to __imperative__ programming where you describe __how__ should DOM be changed - in React you describe __what__ should be rendered for given data.

<a name="component_based"></a>
## Component Based

React provides tools to encapsulate your layout inside __components__. This allows you to scale easily and build very complex UIs by composing simple self-sufficient views.

![react application tree](app.png)

React has unidirectional data flow. That means that you can pass data only __down__ the tree. This makes it much easier to debug and reason about.

<a name="easy_to_test"></a>
## Easy To Test

For the same set of parameters react component will render the same output. It is achieved by avoiding using state in your components. This makes it insanely easy to test your components. You just check that your component returns expected output for given inputs.

If you components handles user interaction - it's still super easy. React uses bound callbacks so you can use test spies to check if the right callback was called after you've clicked the button for instance. And the fact that React components render themselves, makes it possible to just trigger an event and check the resulting HTML for changes

I really liked the comparison that I found in an old [Mateo Clarke blog post](https://www.mateoclarke.com/blog/2015/08/26/what-i-learned-react/)

![react compared to jquery](jquery-style-vs-react-style.png)

> In jQuery, you write event handlers which modify the DOM.
In ReactJS, you write event handlers which modify the state. And you write render() to reflect the current state.

This makes what's happening inside your component really transparent.
