개발자의 공부방/Frontend 33

javascript] 함수의 기본파라미터

자바스크립트에서 기본 함수의 파라미터를 어떻게 정의하는지 알아보자. function calcCircleArea(r) { const radius = r || 1; return Math.PI * radius * radius; } const area = calcCircleArea(); console.log(area) 위의 코드는 함수 안에 파라미터가 없을 때 기본 값을 1로 지정하게끔 하는 코드이다. 아래는 기본 값을 지정하는 방법의 또 다른 방법이다. //1. function calcCircleArea(r = 1) { const radius = r || 1; return Math.PI * radius * radius; } const area = calcCircleArea(); console.log(area)..

javascript] 단축평가 논리계산법.

논리연산자를 이용해서 코드를 더 짧게 사용하는 것을 말한다. 전에 있던 Truthy한 값과 Falsy한 값에서 좀 더 나아가보자. const dog = { name: '멍멍이' } function getName(animal) { // 1번째 코드 if(animal) { return animal.name; } return undefined; //----------------------------------- // 2번째 코드 return animal && animal.name } const name = getName(dog); console.log(name) 위의 코드에 1번과 2번은 같은 결과를 내준다. 2번 코드가 어떻게 1번과 같을까? 앞에 부분이 true가 되면 뒤의 값이 오게 된다. 아래의 코드를..

javascript] Truthy와 Falsy

자바스크립트에는 Truthy한 값과 Falsy한 값이 있다. 이 두가지에 대해서 알아보자! 1. Falsy한 값. console.log(!undefined); console.log(!null); console.log(!0); console.log(!''); console.log(!NaN); console.log(!false); 기본적으로 위의 나열된 값은 false가 default값이다. 여기에 ! 느낌표를 덧붙임으로 반전을 했기 때문에 콘솔로그에서는 true가 나오게 된다. ※참고로 NaN은 Not a Number를 의미한다. const value = 1 / 'foo'; console.log(value); >> 결과 : NaN 2. Truthy한 값. console.log(!3); console.log..

javascript] property shorthand란?

ES6에서 property shorthand, 단축 속성명이라는게 있다. 즉, key와 value의 값이 같으면 각각 표기하지않고 한번만 표기하는 것을 말한다. 아래는 vuex에서 사용되는 코드이나 기반은 javascript라서 예제로 사용해본다. commit('ADD_TOAST') 라는 함수 아래 message와 type 속성들이 있다. 이 부분은 key, value값이 동일하기때문에 생략이 가능하다. actions: { triggerToast({ commit }, message, type = 'success') { // commit('UPDATE_TOAST_MESSAGE', message); // commit('UPDATE_TOAST_ALERT_TYPE', type); // commit('UPDATE..

날짜 계산

var loadDt = new Date(); //현재 날짜 및 시간 //현재시간 기준 계산 alert(new Date(Date.parse(loadDt) - 30 * 1000 * 60 * 60 * 24)); //30일전 alert(new Date(Date.parse(loadDt) - 15 * 1000 * 60 * 60 * 24)); //보름전 alert(new Date(Date.parse(loadDt) - 7 * 1000 * 60 * 60 * 24)); //일주일전 alert(new Date(Date.parse(loadDt) - 1 * 1000 * 60 * 60 * 24)); //하루전 alert(new Date(Date.parse(loadDt) + 1 * 1000 * 60 * 60 * 24)); //하루..

자바스크립트] 비밀번호 확인하기.

* 비밀번호 안전성검증 비밀번호 확인 function PasswordIsSame() { var passwordCheck = document.getElementsByName("PASSWORD_CHECK")[0].value; if (passwordCheck.length 20) { window.alert('비밀번호는 9글자 이상, 20글자 이하만 이용 가능합니다.'); document.getElementById('PASSWORD_CHECK').value = document.getElementById('PASSWORD_CHECK_IS_SAME').value=''; document.getElementById('same').innerHTML=''; } if(do..

자바스크립트] 다음주소 API 주소찾기 적용하기

function execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수 // 법정동명이 있을 경우 추가한다. (법정리는 제외) // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. if(data.bname !== '' && /[동|로|가]$/g.test(..