Frontend/JavaScript

var가 있는데 const, let은 왜 나왔을까? 서론 JavaScript에선 변수를 정의할수 있는 예약어가 총 3개가 존재한다. 옛날엔 var를 모두 사용했지만, 최근에 const와 let이 추가되면서 총 3개의 방식이 생겼는데, 왜 새롭게 const, let이 도입되게 되었고, 각 차이점등에 대해서 알아볼 예정입니다. 과거의 var var의 문제점은 세가지가 있었습니다. 가변 - 정의된 변수를 변경할수 있었음. var number = 10; consloe.log(10); # 10 number = 20; consloe.log(20); 함수 scope const a = () => { if(true) { var number = 10; } console.log(number); } a() # 10; 호이스팅..

jest 27 → 28 자충우돌 upgrade 서론 최근 회사에서 사용하던 jest를 27 버전에서 28로 업그레이드를 하는 작업을 진행하였습니다. 작업을 하면서 이전 문서를 확인해야 하고, 최신 지원 하는 기능들을 사용하기 위함이였습니다. 마이그레이션 문서 : https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28/ Breaking change : https://jest-archive-august-2023.netlify.app/blog/2022/04/25/jest-28 주요 Featrue Github action reporter github action에서 CI를 실행할 시, File Chanege에서 실패한 테스트를 리포팅..

5 Secret features of JSON.stringify() (JSON.stringify()의 5가지 비밀 기능) JavaScript 개발자들은 JSON.stringify() 메서드로 대부분 디버깅에 사용합니다. 그러나 console.log() 가 있어도 무슨 소용이 있을까요? // 사용자 객체 초기화 const user = { “name” : “Prateek Singh”, “age” : 26 } console.log(user); // [object Object] console.log 로는 원하는 결과를 인쇄하는 대 도움되지 않습니다. [object Object] 란 객체에서 문자열로의 기본 변환이기 때문에 이렇게 출력됩니다. 그래서 우리는 JSON.stringify() 를 사용해 변환한 다음 콘..

JavaScript Code Styling Best Practices — Maximum Function Length, Callbacks, Parameters JavaScript는 매우 관대한 언어입니다. 실행은 되지만, 오류가 있는 코드를 작성하기에 너무 쉽습니다. 이 글에서는 함수의 길이를 줄이고, 깊은 콜백 중첩을 제거하고 함수에 포함해야 하는 매개변수의 수에 대해서 살펴보도록 하겠습니다. Maximum Function Length (최대 함수 길이) 함수는 최대한 짧아야 좋습니다. 20 ~ 30줄이 함수의 최대 길이라고 생각합니다. 한가지만 수행해야 하며, 그 이상 함수가 수행할 필요는 없습니다. 길이를 줄이면 읽기가 더 쉬워지고, 길어지면 읽기가 어려워집니다. 긴 함수의 내용은 따르기가 어렵습니다..

Learn Javascript Reduce method with 10 examples reduce 메서드는 배열의 모든 항목에 함수를 적용하고 시작점에서 반복적으로 결과를 누족한 다음 단일 값 또는 객체를 반환합니다. 시작 값을 지정할수 있으며, 지정하지 않으면 배열의 첫번째 값을 사용합니다. 합과 곱셈 ∑의 D∏ // 합 [3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i); // 초기값 없이 사용 [3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 ); [3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 ); // 곱셈 [3, 5, 4, 3, 6, 2, 3, 4]..

7 Powerful JavaScript Shorthands That You Should Know(알아야 할 7개의 강력한 JavaScript의 단축 표기법) 코딩 속도를 올리기 위해 사용할 수 있는 유용한 JavaScript의 단축 표기법입니다. 자바스크립트는 요즘 매우 강력한 프로그래밍 언어입니다. 자바스크립트로 우리는 할 수 있는 것들이 많이 있습니다. 그 외에도 자바스크립트에는 많은 유용한 도구, 프레임워크, 라이브러리를 발견할 수 있는 거대한 생태계가 있습니다. 자바스크립트는 개발자의 삶을 쉽게 만들어 주는 많은 강력한 기능과 도구들이 있습니다. 문법에는 자바스크립트 코드 빠르게 작성하거나 라인수를 줄이여서 사용할 수 있는 많은 단축 표기법들이 포함되어 있습니다. 특히 최신 ECMAScript 사..

DOM(Document Object Model) VS BOM(Browser OBject Model) 📝 DOM(Document Object Model) 문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와줍니다. 간단하게 말하자면 프로그래밍 언어(예를 들어 JavaScript)가 구조에 접근할 수 있는 방법을 제공해 문서 구조나 스타일, 내용을 변경할 수 있게 도와주는 모델입니다. JavaScript는 어떤 작업을 할 수 있게 해주..

JavaScript 2차원 배열 소개 자바스크립트는 진정한 2차원 배열이라는 것이 존재하지 않는다. Java처럼 [][] 이런식으로 선언이 불가능하다는 의미이다. 그러나 간단한 트릭을 이용하여 2차원 배열과 비슷한 배열을 만들수는 있다. 반복문을 사용 let arr = new Array(5); for(let i = 0; i new Array(5).fill(0)); Array.from() 유사 배열 객체나 반복 가능한 객체를 얕은 복사로 객체를 만드는 함수 Array.fill() 배열 안에 값을 채워 넣는 함수

Array.every() & Array.some() Array.every() every() 함수란? 특정 조건이 배열의 모든 요소와 부함하는지 확인하는 함수 array.every(callback(element[, index[, array]])[, thisArg]) callback : 함수 element : 배열 요소 중 처리되고 있는 요소 index : 배열 요소 중 처리되고 있는 인덱스 (Option) array : 배열 (Option) thisArg : callback이 실행될 때 this 값으로 사용 예제 배열 내 모든 요소가 홀수일 경우 true를 반환 const array = [1, 3, 5]; console.log(array.every((element) => element % 2 === 1))..

간단하게 2진수, 8진수, 10진수, 16진수로 변환하기 Number.toString() Number.prototype.toString() Number 객체를 문자열로 변환해서 반환하는 메서드입니다. 매개변수 중 Optional로 redix를 입력할 수 있습니다. 수의 값을 나타내기 위한 사용되기 위한 기준을 정하는 2 ~ 36사이의 정수라고 하는데, 즉 진수를 나타내는 기수의 값이라고 생각하면 될거 같습니다. redix 값을 지정하지 않는다면 10진수가 defualt로 설정되게 됩니다. 10진수를 2진수로 변환하기 const dec = 123; console.log(dec.toString(2)); // 1111011 10진수를 8진수로 변환하기 const dec = 123; console.log(dec..