본문 바로가기

JavaScript17

[JS] Javascript 에서 숫자관련 처리 정리 보통 백엔드 단에서 비지니스 로직을 처리해주면 좋겠지만, 모든 것이 완벽하진 않아 간혹가다가 프론트 단에서 비지니스 로직을 처리해야할 때도 있다. 예전에 모니터링 시스템을 구축하는 업무를 맡은 적 있는데, 대시보드에 표현될 다양한 수치와 통계를 프론트 단에서 계산해서 뿌려주는 것을 보았다. 이런 경우가 비일비재하기 때문에 오늘은 javascript로 숫자 내용을 처리하는 것을 정리하고자 한다. 올림, 내림, 반올림 javascript에서는 Math 를 이용해 다양한 처리를 할 수 있다. 올림은 ceil, 내림은 floor, 반올림은 round 메서드를 이용하여 처리한다. let num1 = 1.3; let num2 = 1.8; console.log(Math.ceil(num1)); console.log(M.. 2022. 2. 13.
[JS] javascript 변수에 대하여 - hosting, scope 기본적으로 javascript에는 var, let, const 이렇게 세가지 변수를 제공한다. 그런데 공식적으로 var를 사용하지 마라고 권장한다. 그 이유는 무엇일까? 변수의 hosting var는 기본적으로 let과 사용방법이 비슷한다. 그러나 약간의 차이가 있는데, var는 한번 선언된 변수를 다시 선언할 수 있다. var myName = 'kang'; console.log(myName); var myName = 'kim'; console.log(myName) 동일한 내용을 let으로 작성해보면 let myName = 'kang'; console.log(myName); let myName = 'kim'; console.log(myName) 에러가 나오는것을 확인할 수 있다. 그리고 var는 선언하기.. 2022. 1. 25.
[JS] javascript에서 배열의 활용 javascript역시 여느 언어와 다르지 않게 배열을 사용할 수 있다. 배열 사용 방법 javascript에서 배열은 대괄호를 이용하여 사용한다. let arr = ['a','b','c','d']; 그런데 다른 언어와 조금 다른 점이 있는데, 배열에 문자, 숫자, 객체, 함수 등 한 타입이 아닌 여러 타입을 동시에 포함할 수 있다. let arr = ['a', 100, true, {name:'bboya', age:5}, function() { console.log('hi'); } ]; 배열의 길이를 구하기 위해서는 배열명.length 로 구할 수 있다. console.log(arr.length); 배열의 메서드 그리고 배열에서는 몇가지 메서드를 제공하는데 먼저 push() 메서드는 배열의 끝에 값을 추.. 2022. 1. 23.
[JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자 java나 c# 등 객체지향 언어를 공부해본 사람이라면 객체가 무엇인지 잘 알고 있을 것이다. javascript도 객체(Object)를 생성하여 사용할 수 있다. Object - 접근 , 추가, 삭제 아래 코드는 person이라는 Object를 생성하는 소스 코드이다. const person = { name : 'bboya', age : 10, gender : 'F', } { } 안에서 name, age, gender라는 key 에 각각 'bboya', 10, 'F' 라는 value가 들어가 있다. 마지막에 , 는 없어도 상관은 없지만, 보통 수정/삭제에 용이하게 하기위해 붙여주곤 한다. 이를 객체 리터럴 이라한다. 객체에 접근, 추가, 삭제하는 방법은 아래와 같다. Object 속성에 접근 객체 속성.. 2022. 1. 23.
[JS] javascript의 화살표 함수 (arrow function) 이전에 js에서 함수 표현 방식에 대해 포스팅했었다. https://devkingdom.tistory.com/306 [JS] javascript의 함수 선언문과 함수 표현식 오늘은 간단하게 js 에서 함수를 사용하는 두가지 방법에 대해 정리해두려고한다. 함수 선언문 어디서든 호출이 가능함, javascript 내부 알고리즘에 의해서 javascript 실행 전 초기화 단계에서 코드 devkingdom.tistory.com 오늘은 함수 표현식을 화살표 함수로 변경해 보는 방법을 포스팅할 예정이다. 자바를 공부해 보신 분들은 자바의 lambda식을 활용해본 적이 있을 것이다. 자바스크립트에서 람다식을 사용할 수 있는데 이를 화살표 함수라 부른다. 실무에서 굉장히 많이 쓰이니 잘 익혀두자. let add = .. 2022. 1. 23.
[JS] javascript의 함수 선언문과 함수 표현식 오늘은 간단하게 js 에서 함수를 사용하는 두가지 방법에 대해 정리해두려고한다. 함수 선언문 어디서든 호출이 가능함, javascript 내부 알고리즘에 의해서 javascript 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠. sayHello(); function sayHello() { console.log('Hello!'); } 그렇기에 위 코드처럼 함수선언문보다 함수호출이 먼저나와도 정상적으로 실행되는 것임. (물론 함수선언문보다 코드가 아래에 나와도 동작한다.) 즉, 함수의 사용 가능 범위가 코드의 위치보다 위아래로 넓은데 이를 '호이스팅(hoisting)' 이라고 한다. 함수 표현식 코드를 한줄 한줄 읽으면서 코드에 도달할때 비로소 함수가 생성이 되고, 그 이후에 사용이 가.. 2022. 1. 22.
[JS] javascript 에서 함수 사용할 때, default 값 세팅하는 방법 하이. 오늘도 간단하게 javascript 에 대해 정리해 보고자 한다. 어떤 언어든 함수를 잘 활용하고 잘 작성하는 것은 중요하다. 함수는 과한 중복을 줄여주고, 프로그램의 응집도를 향상할 수 있는 수단이 되기 때문이다. javascript에서 함수를 작성할때 default값을 세팅하는 몇 가지를 정리해보았다. 1. OR 연산자 활용 function inputName(name) { let myName = name || '홍길동'; let msg = "입력된 이름은 " + myName + " 입니다."; console.log(msg); } inputName('뽀야'); inputName(); 위 코드 의 결과는 아래와 같다. 파라미터로 값이 입력되면 myName 파라미터 값이, 입력되지 않으면 디폴트 값.. 2022. 1. 22.
[JS] 명시적 형변환에 대하여 최근에 이직을 하면서 업무가 변경되어, 단순한 백엔드 쪽 API 개발뿐만아니라 프론트 쪽의 소스도 일부 수정하게 됐다. 특히 javascript 쪽을 건들일이 많을 것 같아서, 오래전의 기억을 살려서 하나씩 정리해보려고한다. 명시적 형변환 오늘 간단하게 정리해둘 내용은 명시적 형변환에 대한 내용이다. 얼마전에 후배한명이 자기가 구현한 소스가 뭐가 문제인지를 봐달라는 연락이 왔다. 아래 내용은 후배가 보낸 코드를 간단하게 만들어서 작성한 내용이다. const aHeight = prompt("a의 키?"); const bHeight = prompt("b의 키?"); const result = (aHeight + bHeight) / 2; alert(result); 코드는 아주 간단하다 . a의 키를 입력 받고.. 2022. 1. 22.