우니의 개발일지 우니의 개발일지

Javascript/JS 문법

• 이벤트 버블링과 캡쳐링 , 이유와 방지법은 ?

  Javascript/JS 문법 2023. 3. 21. 15:53

  📌 이벤트 버블링 - 아래요소에서 위로 전파되는 현상 거품처럼 위로 전파된다고 생각하면 외우기 편함 예시 ) querySelectorAll('div')를 통해 박스를 가져온 후 forEach로 addEventListener 를 달아줌 const logEvent = (event) => { console.log(event.currentTarget.className); } var divs = document.querySelectorAll('div'); divs.forEach((div) => { div.addEventListener('click', logEvent); }); 문제 : 나는 three 를 눌렀을 뿐인데 two , one 까지 출력되어버림 이유 : 이벤트가 부모 요소까지 전달된다.... 라고는 하는..

  Read More
• javascript JSON 메소드를 알아보자!

  Javascript/JS 문법 2023. 3. 10. 15:32

  📌 JSON.stringify() : 배열이나 객체 값 등 들어온 값들을 모두 문자열 처리합니다. console.log(JSON.stringify({ x: 5, y: 6 })); // "{"x":5,"y":6}" 📌 JSON.parse() : 배열이나 객체 값 등 들어온 값들을 모두 문자열 처리합니다. const json = '{"result":true, "name":"woony"}'; const obj = JSON.parse(json); console.log(obj.result); //true console.log(obj.name); //result

  Read More
• ES6 문법 Array 메소드 map, filter, find, reduce 한번에 정리!

  Javascript/JS 문법 2023. 3. 9. 01:32

  🌈 사용되는 때가 오면 차근차근 정리하겠습니다 📌 find 함수 find()메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 배열 속 값 찾기 const array = [2, 12, 8, 13, 44]; const result = array.find(ele => ele > 4); console.log(result); // 12 배열 속 객체 찾기 const vendingMachine = [ {name: 'coke', quantity: 2}, {name: 'juice', quantity: 0}, {name: 'cider', quantity: 5} ]; const result = vendingMachine.find(beverage => ..

  Read More
• 자바스크립트 prototype 이란 무엇일까?

  Javascript/JS 문법 2023. 2. 18. 19:08

  JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 모든 객체타입의 자료형(객체, 함수 ,배열)들은 메소드와 속성들을 상속 받기 위해 프로토타입 객체(prototype object)를 가진다는 의미입니다. 무슨 말인지 이해가 안되니 조금 더 쉽게 생각해봅시다.아래 두 문장은 동일하게 [ 4 , 5 , 1 ] 이라는 배열을 생성하는 방식입니다. const arr = [4,5,1] const arr = new Array(4,5,1) 그런데 우리는 sort() , 나 length 라는 메소드를 집어넣어 둔 적이 없습니다. console.log(arr.sort()) // [1,4,5] console.log(arr.length) // 3 그럼에도 불구하고 s..

  Read More
• 객체지향 Class 문법 공부하기 : 자바스크립트 js

  Javascript/JS 문법 2023. 2. 18. 18:41

  📌 Object 를 여러개 많이 만들어야 할때 class 를 이용하면 빠르게 생성할 수 있다. //아래가 객체지향 class 함수이다. function Circle (r) { this.지름 = 2*3.14*r this.넓이 = r*r*3.14 } const circle1 = new Circle(4) const circle2 = new Circle(8) console.log(circle1) //Circle { '지름': 25.12, '넓이': 50.24 } console.log(circle2) //Circle { '지름': 50.24, '넓이': 200.96 } //ES6 부터는 아래와 같이 만든다 class Square { constructor(n){ this.둘레 = 4 * n this.넓이 = n *..

  Read More
• Javascript 화살표 함수 4가지 표현 방식

  Javascript/JS 문법 2023. 2. 13. 20:45

  // 1. 로직을 중괄호로 감싸주면 "return"을 써주며 주로 로직이 여러줄일때 사용한다. const add = (x, y) => { return x + y; } // 2. 화살표 함수 내부에 return문 밖에 없는 경우에는 return문 생략가능하며 X+Y가 리턴된다. const addV2 = (x, y) => x + y // 2번과 동일하게 작동하며 로직을 소괄호로 묶을 수 있다. const addV3 = (x, y) => (x + y) // 4. 매개변수가 한 개라면 매개변수를 소괄호로 묶지 않아도 된다. const flip = x => !x

  Read More