"JavaScript related"에 해당되는 글 - 35건

◀ 이전 1 2 3 4 다음 ▶

Post

JavaScript Array.includes

[ JavaScript related ] 2023. 1. 27. 04:47

.includes로 배열의 중복값 확인

(1) 문자 배열

JavaScript

const animals = ["lion", "dog", "cat", "fox"];
console.log(animals.includes("dog")); // true
console.log(animals.includes("monkey")); // false

배열.includes는 중복되는 값이 있을 시 true, 없을 때는 false를 반환한다.

 

 

 

(2) 숫자 배열

const numbers = [55, 22, 14, 67];
console.log(numbers.includes(14)); // true
console.log(numbers.includes("14")); // false
console.log(numbers.includes(Number("14"))); // true

숫자로 이루어진 배열일 때도 정상적으로 기능한다.

 

 

 

(3) 오브젝트 배열

const animals = [
  { name: "lion", size: "big" },
  { name: "dog", size: "middle" },
  { name: "cat", size: "small" },
  { name: "fox", size: "small" },
];
console.log(animals.includes("dog")); // false
console.log(animals.includes("monkey")); // false
console.log(animals.includes({ name: "dog", size: "middle" })); // false

그러나 오브젝트 배열일 때는 잘 기능하지 않는다.

'JavaScript related' 카테고리의 다른 글

JavaScript innerHTML  (0) 2023.01.27
JavaScript Nullish Coalescing Operator  (0) 2023.01.27
JavaScript How to add JSON to localStorage  (0) 2023.01.26
JavaScript addEventListener("keyup")  (1) 2023.01.26
JavaScript forEach  (0) 2023.01.26

Post

JavaScript How to add JSON to localStorage

[ JavaScript related ] 2023. 1. 26. 19:33

기본 활용법

(1) 기본적인 개념에 대한 설명

JavaScript

localStorage.setItem("recentSearchWord", JSON.stringify(recentSearchWordArray));
// Application의 localStorage에 "recentSearchWord"라는 key명칭으로, recentSearchWordArray라는 JSON파일을 문자열(string)의 형태로 value로서 밀어넣는다.

const recentSearchWordArray = JSON.parse(localStorage.getItem("recentSearchWord"));
// Application의 localStorage에 "recentSearchWord"라는 명칭으로 들어가 있는, recentSearchWord라는 value를 JSON파일의 형태로 꺼내온 후 이를 recentSearchWordArray에 담는다.

 

(2) 텍스트바에 입력된 텍스트를 localStorage에 밀어넣기

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    localStorage.setItem("Records", textBar.value);
  }
});

 

ON BROWSER

텍스트바에 입력된 "마우스"를 Local Storage에 밀어넣은 모습

 

 

 

(3) localStorage에 들어있는 텍스트를 콘솔 로그에 출력하기

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    localStorage.setItem("Records", textBar.value);
  }
});
console.log(localStorage.getItem("Records"));

 

ON BROWSER

 

 

 

 

 

localStorage에 배열 집어넣기

(1) 당나귀, 소, 말로 이루어진 배열을 localStorage에 집어넣기

JavaScript

const textBar = document.querySelector(".textBar");
const textRecords = [];
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    textRecords.push(textBar.value);
    localStorage.setItem("Records", textRecords);
  }
});
console.log(textRecords);

 

ON BROWSER

텍스트바에 당나귀, 소, 말을 차례로 입력했을 때. 배열이었음에도 불구하고 텍스트화되어 있다.

 

 

 

(2) localStorage에 들어가 있는 배열을 콘솔 로그에 출력하기

JavaScript

const textBar = document.querySelector(".textBar");
const textRecords = [];
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    textRecords.push(textBar.value);
    localStorage.setItem("Records", textRecords);
  }
});
console.log(localStorage.getItem("Records"));

 

ON BROWSER

텍스트로 들어가버렸으므로 당연한 듯 텍스트로 빠져나온다.

 

 

 

(3) JSON.stringify를 이용해 배열로 집어넣으면?

JavaScript

const textBar = document.querySelector(".textBar");
const textRecords = [];
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    textRecords.push(textBar.value);
    localStorage.setItem("Records", JSON.stringify(textRecords));
  }
});
console.log(localStorage.getItem("Records"));

 

ON BROWSER

자동차, 항공기, 기차를 차례로 입력하니 배열 형태로 localStorage에 저장되었고, 마찬가지로 배열 형태로 콘솔에 출력된다.

'JavaScript related' 카테고리의 다른 글

JavaScript Nullish Coalescing Operator  (0) 2023.01.27
JavaScript Array.includes  (0) 2023.01.27
JavaScript addEventListener("keyup")  (1) 2023.01.26
JavaScript forEach  (0) 2023.01.26
JavaScript Promise  (0) 2023.01.25

Post

JavaScript addEventListener("keyup")

[ JavaScript related ] 2023. 1. 26. 19:09

텍스트 바에 입력한 텍스트를 그대로 콘솔 로그에 출력

HTML

    <input class="textBar" type="text" />

 

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function () {
  console.log(textBar.value);
});

 

ON BROWSER

 

 

 

 

 

텍스트바에 Ctrl + Enter 키가 입력되면 경고창 띄우기

(1) Enter키의 keyCode 찾기

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function (e) {
  console.log(e);
});

 

ON BROWSER

 

 

 

(2) 찾은 keyCode로 조건 설정하기

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    alert("Enter키를 누르셨습니다.");
  }
});

 

ON BROWSER

Enter키를 누르면 곧바로 경고창이 뜸

 

 

 

(3) Ctrl + Enter키를 누르면 경고창이 뜨도록 수정

JavaScript

const textBar = document.querySelector(".textBar");
textBar.addEventListener("keyup", function (e) {
  if (e.keyCode === 13 && e.ctrlKey) {
    alert("Ctrl + Enter키를 누르셨습니다.");
  }
});

 

ON BROWSER

 

'JavaScript related' 카테고리의 다른 글

JavaScript Array.includes  (0) 2023.01.27
JavaScript How to add JSON to localStorage  (0) 2023.01.26
JavaScript forEach  (0) 2023.01.26
JavaScript Promise  (0) 2023.01.25
JavaScript Async Function  (0) 2023.01.25

Post

JavaScript forEach

[ JavaScript related ] 2023. 1. 26. 12:57

forEach

배열은 반복문을 돌려서 접근할 수도 있지만, forEach로 접근할 수도 있다.

 

(0) for 반복문으로 배열순회

const animals = ["lion", "dog", "cat", "fox"];
for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}
// lion
// dog
// cat
// fox

 

 

 

(1) for Each 배열순회

const animals = ["lion", "dog", "cat", "fox"];
animals.forEach(function (item) {
  console.log(item);
});
// lion
// dog
// cat
// fox

item을 그대로 쓰면 배열 전체를 순회하며 콘솔에 값을 적어준다.

 

 

 

(2) for Each 오브젝트 배열순회

const animals = [
  { name: "lion", size: "big" },
  { name: "dog", size: "middle" },
  { name: "cat", size: "small" },
  { name: "fox", size: "small" },
];
animals.forEach(function (item) {
  console.log(item);
});
// { name: 'lion', size: 'big' }
// { name: 'dog', size: 'middle' }
// { name: 'cat', size: 'small' }
// { name: 'fox', size: 'small' }

오프젝트로 구성된 배열 역시 순회하면서 모든 값을 콘솔에 적어준다.

 

 

 

(3) for Each 오브젝트 배열의 일부요소만 추출

const animals = [
  { name: "lion", size: "big" },
  { name: "dog", size: "middle" },
  { name: "cat", size: "small" },
  { name: "fox", size: "small" },
];
animals.forEach(function (item) {
  console.log(item.name);
});
// lion
// dog
// cat
// fox

 

 

 

(4) for Each 두개 이상을 추출

const animals = [
  { name: "lion", size: "big" },
  { name: "dog", size: "middle" },
  { name: "cat", size: "small" },
  { name: "fox", size: "small" },
];
animals.forEach(function (item) {
  console.log(item.name, "의 크기는", item.size);
});
// lion 의 크기는 big
// dog 의 크기는 middle
// cat 의 크기는 small
// fox 의 크기는 small

 

 

 

(5) 두번째 매개변수는 순서를 표시한다

const animals = [
  { name: "lion", size: "big" },
  { name: "dog", size: "middle" },
  { name: "cat", size: "small" },
  { name: "fox", size: "small" },
];
animals.forEach(function (item, idx) {
  console.log(idx, item.name, "의 크기는", item.size);
});
// 0 lion 의 크기는 big
// 1 dog 의 크기는 middle
// 2 cat 의 크기는 small
// 3 fox 의 크기는 small

 

 

 

'JavaScript related' 카테고리의 다른 글

JavaScript How to add JSON to localStorage  (0) 2023.01.26
JavaScript addEventListener("keyup")  (1) 2023.01.26
JavaScript Promise  (0) 2023.01.25
JavaScript Async Function  (0) 2023.01.25
JavaScript deep & shallow copy  (0) 2023.01.25

Post

JavaScript Promise

[ JavaScript related ] 2023. 1. 25. 16:53

Promise란?

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. Promise는 주로  서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

Promise에는 다음의 세 상태가 존재한다.

대기(pending)  비동기 처리 로직이 아직 완료되지 않은 상태
이행(fulfilled)  비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
거부(rejected)  비동기 처리가 실패하거나 오류가 발생한 상태

 

Promise가 이행 및 불발된 후에는 다음의 함수가 실행된다.

.then()  약속이 이행될 경우, then()가 실행된다.
.catch()  약속이 불발될 경우, catch()가 실행된다.
.finally()  약속이 이행되든 불발되든, 무조건 finally()가 실행된다.




 

 

fetch

(1) fetch

fetch (엔드포인트)

fetch는 실행하면 promise라는 객체를 가지고 오게 된다.

const fetchImg = fetch(
);
console.log(fetchImg); // Promise { <pending> }

 

 

(2) then

JavaScript

const fetchImg = fetch(
);
fetchImg.then(function (response) {
  const json = response.json();
  json.then(function (result) {
    console.log(result.results);
  });
});

 

ON BROWSER

 

 

 

(3) then + return 쓰기

JavaScript

const fetchImg = fetch(
);
fetchImg
  .then(function (response) {
    return response.json();
  })
  .then(function (result) {
    console.log(result.results);
  });

 

ON BROWSER

 

 

'JavaScript related' 카테고리의 다른 글

JavaScript addEventListener("keyup")  (1) 2023.01.26
JavaScript forEach  (0) 2023.01.26
JavaScript Async Function  (0) 2023.01.25
JavaScript deep & shallow copy  (0) 2023.01.25
JavaScript Array.fill.map  (0) 2023.01.25

Post

JavaScript Async Function

[ JavaScript related ] 2023. 1. 25. 16:25

(1) 비동기 함수의 예시#1

console.log("111");

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

console.log("3333");

// 111
// 3333
// 222

 

 

(2) 비동기 함수의 예시#2

function callBackTestFunc(callback) {
  setTimeout(callback, 1000);
  console.log("Hello");
}
 
console.log("bye");

callBackTestFunc(() => {
  console.log("waited 1 second");
});

// bye
// Hello
// waited 1 second

원래 출력되는 순서라면 "bye", "waited 1 second", "Hello" 로 출력되어야 하겠지만, setTimeout이 비동기함수이기 때문에 순서에서 빠지므로 "Hello"보다 늦게 출력된다.

 

 

 

 

 

 

 

 

 

 

'JavaScript related' 카테고리의 다른 글

JavaScript forEach  (0) 2023.01.26
JavaScript Promise  (0) 2023.01.25
JavaScript deep & shallow copy  (0) 2023.01.25
JavaScript Array.fill.map  (0) 2023.01.25
JavaScript Sorting  (0) 2023.01.25

Post

JavaScript deep & shallow copy

[ JavaScript related ] 2023. 1. 25. 13:30

기본 타입의 복사

기본 타입(primitive)인 number, string, boolean, Null, Undefined, NaN는 복사가 된다. 기본 타입이 아니면 복사가 되지 않으며 참조만 된다.

 

(1) number

let num00 = 10;
let num01 = num00;
num00 += 5;
console.log(num00); // 15
console.log(num01); // 10

let num01 = num00; 이라고 할당한 시점에서 num01에는 num00에 최초 할당했던 10의 깊은 복사(deep copy)가 이루어지기에, 별개의 개체가 된다. 따라서 그 후에 num00에 5를 더해도 num00의 값이 바뀔 뿐, num01은 값은 변화하지 않는다.

 

 

(2) string

let txt00 = "테스트용 텍스트";
let txt01 = txt00;
txt00 = "변경된 텍스트";
console.log(txt00); // 변경된 텍스트
console.log(txt01); // 테스트용 텍스트

 

 

(3) boolean

let trueFalse00 = false;
let trueFalse01 = trueFalse00;
trueFalse00 = true;
console.log(trueFalse00); // true
console.log(trueFalse01); // false

 

 

(4) null

let exist00 = null;
let exist01 = exist00;
exist00 = 10;
console.log(exist00); // 10
console.log(exist01); // null

 

 

(5) undefined

let exist00;
let exist01 = exist00;
exist00 = "테스트";
console.log(exist00); // 테스트
console.log(exist01); // undefined

 

 

(6) NaN

let exist00 = NaN;
let exist01 = exist00;
exist00 = 999;
console.log(exist00); // 999
console.log(exist01); // NaN

 

 

 

 

 

얕은 복사(shallow copy)와 깊은 복사(deep copy)

(1) Shallow Copy

const animals = ["lion", "tiger", "rabbit"];
const shallowCopyAnimals = animals;

animals.push("dog");
console.log(animals); // [ 'lion', 'tiger', 'rabbit', 'dog' ]
console.log(shallowCopyAnimals); // [ 'lion', 'tiger', 'rabbit', 'dog'  ]

 

 

(2) Deep Copy

const animals = ["lion", "tiger", "rabbit"];
const deepCopyAnimals = animals.map(function (item, idx) {
  return item;
});
animals.push("dog");
console.log(animals); // [ 'lion', 'tiger', 'rabbit', 'dog' ]
console.log(deepCopyAnimals); // [ 'lion', 'tiger', 'rabbit' ]

 

'JavaScript related' 카테고리의 다른 글

JavaScript Promise  (0) 2023.01.25
JavaScript Async Function  (0) 2023.01.25
JavaScript Array.fill.map  (0) 2023.01.25
JavaScript Sorting  (0) 2023.01.25
JavaScript Append Items  (0) 2023.01.23

Post

JavaScript Array.fill.map

[ JavaScript related ] 2023. 1. 25. 13:12

Array.fill.map 기본동작

(1) Array

const numbers = Array(10); 
console.log(numbers); // [ <10 empty items> ]

numbers라는 배열에 10개의 빈 공간을 만들겠다

 

 

 

(2) fill

const numbers = Array(10).fill(0);
console.log(numbers); // [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

비어있던 10개의 빈 공간을 숫자 0으로 채워 넣겠다

 

 

 

(3) map

배열의 길이만큼 반복하는 함수로, 주어진 배열을 바꾸고 싶을 때 사용. map으로 기존 배열을 조작하면 새로운 배열이 생성(깊은 복사, deep copy)된다. 첫번째 매개변수는 내용, 두번째 매개변수는 순서를 의미한다.

const numbers = Array(10)
  .fill()
  .map(function (item, idx) {
    return idx;
  });
console.log(numbers); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

이 경우, 순서를 반환하기로 했으므로 배열의 비어있던 10개의 공간에 순번인 0부터 9까지가 들어간다.

 

const numbers = Array(10)
  .fill()
  .map(function (item, idx) {
    return "item";
  });
console.log(numbers); // [ `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item` ]

이 경우, "item"이라는 문자열을 반환하기로 했으므로, 빈 10개의 공간에 문자열 "item"이 들어간다.

 

const numbers = Array(10)
  .fill()
  .map(function (item, idx) {
    return "item" + idx;
  });
console.log(numbers); // [ `item0`, `item1`, `item2`, `item3`, `item4`, `item5`, `item6`, `item7`, `item8`, `item9` ]

이 경우, "item"이라는 문자열과 순서를 반환하기로 했으므로 빈 공간에 문자열과 숫자가 동시에 들어간다.

 

'JavaScript related' 카테고리의 다른 글

JavaScript Async Function  (0) 2023.01.25
JavaScript deep & shallow copy  (0) 2023.01.25
JavaScript Sorting  (0) 2023.01.25
JavaScript Append Items  (0) 2023.01.23
JavaScript Date  (0) 2023.01.23

Post

JavaScript Sorting

[ JavaScript related ] 2023. 1. 25. 13:07

(1) 매개변수를 쓰지 않을 때

const numbers = [45, 7, 535, 364, 314];
console.log(numbers.sort()); // [ 314, 364, 45, 535, 7 ]

이 경우에는 배열 안의 숫자를 문자열로 인식하기에, 제일 앞자리 숫자만 따져 순서를 매긴다.

 

 

 

(2) 매개변수 활용

const numbers = [45, 7, 535, 364, 314];
console.log(
  numbers.sort(function (a, b) {
    if (a > b) {
      return 1;
    } else if (a < b) {
      return -1;
    } else {
      return 0;
    }
  })
); // [ 7, 45, 314, 364, 535 ]

1번째 요소(a)와 2번째 요소(b)를 비교하여

1번째가 클 경우에는 1을 반환(a를 b 뒤에 둔다. 순서 바꿈)

2번째가 클 경우에는 -1을 반환(a를 b 앞에 둔다. 순서 유지)

같을 경우에는 순서를 유지한다.

 

const numbers = [45, 7, 535, 364, 314];
console.log(
  numbers.sort(function (a, b) {
    if (a > b) {
      return 0;
    } else if (a < b) {
      return 0;
    } else {
      return 0;
    }
  })
); // [ 45, 7, 535, 364, 314 ]

0이 반환될 경우에도 순서는 유지된다.

 

 

 

(3) 간략화

const numbers = [45, 7, 535, 364, 314];
console.log(
  numbers.sort(function (a, b) {
    return a - b;
  })
);
// [ 7, 45, 314, 364, 535 ]

 

'JavaScript related' 카테고리의 다른 글

JavaScript deep & shallow copy  (0) 2023.01.25
JavaScript Array.fill.map  (0) 2023.01.25
JavaScript Append Items  (0) 2023.01.23
JavaScript Date  (0) 2023.01.23
JavaScript Arrow Function  (0) 2023.01.23

Post

JavaScript Append Items

[ JavaScript related ] 2023. 1. 23. 19:17

JavaScript에서 html 태그 요소 추가 및 수정

HTML

    <div class="test"></div>

 

JavaScript

const resultList = document.querySelector(".test");
function appendWinItem() {
  const p = document.createElement("p");
  p.classList.add("win");
  p.textContent = "W";
  p.style.color = "red";
  resultList.appendChild(p);
}
appendWinItem();

 

ON BROWSER

 

 

 

 

 

해설

HTML

    <div class="test">테스트용 텍스트</div>

 

(1) .createElement("추가할 태그명") & .appendChild(추가할 자식요소)

JavaScript

const test = document.querySelector(".test");
const btn = document.createElement("button"); // 괄호 안에 "태그명"을 넣는다.
test.appendChild(btn); // 선택된 요소 안에 자식 요소를 추가한다.

 

ON BROWSER

 

 


(2) .createTextNode("추가할 텍스트")
선택된 요소에 텍스트를 추가한다. 

JavaScript

const test = document.querySelector(".test");
test.appendChild(document.createTextNode(" 「JavaScript로 추가된 텍스트」"));

 

ON BROWSER

 

 

 

(3) .textContent = "이 텍스트로 변경된다"

선택된 요소의 텍스트를 변경한다.

JavaScript

const test = document.querySelector(".test");
test.textContent = "이 텍스트로 변경된다";

 

ON BROWSER

 

'JavaScript related' 카테고리의 다른 글

JavaScript Array.fill.map  (0) 2023.01.25
JavaScript Sorting  (0) 2023.01.25
JavaScript Date  (0) 2023.01.23
JavaScript Arrow Function  (0) 2023.01.23
JavaScript Callback Function  (0) 2023.01.23
▲ top
▲ top

티스토리툴바