object

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 : 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']); //소나타 ..

[mdn, 드림코딩 외] 객체(Object)와 프로퍼티(property) (3) : computed properties

computed properties 접근 noran.name noran['name']; // computed properties ['name'] 형태로 받아오는 key는 string타입이어야 한다. key 추가 noran['hasjob'] = true; 어떨때 computed properties를 쓰고/쓰지 않을까? noran.name 형태는 코딩하는 순간 실시간으로 key에 해당하는 값을 받아오고 싶을 때 쓴다. noran['name'] 형태는 runtime에서 결정되는 key (어떤 key를 받아올지 모를 때)일 때 쓴다. computed properties를 쓰는 상황 예시 function Goodcoder(obj, key) { console.log(obj.key); } printValue(nora..

[mdn, 드림코딩 외] 객체(Object)와 프로퍼티(property) (2) : 생성/수정과 cloning

https://sunshineyellow.tistory.com/17?category=1037372 [코딩앙마 외] 객체(Object)와 프로퍼티(property) 객체(Object) key와 value로 이루어질 수 있다. 1. 함수표현식 const goodCoder = function(name, age, coding) { name : 'Noran', age : 20, coding : function(){ console.log('화이팅!'); } } name : 'Noran',.. sunshineyellow.tistory.com https://sunshineyellow.tistory.com/18?category=1037372 [코딩앙마 외] 객체 리터럴과 객체 접근법, 그리고 생성자 함수 객체를 생성하는..