Learning curve in Javascript

by @santospatrick

5 years of Front-End
Graphic Design Degree
Angular, Vue and React developer
Currently working at Camera Hot

@santospatrick

https://github.com/MBaloochestani/Web-Developer-roadmap

Variables and hoisting

var meetup = 'Curitiba.js'

function log(){
    console.log(meetup);
}

if (true) {
    var meetupIsCool = true;
}

log();
// Output: Curitiba.js

console.log(meetupIsCool);
// Output: true

"var"

var meetup = 'Curitiba.js';
var meetupIsCool;

function log(){
    console.log(meetup);
}

if (true) {
    meetupIsCool = true;
}

log();
// Output: Curitiba.js

console.log(meetupIsCool);
// Output: true

Variables and hoisting

let meetup = 'Curitiba.js'

function log(){
    console.log(meetup);
}

if (true) {
    let meetupIsCool = true;
}

log();
// Output: Curitiba.js

console.log(meetupIsCool);
// Output: ReferenceError: meetupIsCool is not defined;

"let"

Variables and hoisting

const meetupIsCool = true;
const meetup = {
    local: 'Jupter'
}

meetupIsCool = false

// SyntaxError: Identifier 'meetupIsCool' has already been declared

meetup.local = 'Earth'

console.log(meetup)
// {local: 'Earth'}

"const"

Variables and hoisting

"var" = function scoped

"let" = block scoped

"const" = block scoped, cant be re-declared (can be updated if it is an object)

Event Delegation & Bubbling

<button class="card">
    <img src="path/to/img.png"/>
    <div class="content">
        <button class="close">X</button>
        <p>Some text for example</p>
    </div>
</button>

Event Delegation & Bubbling

<button class="card">
    <img src="path/to/img.png"/>
    <div class="content">
        <button class="close">X</button>
        <p>Some text for example</p>
    </div>
</button>

const card = document.querySelector('.card');
const close = document.querySelector('.close');

card.addEventListener('click', () => {
    console.log('clicked at card!')
});

close.addEventListener('click', () => {
    console.log('clicked at close button!')
});

Event Delegation & Bubbling

<button class="card">
    <img src="path/to/img.png"/>
    <div class="content">
        <button class="close">X</button>
        <p>Some text for example</p>
    </div>
</button>

const card = document.querySelector('.card');
const close = document.querySelector('.close');

card.addEventListener('click', () => {
    console.log('clicked at card!')
});

close.addEventListener('click', event => {
    event.stopPropagation();
    console.log('clicked at close button!')
});

target vs currentTarget

<button class="btn">
    <img src="path/to/star.svg"/>
    <span>some text</span>
</button>

SOME TEXT

target vs currentTarget

<button class="btn">
    <img src="path/to/star.svg"/>
    <span>some text</span>
</button>

const btn = document.querySelector('.btn');

btn.addEventListener('click', event => {
    console.log('target: ', event.target);
    console.log('currentTarget: ', event.currentTarget);
});

// target: <img src="star.svg"/> or <span></span>
// currentTarget: <button class="card">...</button>

Function declaration & expression

meetupDeclaration()
meetupExpression()

function meetupDeclaration(){
    console.log('function declaration')
}

const meetupExpression = function(){
    console.log('function expression')
}

// ReferenceError: meetupExpression is not defined

Arrow functions

const meetup = {
    local: 'Jupter',
    setLocal: function(newLocal) {
        const updateLocalAndUppercase = function(local) {
            this.local = local.toUpperCase();
        }
        updateLocalAndUppercase(newLocal)
    }
}

meetup.setLocal('Earth');
console.log(meetup.local);

Jupter

Earth

undefined

Arrow functions

const meetup = {
    local: 'Jupter',
    setLocal: function(newLocal) {
        const updateLocalAndUppercase = (local) => {
            this.local = local.toUpperCase();
        }
        updateLocalAndUppercase(newLocal)
    }
}

meetup.setLocal('Earth');
console.log(meetup.local);

JUPTER

EARTH

UNDEFINED

Arrow functions (React)

class App extends React.Component {
    state = {
        focused: false
    };

    setFocused() {
        this.setState({ focused: true });
    }

    render() {
        ...
    }
}

class App extends React.Component {
    state = {
        focused: false
    };

    constructor(props) {
        super(props);
        this.setFocused = this.setFocused.bind(this);
    }

    setFocused() {
        this.setState({ focused: true });
    }

    render() {
        ...
    }
}

class App extends React.Component {
    state = {
        focused: false
    };

    setFocused = () => {
        this.setState({ focused: true });
    }

    render() {
        ...
    }
}

Arrow functions (Vue.js)

export default {
    data() {
        return {
            inputIsFocused: false
        };
    },
    mounted() {
        const input = document.querySelector("input");
        input.addEventListener("focus", function() {
            this.inputIsFocused = true;
        });
    }
}

export default {
    data() {
        return {
            inputIsFocused: false
        };
    },
    mounted() {
        const input = document.querySelector("input");
        const self = this;
        input.addEventListener("focus", function() {
            self.inputIsFocused = true;
        });
    }
}

export default {
    data() {
        return {
            inputIsFocused: false
        };
    },
    mounted() {
        const input = document.querySelector("input");
        input.addEventListener("focus", () => {
            this.inputIsFocused = true;
        });
    }
}

setTimeout()

console.log(1)
console.log(2)
console.log(3)

// 1, 2, 3

setTimeout(function(){
    console.log(1);
}, 0);
console.log(2);
console.log(3);

1, 2, 3

2, 3, 1

3, 2, 1

undefined

setTimeout()

setTimeout(function(){
    console.log(1);
}, 1000);

setTimeout(function(){
    console.log(2);
}, 500);

setTimeout(function(){
    console.log(3);
}, 250);

1, 2, 3

2, 3, 1

3, 2, 1

undefined

Cloning arrays & objects

var arr = [1,2,3];
var arr2 = arr;

arr.push(4)

console.log(arr2)

1, 2, 3

1, 2, 3, 4

undefined

var arr = [1,2,3];
var arr2 = arr.concat();
// or
var arr2 = [...arr];

arr.push(4)

console.log(arr2)
// 1,2,3

Cloning arrays & objects

var obj = { local: 'Jupter' };
var obj2 = obj;

obj.local = 'Earth';

console.log(obj2);

Jupter

Earth

undefined

var obj = { local: 'Jupter' };
var obj2 = Object.assign({}, obj);
// or
var obj2 = {...obj};

obj.local = 'Earth';

console.log(obj2);
// { local: 'Jupter' }