웹 개발자에게 가장 유용한 JavaScript 기능

16664 단어 beginnersprogrammingjavascriptwebdev

내용의 테이블



📌 Introduction

📌 Most Useful Functions of JavaScript

➡ Map function

➡ Filter function

➡ Promises

➡ Async Await

➡ Logical and Ternary Operator



📌 Thank you



소개

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and some instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉

Let's Start !

JavaScript의 가장 유용한 기능

지도 기능

Map function is one of the most used functions by web developers, mainly all the JavaScript Frameworks have a great use of this function when it comes to iterate through an Array. It returns the updated array and you can store the same. Let's discuss the function in a broader way including all the ways to implement it.

Here's the structure of the Map function -

이제 Map 함수의 구조에 익숙해진 것 같으니 몇 가지 예제를 통해 구현해 보겠습니다.

예:


const array1 = [1, 4, 9, 16];

//value for callback function
const map1 = Array.prototype.map.call(array1,
(x) => 
{return x * 2});

//without value of callback
const map2= array1.map(x => x*2);


산출:

2
8
18
32


for, while, do-while과 목적이 비슷합니다.

필터 기능

Do you want to filter some values out of an Array ? Then , this function is the one you should go first ! There are many instances in development where we need to fetch some specific values out of an array. This is where it comes into play.

Filter function is used with Arrays to fetch some values from the Array which satisfies some condition like greater than 7 or something. The return type of the function is the array of those values satisfying the condition.

Let's discuss the structure of the filter function -

이제 Map 함수의 구조에 익숙해진 것 같으니 몇 가지 예제를 통해 구현해 보겠습니다.

예:


const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//value for callback function
const updatearray = Array.prototype.filter.call(numbers,
(element) => {return element > 6});

//without value of callback
const updated = numbers.filter(element => element > 6);


산출:

7
8
9
10



약속

Promises are very useful when it comes to web development in terms of making an API call to server to third party services. The Promises have 3 stages namely Pending, Fulfilled, Rejected . To handle the requests without blocking the DOM , promises and async await are used.

예:

//example with fetch function of javascript
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))


산출:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}



비동기 대기

Promises are very useful and any major project has a good part of it involved. But the syntax is not that clean to be used right ?
The bridge of then and catch is something that becomes problematic when there are 2-3 promises lined up based on the response of the earlier ones.

That's where Async Await comes it play !

The purpose of Async Await is to help writing API Calls without .then and .catch bridges which makes it cleaner to read and the return of the Call is returned by await which can be stored on a variable to access

Let's have a look into it's structure -

예:

//example with async and await function of javascript
async function sample () {
    try {
      const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const data = await resp.json();
      console.log(data);
    }
    catch {
      (err) => {console.log(err)};
    }
}


산출:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}



논리 및 삼항 연산자

While working over various projects operators are something that plays a major role in implementing a lot of logic part and maintaining the cleanness of the code. Two most used operators are Ternary ( ? : ) and Logical operators ( && and || ).

Let's discuss it in a broad way so that you can use it efficiently in your next project -

Ternary Operator

다음은 이해를 돕기 위한 예입니다.

예:

//example with ternary operator with true output
const value = ( 5 < 7 ) ? "True" : "False" ;

//example with ternary operator with false output
const value = ( 5 > 7 ) ? "True" : "False" ;


산출:

True
False


논리 연산자



다음은 이해를 돕기 위한 예입니다.

예:

//example of logical operator with true and false
console.log(0 && 1);
console.log(0 || 1);

//example of logical operator with in-depth understanding
// and operator looks for false so it goes till 7 
console.log(5 && 7);
// or operator looks for true so it goes only till 5
console.log(5 || 7);


산출:

0
1

7
5



고맙습니다

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

이제 다시 Teraterm의 기본 설정을 시도했습니다.
React 18의 자동 배치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage