Frank의 공부 일지

이전까지 펼침 연산자를 이용해서 여러 가지 조작 함수를 대체하는 방법을 알아봤는데 대체하기 쉽지 않은 함수는 어떻게 해야 할까? 펼침 연산자로 원본 배열의 사본을 생성하고, 사본을 조작하면 된다. 하지만 만만하게 볼 것은 아니다. 조작으로 인한 문제는 표 데이터를 정렬할 때 발생한다. 직원 정보가 담긴 배열을 이름 또는 근속 연수를 기준으로 정렬하는 애플리케이션을 개발하는 예제를 보면 먼저 배열을 보면 const staff = [ { name: 'Bob', years: 10, }, { name: 'Amy', years: 5, }, { name: 'Karen', years: 10, }, ]; 이렇게 배열이 구성되어 있고 정렬 함수는 function sortByYears(a, b){ if(a.years ==..

배열 연산 시 원본을 조작하지 않아야 되는데 그런 조작은 예상치 못한 결과를 낳을 수 있다. 조작이 항상 문제를 일으키는 것은 아니지만 잠재적으로 문제가 되므로 피하는 것이 좋다. 배열을 조작하기 위해 흔히 사용하는 push() 메서드를 보면 새로운 항목을 배열 뒤에 추가해 원본 배열을 변경한다. 즉, 항목을 추가하면 원본 배열을 조작하는 셈이다. 다행히 펼침 연산자를 이용하면 원본 배열이 조작되는 부수 효과를 방지할 수 있다. 다음 예제를 보면 const cart = [ { name: 'a', pricec: 20.0, discount: false, }, { name: 'b', pricec: 18.2, discount: false, }, { name: 'c', pricec: 24.0, discount: ..

function removeItem(items, removable){ const index = items.indexOf(removable); return [...items.slice(0, index), ...items.slice(index+1)]; } 배열에는 수많은 메서드가 있어서 혼란스럽거나 조작과 부수 효과로 인한 문제에 맞닥뜨릴 수 있는데 다행히 펼침 연산자를 사용하면 최소한의 코드로 배열을 빠르게 생성하고 조작할 수 있다. 펼침연산자는 ...로 표시한다. 펼침연산자의 기능은 배열에 포함된 항목을 목록으로 바꿔주는데 목록은 매개변수 또는 새로운 배열을 생성할 때 사용할 수 있는 일련의 항목이다. 이런 작은 기능이 여러 가지 이점을 가져다준다. 배열에서 항목을 제거하려고 할 때 반복문을 통해 작성할..

이번 글에서는 배열에 있는 값의 위치를 확인하지 않고도 존재 여부를 확인하는 법을 살펴보려고 한다. 배열을 다룰 때는 흔히 존재 여부 확인이 필요한데, 이는 중요한 작업이며 삼항 연산자와 단락 평가를 비롯한 대부분의 조건문에서도 중요하다. 자바스크립트 배열에서 존재 여부 확인은 언제나 다소 번거로운데, 예를 들어 배열이 특정 문자열을 포함하고 있는지 확인하려면 문자열의 위치를 찾아야 한다. 특정 문자열이 존재하면 해당 문자열의 색인으로 위치를 확인할 수 이다. 반대로 문자열이 존재하지 않으면 -1이 반환된다. 문제는 색인이 0이 될 수 있는데 자바스크립트에서 0은 false로 평가될 수 있다. 이런 상황에서 찾는 값의 위치가 0번째라면 false로 평가되므로 반환된 색인을 그대로 조건문에 사용할 수 없고..

배열은 놀라운 수준의 유연성을 갖추고 있는데 배열은 순서를 갖기 때문에 이를 기준으로 값을 추가하거나 제거할 수 있고, 모든 위치에 값이 있는지 확인할 수도 있다. 또한 배열을 정렬해서 순서를 새로 지정할 수도 있다. map(), filter(), reduce() 등의 배열 메서드를 이용하면 코드 한 줄로 정보를 쉽게 변경하거나 갱신할 수 있다. 배열 외 다른 컬렉션도 사용하지만 배열을 깊이 이해하면 코드를 상당히 개선할 수 있다. 예를 들어 객체를 순회하려면 먼저 Object.keys()를 실행해서 객체의 키를 배열에 담은 후 생성한 배열을 이용해 순회한다. const totla = {}; const stats = Object.keys(game1); for (let i=0; i < stats.lengt..

이번 글에서는 변수를 연결하지 않고 새로운 문자열로 만드는 방법을 살펴보려 한다. 문자열은 너저분할 때가 많은데 문자열에서 정보를 찾으려면 대문자, 구두점, 오타 등 골치 아픈 경우가 많다 그런 경우 템플릿 리터럴을 이용해서 간소화 시킬 수 있는데 템플릿 리터럴은 1. `을 사용한다 2. 변수에 할당한 문자열처럼 단순 문자열이 아니라면 특별한 지정자로 감싸야 한다. ${} 같이 템플릿 리터럴은 문자열과 변수를 연결할 때 가장 자주 사용한다. 그렇지만 자바스크립트 동작을 수행할 수도 있다. 대규모 데이터 변환이 필요한 경우에는 템플릿 리터럴 외부에서 처리하고 결과값을 변수에 할당해서 사용한다. 다음 글들에서는 데이터 컬렉션을 다루는 방법을 살펴보려 한다.

이번 글에서는 반복문에서 let을 사용해 유효 범위충돌을 방지하는 방법을 살펴보려 한다. 블록 유효 범위 변수 선언을 이용하면 변수는 블록 내에서만 접근할 수 있다고 했는데 for문 내부에 선언한 변수도 for문의 중괄호 밖에서는 접근할 수 없다. 반대로 함수 외부에 선언한 변수는 블록 내부에서 접근할 수 있다. 함수의 최상위에서 블록 유효 범위 변수를 선언한 경우에는 함수 내부의 if문이나 for문에서 접근할 수 있다. 반면에 어휘적 유효 범위를 따르는 변수를 선언한 경우에는 함수 내부 어디서든 접근할 수 있다. 이 경우 if 블록 내부에서 생성한 변수를 함수 내부의 다른 곳에서 접근할 수 있다. function addClick(items){ for(var i=0; i 유효 범위의 문제로 var로 할당..

이전 글에서는 변수를 다룰 때 재할당을 피하는 것이 낫다고 배웠는데 변수를 반드시 재할당하는 경우라면 어떻게 해야할까? -> 이 경우에 let을 사용할 수 있다. let은 재할당할 수 있다는 점에서 var와 유사하지만 var는 어휘적 유효 범위를 따르는 반면, let은 블록 유효 범위를 따른다. (일단 블록 유효 범위 변수는 if 블록이나 for 반복문 같은 블록의 내부에만 존재한다고 알아두자) const도 블록 유효 범위를 따른다 블록 밖에서는 블록 유효 범위 변수에 접근할 수 없다. let과 const는 같은 이름의 변수를 다시 선언할 수 없다. var를 사용하는 경우에는 같은 유효 범위에서 같은 이름의 변수를 다시 선언할 수도 있다. 다음 글에서는 유효 범위를 더 깊이 살펴보고, let을 사용해 자..

자바스크립트에서 변수 할당하는 방법은 var, let, const 등이 있는데 대부분의 경우 const를 선택하는 것이 좋다. const로 가장 적은 것을 할 수 있기 떄문인데 코드를 읽기 쉽게 만드는 제약 사항을 가지고 있다. const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이다. 즉, 한 번 선언하면 변경할 수 없다.(그렇지만 불변값이 되는 것은 아니다!) const를 사용하면 코드를 훑어볼 때 해당 변수를 신경 쓰지 않아도 된다고 알려줄 수 있다. 그리고 const를 사용할 때 중요한 고려 사항은 const에 할당된 값이 불변값이 되지 않는다는 것이다. 즉 변수를 재할당할 순 없지만 값을 바꿀 수는 있다! 위의 내용이 이해가 잘 안간다면 일단은 const를 기본으로 사용하자! 이 게시물 ..