자바스크립트 find()함수

유저가 검색을 하였을 때, 해당 검색내용이 유효하면 localstorage에 검색값을 저장하고자 한다.

그런데 유저가 여러 번 같은 값을 검색하면 localstarage에 같은 검색어가 저장되게 된다.

이에 find()함수를 이용하여, 이미 존재하는 검색어이면 저장하지 않도록 할 것이다.

우선 find함수의 사용법을 알아보자.

find()📌

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const result = inventory.find(fruit => fruit.name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

위의 코드를 보면 arr.find()를 이용하여 배열 안에서 원하는 값을 뽑을 수 있다.

이제 실제로 사용해보자.

	let getUser = [];
    const savedUser = localStorage.getItem("username");
    //localStorage에서 값 가져옴
    if (savedUser !== null) {
      getUser = JSON.parse(savedUser);
    }
    // localStorage에값이 존재하면 해당 값을 parse를 하여 
    // json 문자열 값을 JavaScript 값이나 객체로 생성합니다.
    if (data !== undefined) {
    //api에서 들어온 data가 있다면(즉, 검색어가 유효하다면)
      const newObject = {
        username,
        server,
      };
      //검색된 서버와 게임아이디를 object로 생성
      const exist = getUser.find(
        (element) => element.username === newObject.username
      );
      console.log(exist);
      if (exist) {
        return;
      }
      //localStorage에서 가져온 값에 같은 게임아이디가 있는지 체크
      getUser.push(newObject);
      localStorage.setItem("username", JSON.stringify(getUser));
      //없다면 localStorage에 새로운 object추가
    }

성공!!!👍