javascript 5

[모던 자바스크립트] 어썸한 Funtion 변경사항

들어가며 자바스크립트는 함수로 대표된다고 해도 과언이 아니다. 이제는 객체지향적인 방식으로 작업하는 개발자도 많지만 과거부터 함수를 정의하고 사용해왔기에 아직까지 함수 지향적인 코드를 접하는 분들도 많을 것이다. 이번에는 함수의 모던함을 정리하려고 한다. 주로 자주 반복되는 키워드를 생략하고, 축약하여 표현하는 방식으로 변경되었다. 크게 세 가지의 주제로 새로운 함수 사용방법을 정리했다. 그 전에 함수와 자주 혼동되는 메서드를 같이 비교하여 명확히 개념을 정리하고 시작하고자 한다. 함수와 메서드의 차이 함수와 메서드의 구분을 어려워하는 분들이 많아 간단명료하게 한 줄의 문장과 두 줄의 코드로 설명을 끝내겠다. " 바로 호출 가능하면 함수, 다른 객체를 통해서 호출해야 하면 메서드 " alert('Hell..

Development/Etc 2022.09.09

[모던 자바스크립트] Object 기깔나게 사용하기

들어가며 자바스크립트에서 맵(Map)은 ES6가 되어서야 등장했다. 다른 언어에 비하면 상당히 늦은 편이다. 왜일까? 바로 객체(Object)라는 대안이 있었기 때문이다. 따라서 맵을 어떻게 사용하는지 알아가는 것도 좋지만, 그전부터 맵을 대신하던 객체를 어떻게 기깔나게 사용할 수 있는지 파악하는 것이 더 중요하다는 생각이 들었다. 그래서 이번에는 객체에 대해 자세히 알아보려고 한다. 순서는 맵과 객체의 차이를 간단히 살피고, 기존의 객체 사용 방식을 어떻게 개선된 방법으로 사용할 수 있는지 비교하며 설명하면서 진행된다. 객체와 맵의 차이 두드러지는 차이는 키의 타입이다. 객체는 오로지 문자열만 키로 사용할 수 있고, 맵은 모든 데이터 타입을 사용할 수 있다. const sampleFunc = () =>..

Development/Etc 2022.09.08

[모던 자바스크립트] Array 스마트하게 사용하기

들어가며 배열(Array)은 맵과 함께 데이터를 관리하기 위한 가장 효율적인 자료구조다. 이번에는 배열로 무엇을 할 수 있는지 보면서 for 구문의 지옥에서 벗어날 수 있는 것을 목표로 한다. 고전적인 배열 사용방법 배열을 사용하면서 자주 만나는 상황을 통해 그동안 어떻게 해결했는지 살펴보자. 우선 예제로 사용할 데이터를 정의하고 출발한다. const memberList = [ {id: 0, name: '김철수', deptCd: '01', isManager: true}, {id: 1, name: '이영희', deptCd: '02', isManager: false}, {id: 2, name: '고냠이', deptCd: '02', isManager: false}, {id: 3, name: '강이지', dep..

Development/Etc 2022.09.04

[모던 자바스크립트] var를 사용하지 않아야 하는 이유

들어가며 ES6에서는 변수를 사용하기 위해 새로운 문법인 let과 const를 지원하면서 동시에, var의 사용을 지양하라고 권한다. 그렇다면 var는 어떤 문제가 있기에 새로운 대체 문법이 생겼는지, 어떤 차이가 있는지 살펴보자. 우선은 var의 문제점 세 가지를 살펴보자. var의 세 가지 문제점 1. 선언을 중복해서 할 수 있다 var code = 10; var code = 20; console.log(`code: ${code}`); // 'code: 20' 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작하며, 가장 마지막 값을 저장하고 있는다. 2. scope의 범위가 전역 / 함수로 제한된다 var code = 10; if (true) { var code = 0; var codeName =..

Development/Etc 2022.09.03

금액표시할 때 쉼표(,)찍는 방법

개발을 하다보면 금액을 다룰 때가 참 많습니다. 저 역시 요즘 하는 업무에서 금액을 표시할 때가 많은데요, 간단하게 금액을 표시하는 방법을 데이터베이스(서버사이드)와 자바스크립트(클라이언트사이드)에서 표시하는 방법을 설명하겠습니다. 먼저 데이터베이스입니다. /*오라클 기준으로 작성했습니다*/ SELECT TO_CHAR('월급', '999,999,999,999,999') AS '월급' FROM '금액' 이는 TO_CHAR 함수에 포멧을 지정하여 처리하는 방법입니다. 꼭 alias를 지정해서 데이터 매핑에 실수하지 않길 바랍니다. 다음으로는 자바스크립트입니다. const pay = 5000000; // 숫자로 표기된 금액 const strPay = pay.toString().replace(/\B(?=(\d{..