array
React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)
1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...
Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)
9. 장바구니 기능 만들기 조건 장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기 풀이 상품리스트 // 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언 let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행 buttonCarts.forEach(function(buttonCart){ // buttonCart를 클릭하면.. buttonCart.addEventListener('click', function(){ // localStorage의 cart를 ke..
Level 3 : 4 (array, object, forEach)
4. 바지 선택하면 array에 저장한 바지사이즈 셀렉박스 만들기 조건 바지를 선택하면 array에 입력한 데이터가 사이즈 셀렉박스에 자동으로 추가되어야 한다. 틀린 풀이 상품 선택 모자 셔츠 바지 100 let pants = [28, 30, 32]; let selectBox = document.querySelector('.form-select'); let selectSize = document.querySelector('.form-popup'); function pantsSize() { if (selectBox.value == '바지') { selectSize.classList.remove('form-hide'); for (i = 0; selectSize.length = pants.length; i++..
Level 3 : 1~3 (array, object)
1. object 자료형에 넣은 데이터를 html에 데이터바인딩하기 var car2 = {name: '소나타', price: 50000} document.querySelector('.card > span:first-child').innerHTML = `${car2.name}`; document.querySelector('.card > span:last-child').innerHTML = `${car2.price}`; 2. object 자료형에 넣은 'array 데이터'를 html에 데이터바인딩하기 var car2 = {name: '소나타', price : [50000, 3000, 4000]} document.querySelector('.car-price').innerHTML = `${car2.price[..
[코딩애플] 자료형 : Array, Object (특징과 차이점)
https://sunshineyellow.tistory.com/38 이거에 이어서.. Array 자료형 let car = ['소나타', 50000, 'white']; 순서개념이 있다. -> 숫자영어가나다순 정렬(sort)/x번자료부터 x번자료까지 자르기(slice)/x번자료 바꾸기/맨 뒤, 맨 앞에 자료 넣기/원하는 자료 검색하는 등 다양한 기능 활용이 가능하다. Object 자료형 let car2 = { name : '소나타', price : 50000 }; 제목(key)가 들어간다. 순서개념이 없다. (앞에 썼다고 맨처음 데이터가 되는 게 아님) -> key만 기억하면 자료 뽑을 때 array보다 쉽다. object에서 자료 뽑는 법 두가지 console.log(car2['name']); //소나타 ..
[드림코딩] 유용한 배열(array) api (3) : reduce, reduceRight, sort, api 다중으로 쓰기
class Coder { constructor(name, age, enrolled, score) { this.name = name; this.age = age; this.enrolled = enrolled; this.score = score; } } const coders = [ new Coder('A', 29, true, 45), new Coder('B', 28, false, 80), new Coder('C', 30, true, 90), new Coder('D', 40, false, 66), new Coder('E', 18, true, 88), ] reduce 배열의 각 데이터에 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환한다. 리듀서 콜백함수는 네 개의 인자를 가진다. 누산기(..