Seop_E [Frontend Study]
close
프로필 배경
프로필 로고

Seop_E [Frontend Study]

  • 분류 전체보기
    • HTML - CSS
    • JS
    • React
    • Git
    • How to(w3 study)
    • BootCamp Review
    • 기타
  • 홈
  • GitHub
(25) Modern JavaScript - 배열 메소드 : filter, find

(25) Modern JavaScript - 배열 메소드 : filter, find

filter와 find 메소드는 forEach와 map 메소드 처럼 배열에 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드이다.아래 코드는 간단하게 게임 캐릭터 정보를 담고 있는 객체들을 배열로 묶어서"BossGroup"변수를 생성하였다.const BossGroup = [ { name: "행섭", job: "비숍", type: "마법사" }, { name: "양천", job: "캐논마스터", type: "해적" }, { name: "스기따라", job: "배틀메이지", type: "마법사" }, { name: "힝카인", job: "카인", type: "궁수" }, { name: "귀여운적혈구", job: "", type: "전사" }, { name: "저섭", job: "바이퍼", t..

  • format_list_bulleted JS
  • · 2024. 12. 11.
  • textsms
(24) Modern JavaScript - 배열 메소드 : forEach, map

(24) Modern JavaScript - 배열 메소드 : forEach, map

배열의 요소를 하나씩 살펴보면서,반복적인 동작을 할 때 for...of문을 사용한다고 했다.// forEach와 mapconst members = ["행섭", "스기따라", "양천", "힝카인"];for (let member of members) { console.log(`${member}님이 접속하였습니다.`);}그런데 배열에는 for of문 처럼각  요소를 하나씩 살펴보면서 반복적인 동작을 할 수 있는 forEach와 map 메소드가 존재한다. 배열만의 메소드인 forEach와 map을 살펴보자.forEach 메소드// forEach와 mapconst members = ["행섭", "스기따라", "양천", "힝카인"];for (let member of members) { console.log(`$..

  • format_list_bulleted JS
  • · 2024. 12. 10.
  • textsms

모던 자바스크립트 (15) ~ (23) 정리

보호되어 있는 글입니다.

  • format_list_bulleted JS
  • · 2024. 12. 9.
(23) Modern JavaScript - try...catch 문

(23) Modern JavaScript - try...catch 문

다음과 같이 자바스크립트 에서는 에러가 발생하는 순간프로그램이 종료되고 그 이후 코드가 동작하지 않는다.console.log("Start");const title = "섭이";console.log(title);title = "섭이";const language = "JavaScript";console.log(language);console.log("End");코드를 실행한 결과, 7번 줄에서 const 키워드로 선언한 변수에새로운 값을 재할당 하려고 했기 때문에 TypeError가 발생했다.그래서 중간에 멈춰버리는 바람에 그 아래 language 변수와 "End" 문자열은 출력되지 않았다는 것을 확인할 수 있다. 그래서 자바스크립트로 프로그래밍을 할 때 이 에러를 다루는 방법을 알아야조금 더 안정적인 프로..

  • format_list_bulleted JS
  • · 2024. 12. 9.
  • textsms
(22) Modern JavaScript - 에러 객체

(22) Modern JavaScript - 에러 객체

자바스크립트로 안정적인 프로그램을 만들기 위해서는에러를 다루는 방법을 알아두는 것이 중요하다. 자바스크립트에서 에러를 다루기 위해서는 먼저 에러 객체에 대한 이해가 필요한데코드가 실행되는 도중에 에러가 발생하면 아래와 같이자동으로 해당 에러에 대한 정보가 담긴 에러 객체를 생성한다.콘솔창에 나와있는 것도 에러 객체의 정보를 가져온 것이며메시지를 조금 더 살펴보자면에러 메시지는 크게 에러 객체의 이름과 그 뒤에 구체적인 내용이 담긴 메시지로 나뉘어져 있다.그래서 에러 객체는 공통적으로 에러 객체의 이름을 담고있는 "name" 프로퍼티와구체적인 에러 내용을 담고 있는 "message" 프로퍼티가 존재하는데일반적으로 자주 접하는 에러 객체는 크게 3가지 정도로 요약할 수 있다.대표적인 에러 객체 3가지첫 번째..

  • format_list_bulleted JS
  • · 2024. 12. 6.
  • textsms
(21) Modern JavaScript - 함수와 구조 분해 (Destructuring)

(21) Modern JavaScript - 함수와 구조 분해 (Destructuring)

구조 분해는 배열과 객체를 다룰 때 활용할 수 있다고 했을 떄,이 구조 분해 문법을 함수와 함께 활용하면서 문법을 좀 더 익혀보자.함수와 구조 분해 - 배열일단 배열부터 살펴보면 가장 간단한 상황은아래와 같이 함수가 리턴하는 값이 배열일 때 그 리턴 값을 활용하는 것이다.// 구조 분해 (Destructuring)function getArray() { return ["컴퓨터", "냉장고", "세탁기"];}const [el1, el2, el3] = getArray();console.log(el1);console.log(el2);console.log(el3);그렇게 컴퓨터 는 el1로, 냉장고는 el2, 세탁기는 el3으로배열의 요소들이 하나씩 순서대로 전달이 되므로 아래와 같은 결과를 얻을 수 있다.또다..

  • format_list_bulleted JS
  • · 2024. 12. 5.
  • textsms
  • navigate_before
  • 1
  • ···
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • ···
  • 40
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기
    • HTML - CSS
    • JS
    • React
    • Git
    • How to(w3 study)
    • BootCamp Review
    • 기타
최근 글
인기 글
최근 댓글
태그
  • #javascript
  • #W3Schools
  • #html
  • #react
  • #Sass
  • #CSS
  • #js
  • #티스토리챌린지
  • #오블완
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바