Suyeon BLOG

쇼핑몰을 만들려고 할 때 꼭 있어야 하는 가격 정렬, 상품명 정렬 등.. 이런 기능이 필요합니다. 1. 상품명으로 정렬하기 let goods = [ { name: 'Pink cote', cost: 34000 }, { name: 'Blue cote', cost: 54000 }, { name: 'Orange cote', cost: 72000 }, ]; // 상품명으로 오름차순 정렬 // 원본은 유지하기. let copyGoods = [...goods]; copyGoods.sort((item1, item2) => { return item1.title > item2.title ? 1 : -1; }); // 상품명으로 내림차순 정렬 copyGoods.sort((item1, item2) => { return ite..

가변 객체 말 그대로 변할 수 있는 객체입니다. let obj1 = { c: 10, d: 20 }; let obj2 = obj1; obj2.c = 5; console.log(obj1); // { c: 5, d: 20 }; console.log(obj2); // { c: 5, d: 20 }; arr1는 값을 가지고 있는게 아니라 값이 담긴 주소값을 가지고 있습니다. 따라서 arr2는 arr1이 가리키는 주소값을 복제한거고 그래서 둘이 같이 변하는 것입니다. 하지만 우리는 개발할 때 원본값이 변하면 안되는 경우가 있습니다. 예를 들자면 1. 쇼핑몰 목록에서 필터를 적용한 후 해제 했을 때 등등이 있습니다. 그럼 이제 불변 객체를 만드는 방법에 대해서 알아봅시다. 불변 객체 자바스크립트에서 복제된 객체의 값을..

데이터 타입 종류 자바스크립트에는 데이터 타입이 2가지가 있는데 기본형(Primitive)과 참조형(Reference)이다. 기본형 - Number, String, Boolean, null, undefined, Symbol 참조형 - Array, Map, Set, Function 데이터 타입을 나눈 기준 타입을 나눈 기준은 무엇일까? 기본형 타입은 값을 가진 주소값을 가지고 있어서 복제됐을 때 복제된 값을 바꿔도 원본값은 변하지 않는다. 하지만 참조형 타입은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소를 가지고 있다. 그래서 복제하고 복제값을 바꾸면 원본값도 같이 변경된다. 데이터는 어떻게 구분하는가 컴퓨터는 모든 데이터를 0과 1로 저장한다. 이 한 조각을 비트라고 한다. 비트는 고유한 식별자로..

10869번 사칙연산 입력을 받아올 때는 require('fs').readFileSync('/dev/stdin').toString().split(' '); 으로 받아온다. 백준에서 입력 받는 파일이 /dev/stdin 안에 있기 때문이다. 다른 연산은 상관없지만 나눗셈은 소수점이 나오기 때문에 정수로 만들어줘야 한다. Math.floor()를 사용하면 소수점 아래는 다 지워버려서 정수로 나오게 된다. const inputArr = require('fs').readFileSync('/dev/stdin').toString().split(' '); const num1 = parseInt(inputArr[0]); const num2 = parseInt(inputArr[1]); console.log(num1 + ..

const Food = ['tomato', 'potato']; const [FirFavFood, SecFavFood] = Food; //FirFavFood -> 'tomato' //SecFavFood -> 'potato'

#1. 숫자 1씩 증가시키기 function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(count + 1); //현재 state 값으로 다음 state 값을 계산하고 싶다면 아래가 더 안전하다. setCounter((current) => current + 1); }; return ( Total clicks: {counter} Click ); } React.render(, 넣을 곳); - setCounter은 counter += 1, React.render(, 넣을 곳) 역할을 동시에 해줍니다. #2. 분을 시간으로 바꾸기 function App() { let [minutes, se..

출처 : Do it! 자바스크립트 입문편 Array를 사용하는 이유 1. 할 일 목록이나 여행 준비물 목록 검토 등을 하는 프로그램에서 새로운 것을 추가하거나 삭제하는 기능이 필요합니다. 이때 Array 객체 기능을 사용합니다. Array 속성 1. concat() - 둘 이상의 배열을 이어주는 역할을 합니다. - 새로운 함수를 만들기 때문에 원래 함수에는 아무런 영향을 받지 않습니다. 2. join - 배열 요소를 연결해주는데 연결할 때 사용하는 기호를 직접 정할 수 있습니다. - 그리고 String형으로 출력합니다. 3. push 와 unshift - push는 배열 마지막에 값을 넣습니다. - unshift는 배열 첫 번째에 값을 넣습니다. (여러 개를 넣어도 상관없습니다.) 4. pop과 shif..

출처 : Do it! 자바스크립트 입문편 자바스크립트 함수 1. 익명 함수 - 이름이 없는 함수라서 변수에 할당해서 사용합니다. 2. 즉시 실행 함수 - 함수를 정의함과 동시에 실행하는 함수입니다. - () 안에 함수를 정의한 다음 마지막에 (); 를 붙이면 됩니다. 3. 화살표 함수 - ES6에 추가된 함수입니다. - => 으로 함수를 표현하는데 익명 함수에서만 사용할 수 있습니다.

출처 : Do it! 자바스크립트 입문편 ES6에서 새로 추가된 let, const - 원래는 var로 변수를 예약했는데 ES6에서부턴 let 예약어로 변수를 선언하는 것을 권장하고 있습니다. var과 let, const 차이점 - var은 함수 영역의 스코프를 가졌습니다. - var은 같은 이름의 변수를 여러 번 재선언할 수 있습니다. - var은 호이스팅을 가져서 변수를 선언하지 않아도 사용할 수 있습니다. 그리고 undefined로 초기화 됩니다. - let과 const는 블록 영역의 스코프를 가졌습니다. - let과 const는 같은 이름의 변수를 재선언할 수 없습니다. - let과 const는 호이스팅이 없어서 선언하지 않은 변수를 사용하면 오류가 발생합니다. 따라서 초기화는 되지 않습니다. -..