코드를 작성할 시에는 코드 라인의 수가 적을 수록 디버깅도 쉬워지고 프로그램의 파일 사이즈도 작죠. 게다가 제대로 작성이 되면 성능도 월등히 높아 집니다. 이 포스팅에서는 굳이 몇 개의 코드 라인이 필요없이 한 개의 라인으로 가능한 자바스크립트 코드 예제를 알아보겠습니다.
ㄱ. 객체 또는 배열에 관한 코드
ㄱ-1. 여러 객체 머지하기 (Object Merging)
spread 연산자 (...)를 이용하여 part1과 part2를 하나의 새로운 객체 (mergedObj)를 만들었습니다. 겹치게 되는 property가 있다면 마지막으로 merge되는 값으로 정해집니다.
ㄱ-2. 객체 구조파괴 (Object Destructuring)
name과 age를 가지고 있는 객체를 파괴시켜 그 값을 각 변수에 지정하는 코드입니다. 이러한 방법은 코드를 심플화하면서 이해하기 쉽게 하죠.
ㄱ-3. 배열 청소 하기 (존재하는 값들만 필터링하기)
Array.prototype.filter()와 Boolean 콜백 컨스트럭터 (constructor)를 사용하면 다음과 같이 존재하지 않는 값은 필터되어 존재하는 값들만 남게됩니다. 존재하지 않는 값 (falsy value)은 false, null, undefined, ‘’, NaN과 0이죠.
ㄱ-4. 객체 복사하기
객체 머지 (merge)시와 같이 복사시에도 spread 연산자 (...)를 이용하면 한 줄에 복사가 됩니다.
그런데 그냥 새로운 변수에 복사하고자 하는 객체를 지정하면 안될까요?
위의 예제와 같이 clonedObj 변수에 지정을 하면 originalObj의 메모리 reference를 clonedObj에 지정하는 방법이므로 clonedObj 변수를 수정하면 위의 예제와 같이 originalObj도 같이 수정 됩니다.
ㄱ-5. 배열 컨디션 체크하기
.some()는 배열 중 적어도 하나의 엘리먼트가 그 컨디션에 true가 되는 경우가 있는지 알아보는 메소드입니다. 위의 예제는 음수가 있는지 알아보는 경우이죠. .every()는 모든 엘리먼트가 주어진 컨디션에 true가 되는지 알아보는 메소드입니다. 아래의 예제는 모든 엘리먼트가 양수인지 알아보는 경우입니다.
ㄱ-6. 두 배열의 공통 값 찾기
위의 예제는 Array.prototype.filter()를 사용하여 arr1과 arr2 배열의 공통된 값을 찾는 경우입니다. 콜백 함수를 보면 arr2가 arr1의 각 엘리먼트를 가지고 있는지 includes()로 체크를 하죠.
ㄱ-7. 다이내믹 객체 키
위의 예제는 계산된 속성 이름 (computed property names)이 사용 되었죠. “[“와 “]” 브라켓 사이에 속성 이름의 변수를 넣으면 변수의 값이 속성의 이름이 됩니다.
ㄱ-8. 배열의 중복 값 제거하기
Set이라는 객체를 사용하면 중복된 값이 없는 배열을 저장하게 됩니다. 여기에 스프레드 연산자 (...)를 사용하여 배열로 다시 바꾸어 주면 되죠.
ㄱ-9. 배열의 값을 더하기
이 예제의 방법은 reduce라는 메서드를 사용하여 배열의 값을 다 더하여 합을 구하는 방법입니다. reduce 메서드는 합계 값 (total)과 현재의 값 (value), 이렇게 두 개의 파라미터를 콜백 함수에 사용합니다
ㄱ-10. 키를 사용하여 객체 값의 합 구하기
이 전의 예제와 비슷하지만 위의 예제는 객체의 키를 사용하여 값을 찾은 다음 그 합을 구하는 방법입니다. 이 방법도 위와 같이 간단히 한 줄의 코드로 완성됩니다.
ㄱ-11. 객체가 어떠한 값을 가지고 있는지 확인하기
위의 예제는 주어진 값이 객체에 존재하는지 알아보는 코드입니다. Object.values(obj)는 객체의 값을 배열로 보내주고 includes(value)는 value의 값이 배열에 존재하는지 체크합니다.
ㄱ-12. 객체의 최대 값 찾기
객체의 값들 중 최대 값을 찾는 예제입니다. Object.values(obj)는 객체의 값을 배열로 보내고, Math.max를 사용하여 최대 값을 구하죠.
ㄱ-13. 숫자 범위 생성하기
Array.from()은 배열과 비슷한 객체에서 배열로 만들어 줍니다. 매핑 함수 ((_, i) => i + 1)를 이용하여 1에서 5까지의 정수를 만들어 배열로 전환하는 예제이죠. 여기에서 _ 파라미터는 사용되지 않는다는 뜻의 placeholder 입니다.
ㄱ-14. 배열 내의 값을 조건부 일괄 수정하기
위의 예제는 ternary operator를 이용하여 콜백 함수에서 배열내의 각 값을 조건에 따라 수정합니다 (60 미만일 경우에 20을 더하기). if-else를 사용하지 않아도 되죠.
ㄱ-15. 오류 없이 객체의 속성을 액세스하기
optional chaining 연산자 (?.)를 사용하면 액세스하려는 값이 undefined나 null일 경우에 TypeError오류를 막을 수 있습니다.
그리고 nullish 병합 연산자 (??)를 사용하면 왼쪽의 값이 null 또는 undefined일때 오른쪽의 값이 지정이 됩니다.
자바스크립트에서는 nullish 병합 연산자 (??)나 logical OR (||) 둘 다 초기 값을 지정 할 수 있지만 falsy value에 관해서는 다르게 실행 됩니다. 자바스크립트의 falsy value는 null, undefined, 0, NaN, '', and false이고 ||를 사용하게 되면 왼쪽의 값이 모든 falsy value 경우 중 하나에 해당이 되면 오른쪽의 값을 사용하게 되죠. 그래서 위 예제는 null과 undefined의 경우에서만 해당이 되어 nullish 병합 연산자 (??)를 사용했지만 ||를 사용한다면 결과 값이 다르겠죠?
ㄱ-16. 조건부 객체 속성 생성하기
위의 예제와 같이 스프레드 연산자 (...)와 단락 평가 (short-circuit evaluation)를 사용하면 조건부로 객체의 속성을 생성할 수 있습니다
ㄴ. 웹 브라우저에 관한 코드
ㄴ-1. NodeList를 Array로 변환하기
이 예제에서는 스프레드 연산자 (...)를 이용하여 document.querySelectorAll에서 리턴된 NodeList를 자바스크립트 배열로 변환하였습니다.
ㄴ-2. 클립보드에 텍스트를 복사하기
위의 예제는 클립보드 API를 사용하여 텍스트를 유저의 클립보드에 복사하는 방법입니다.
ㄴ-3. 페이지를 떠나기 전에 컨펌하기
위 예제 코드는 윈도우의 onbeforeunload 이벤트에 연결되어 유저가 페이지를 떠나기전에 confirmation dialog 창이 뜨게 됩니다. 이 방법으로 예를 들면 수정된 데이터를 저장하게 유도 할 수 있습니다.
ㄴ-4. 인터넷 연결 상태 확인하기
ternary operator와 navigator.onLine을 사용하여 브라우저의 인터넷 연결 상태를 알 수 있습니다. 결과 값은 true에는 Online, false에는 Offline이 리턴되죠.
ㄴ-5. 쿼리 스트링 (Query String)을 객체로 변환하기
위의 예제는 쿼리 스트링을 객체로 변환합니다. URLSearchParams는 쿼리 스트링을 찾아내고 Object.fromEntries는 반복 가능한 짝을 객체로 변환합니다.
ㄴ-6. 현재의 탭이 포커스 되어 있는 상태인지 확인하기
document.hasFocus()는 현재 탭이 포커스가 되어 있는지 확인하는 메소드입니다. 이 방법은 유저가 재생되고 있는 동영상을 보고 있다던지 아니면 페이지와 인터랙트를 하는지 확인하는데 사용이 될 수 있습니다.
ㄴ-7. 엘리먼트의 클래스 이름을 토글 (toggle)하기
classList.toggle()은 엘리먼트가 가지고 있는 클래스 리스트에서 하나의 이름을 넣고 빼고 하는 메서드입니다. 클래스 이름이 존재하면 빼고, 존재하지 않으면 넣는 일을 하죠. 애플리케이션의 상태 변경에 이용이 되므로 웹 페이지와 유저 인터랙션에 중요한 일을 합니다.
ㄴ-8. Promise와 Timeout을 사용하기
위의 예제에서는 promise를 생성하여 정해진 시간이 초과 되면 Timeout 오류를 생성하는 코드입니다. Promise.race()라는 부분은 promise를 정해진 시간까지 돌리고 그 후에는 reject를 하라는 명령이죠. 오래걸릴 수 있는 비동기 오퍼레이션이나 fetch request에 이런 timeout을 넣는 것이 좋습니다.
자바스크립트의 Promise는 비동기 오퍼레이션의 결과를 보여주고 다음과 같은 상태가 있습니다:
Pending: Promise의 기본 상태입니다. 완료가 되지 않았음을 뜻합니다.
Fulfilled: 오퍼레이션이 완료 되었음을 뜻합니다, 그리고 Promise의 값이 존재합니다.
Rejected: 오퍼레이션이 실패했음을 뜻합니다, 그리고 Promise의 값에 실패의 이유가 존재합니다
Promise를 사용하면 리턴되는 값을 이용하여 콜백 함수를 지정할 수 있습니다
ㄷ. 그 외의 코드
ㄷ-1. temporary 변수 없이 두 변수의 값을 바꾸기
위와 같이 [a, b] = [b, a]의 배열 파괴 방법을 사용하면 한 줄에 두 변수의 값을 바꿀 수 있습니다.
ㄷ-2. 초를 보기 쉬운 시간 텍스트로 변환 하기
위의 예제는 초를 보기 쉽게 HH:MM:SS 포맷의 텍스트로 변환합니다. new Date 객체에 epoch와 초를 넣고, ISO string으로 변환한 후 시간 부분을 뽑아냅니다.
ㄷ-3. 조건부 실행 (Conditional Execution)하기
로지컬 AND (&&)를 사용하면 canRun이 true일 때에만 performAction()이 실행이 되는 예제입니다. if를 사용하지 않고도 간단히 한 줄로 이 로직을 구현할 수 있죠.
ㄷ-4. 파일 확장자 알아내기
string에서 파일 확장자를 리턴하는 예제 코드입니다. 마지막 점을 찾아 그 포지션에서 마지막 문자까지의 string을 리턴하는 방법입니다. >>> 는 점을 못찾을 경우 empty string을 리턴하는 오류방지를 위한 오퍼레이터입니다.
참고:
