Study/JavaScript(Clean code)
[JavaScript][clean-code] Continue & Break
* Continue & Break - Continue & Break는 특정 레이블 혹은 문의 흐름을 제어한다. continue : 흐름을 제어해서 반복을 첫번째로 돌린다. break : 바로 종료 그 다음으로 이동 * 하지만 forEach()에서 사용하면 error가 발생한다. const orders = ['first', 'second', 'third']; orders.forEach(function(order) { if (order === 'second') { continue break; } console.log(order); }); second이후에는 loop를 돌지않고 최적화를 해주고싶다. forEach를 사용하면 error이 발생한다. SyntaxError발생 이럴경우 try ..catch를 이용하..
[JavaScript][clean-code] map vs forEach
* map vs forEach의 차이 map : 새로운 배열 만들기 forEach : 요소가 loop될때마다 함수를 실행시켜준다. const prices = ['1000', '2000', '3000']; // forEach는 함수를 실행시켜준다. const newPricesForEach = prices.forEach((price) => return price + '원'); // map은 새로운 배열을 만들어 낸다. const newPricesMap = prices.map((price) => return price + '원'); // result newPricesForEach // undefined newPricesMap // ['1000원', '2000원', '3000원']; forEach의 반환값은 u..
[JavaScript][clean-code] for문 배열 고차 함수로 리팩터링 & 배열 메서드 체이닝
* for문 배열 고차 함수로 리팩터링 - 변수 다루기 - 임시변수 줄이기 * 예시로 보기 아래의 패턴처럼 사용하는 부분이 많이 있을 것이다. 임시변수를 만들어주고 for문을 이용해 임시변수에 값을 넣어주는 패턴 이럴때는 배열 고차함수를 활용해서 배열문을 조금 더 선언적으로 명시적으로 변경할 수 있다. const price = ['2000', '1000', '3000', '5000', '4000']; function getWonPrice(priceList) { let temp = []; for (let i = 0; i < priceList.length; i++) { temp.push(priceList[i] + '원'); } return temp; } - 해당 함수는 배열을 조작하는 함수로써 목록을 받아서..
[JavaScript][clean-code] 불변성 (immutable)
* 불변성 (immutable) * 예시로 보는 불변성 const originArray = ['123', '456', '789']; const newArray = originArray; originArray.push(10); originArray.push(11); originArray.push(12); originArray.unshift(0); console.log(originArray); console.log(newArray); 두 배열의 요소는 동일하다. 원본 배열이 변하면 새로운 변수에 담긴 배열도 변한다. 이유는??? 원본배열을 새로운 변수에 담아 냈을때 원본배열의 참조가 새로운 변수의 참조에도 할당이 되기 때문이다. Copy by reference (참조에 의한 호출) 이다. [참조 내용] ht..
[JavaScript][clean-code] 유사 배열 객체
* 유사 배열 객체 [유사배열에 대해서 참고] https://latte1114.tistory.com/478 const arrayLikeObject = { 0: 'Hello', 1: 'World', length: 2, }; 해당 객체는 배열을 흉내낸것처럼 보이지만 Array.isArray로 확인하였을때 false라는 명확한 결과가 나온다. Array.from() 내장메서드를 활용하면 이러한 유사 배열 객체들을 배열로 변환해줄 수 있다. const arr = Array.from(arrayLikeObject); console.log(arr); // ['Hello', 'World']; console.log(Array.isArray(arr)); // true; console.log(Array.isArray(arr..
[JavaScript][clean-code] 배열 요소에 접근하기(구조 분해 할당)
* 배열 요소에 접근하기 - 배열에 있는 하나하나의 단위들을 요소라고 한다. * 배열 요소 접근 예시 const array = [1, 2, 3] function operateTime(input, operators, is) { inputs[0].split('').forEach((num) => { cy.get('.digit').contains(num).click(); }); inputs[1].split('').forEach((num) => { cy.get('.digit').contains(num).click(); }); } 배열의 요소를 index번호 [0], [1]으로 출력을 하고있어서 어떤요소가 담겨있는지 예측이 되지 않는다. 가독성이 떨어진다. 배열 요소에 좀 더 명확하게 접근할 필요성이 있다. * 구..