JS_入門

初めての投稿です。今回は、Web系を開発する際、知っておくべきなJS文法をまとめました。QITTAで、開発を通して学んだ知識をまとめていきたいと思います。

JS_function

objectについて

//object
object = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 33
};

console.log(object.key1) //value1

//nested object
const object ={
    object_within_object :{
        key1 : 'value1',
        key2 : 'value2'
    }
};    

console.log(object.object_within_object.key1) //value1

//dot notation and bracket notation
console.log(object.key1) //value1
console.log(object['key1']) //value1

methodの作り方

// method is a function that belongs to an object

const object = {
    method1: function function1() {
        console.log('Hello from method1');
    },

    method2: function function2() {
        console.log('Hello from method2');
    }
};

// Call the methods
object.method1();
object.method2();

functionの作り方

// one argument
function function1 (input){
    let output = input * 10;
    console.log(output);
}
function1(5); //50

// two argument
function function2 (input1,input2){
    let output = input1 * input2;
    console.log(output);
}
function2(5,2); //10

//callback function
function callbackfunction(){
    console.log('hello');
}

function function2(param){
    param();
}

function2(callbackfunction) //hello

//arrowfunction を使うと、function書かなくていい
const arrow = (name) => {console.log(`hello my name is ${name}`)}; 

Anonymous function

//named function
function normal(){
    console.log('im normal');
}

//anonymous function
const anonymous = function (){
    console.log('im anonymous');
}

setTimeout(function(){
    console.log('im anonymous');
    },3000)

//↑ anonymous functionは何らかのvaribaleで保存するか、callback functionとして使う     

function の return

const person = function funtion1(){
    return {
    name:'shaoyik',
    age: 22
    };
};

const p = person(); //p()と書いたら、p is not a functionが出る。pはすでにobjectのためです。

console.log(p.name)//shaoyik
console.log(p.age)//22

callback function

//列を並ぼう！synchronous
//後からまたくるね～ asynchronous

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

//出力結果
1
3
2

//passing functions as arguments
function myPromise(callback){
        function success(){
        return 'success';
        }
        function failed(){
        return 'failed';
        }
        callback(success,failed);
}

myPromise((a,b)=>{
    console.log(a() + b()); //出力結果 successfailed
})

promise (constructor function)

const status = true;

const p = new Promise((resolve,reject) => {
    if(status){
        resolve("resolve(): order placed");
                }
    else{
        reject("reject(): order cancelled");
        }
    }
);

// The Promise constructor creates a Promise object,
// which is assigned to the variable p.
p
.then((message) => {console.log(`${message} - done`);})
.catch((message) => {console.log(`${message} - failed`);});

Async Await

function sendRequest(){
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('sent')}
        ,2000);
    });
}

async function getMessage(){
    try{
        const message = await sendRequest();
        console.log(typeof message);
    }
    catch(message){
        console.log(`ERROR ${message}`);
    }
}

getMessage();
// When the Promise returned by sendRequest() is fulfilled, await retrieves its value and assigns it to message.

fetch

//書き方①

const pokemon = fetch("https://pokeapi.co/api/v2/pokemon/pikachu");

const pokemonData = pokemon.then((response)=>{
    return response.json();
});

pokemonData.then((data)=>{
    console.log(data);
});

//書き方②
const pokemon2 = fetch("https://pokeapi.co/api/v2/pokemon/pikachu");

pokemon2.then(function(response){
        return response.json();
}).then(function(data){
    console.log(data);
});

//書き方③
fetch("https://pokeapi.co/api/v2/pokemon/pikachu")
.then((response)=>{return response.json()})
.then((data)=>{console.log(data)});