Programming/JavaScript

slice메소드나 Spread Operator를 활용해서 새로운 배열을 생성한 경우 그냥 복사가 되었다고 넘어가면 절대 안된다. "새로운 배열이 생성이 되었기 때문에 원본엔 영향을 주지 않겠지?" 라고 생각한다면 다음과 같은 문제를 겪을 수 있다. 동일한 배열을 생성하기 위해서 다음과 같이 spread 연산자를 사용하였다. 이제 복사를 했으니 한번 복사본을 변경해볼려고 하는데 원본도 변경이 되는 현상이 발생했다. 우리는 원본이 변경되는 것을 막기 위해서 spread 연산을 하였지만 우리가 원하는 결과를 얻을 수 없었다. 근데 왜 이런 현상이 발생하게 된 걸까? const array = [1, [2, 3]]; const shallowCopy = [...array]; shallowCopy[1][0] = 9;..

자바스크립트라는 언어를 배우면서 다른 언어와는 어떤점이 다른가에 대해서 고민을 한적이 있었고, 그 중 하나가 바로 오늘 이야기할 주제이다. 1. Call by reference와 Call by value란? 함수 호출의 대표적인 방법는 call by reference와 call by value가 있다. call by value의 경우 값을 복사해서 호출하는 방법이고, call by reference의 경우 값을 참조해서 호출하는 방법이다. 사실 처음 배우는 입장이라면 참조가 어떤 개념인지 전혀 모를 수 있다고 생각한다. 참조라는 개념은 C의 주소값 개념을 이해하게 된다면 쉽게 이해할 수 있다. 2. 어? 자바스크립트 Call by reference처럼 동작하던데 자바스크립트 또한 c, c++ 처럼 cal..

우리가 서버로부터 데이터를 가져와서 브라우저에 숫자를 보여주는 경우 100000을 1,000,000과 보여주고 싶은 경우가 빈번하게 발생한다. 다양한 방법에 대해서 알아보도록 하자! 1. 정규 표현식을 활용한 방법 function numberWithCommas(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 2. toLocaleString() const num = 123456789; console.log(num.toLocaleString()); 3. Intl.NumberFormat( ).format( ) 최근에 많이 사용하는 방법이며, format의 인자부분에 숫자, 문자열 타입 둘 모두 처리 해주게 된다. console.log..

이번에 우리가 문자열의 길이가 고정된 형태일 경우 빈칸을 동일하게 채울 때 자주 사용하게 되는 메소드인 padStart와 padEnd에 대해서 알아보도록 하자! padStart는.. 문자열의 최대길이를 입력하고 입력된 문자열에서 나머지 부분을 앞에 채워주게 되는 메소드이다. 문자열.padStart(문자열최대길이, "채워줄문자열") 만약 아래와 같이 이진수의 포맷자체가 4자리수가 아닌 5자리수인 경우 4자리수를 5자리로 만들고 싶을 때 사용하는 방법을 알아보도록 하자. 비교적 간단하게 padStart를 사용하면 해결할 수 있다. let binary1 = "1110"; let binary2 = "11101"; // 최대 자리를 5로 설정하고 나머지를 앞에 0으로 모두 채워준다. binary1 = binary..