개발(Development)/JS(자바스크립트)80 [JS] Mutation이란? mutable vs. Immutable (cf. const 키워드) # Mutation이란? 프로그래밍 세계에서 Mutate란 값을 바꾸는 것, 즉 "change the value" 와 동의어이다. 이에 따라, Javascript에서 데이터 타입은 값을 바꿀 수 있는지 여부에 따라서 다음의 2가지로 분류 된다. Immutable: 값을 바꿀 수 없는 데이터 타입. (e.g. 원시 타입) Mutable: 값을 바꿀 수 있는 데이터 타입. (e.g. 참조 타입) # 재할당(Reassignment) vs. 변경(Mutation) 주의할 점은 값의 재할당(Reassignment)와 값의 변경(Mutation)은 다른 의미라는 점이다. 예를 들어, myName이라는 변수에 새로운 string 값을 재할당하는 것은 가능하지만. let myName = "Teddy"; myName =.. 2023. 8. 27. [JS] 코드 실행 특정 시간 대기/지연 방법 (코드 1줄) # Javascript - 코드 실행 대기/지연(Wait/Delay) 방법 Promise 를 이용하면 코드의 실행을 특정 시간 대기 시킬 수 있다. 아래의 코드 1줄짜리 함수를 정의해두고 호출하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); 구체적인 사용 방법은, delayTime() 함수를 호출하면 Promise를 반환하므로 then(콜백함수) 방식이나, async/await 방식을 사용하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); // .. 2023. 8. 24. [JS] 배열 중복 요소 제거 방법 (코드 1줄 ) # Javascript - 배열 중복 요소 제거 방법 자바스크립트에서 배열 중복 요소를 제거는 아래의 코드 한 줄이면 충분하다. const dedupeArray= (arr) => [...new Set(arr)]; 아래와 같이 사용하면 된다. const dedupeArray = (arr) => [...new Set(arr)]; const myArr = [1, 1, 2, 2, 2, 3]; dedupeArray(myArr); // [1, 2, 3] 작동원리는 Set 으로 중복요소를 제거하고, Spread 문법으로 새로운 배열을 생성한다. 함수로 만들어 두고 필요할 때마다 가져다 쓰면 편하다. 2023. 8. 24. [JS] 배열에서 랜덤으로 요소 추출하는 초간단 방법 (코드 1줄) # JavaScript - 배열 요소 랜덤 추출 방법 자바스크립트의 배열의 요소를 랜덤으로 추출하는 코드는 아래의 코드 한 줄 짜리 함수로 쉽게 구현 가능하다. const getRandomElement = (arr) => arr[Math.floor(Math.random() * arr.length)]; const 당첨자명단 = ["Teddy", "Jennifer", "Nicole", "Brad", "Tom"]; getRandomElement(당첨자명단); // 랜덤으로 한명씩 나옴 작동원리는 다음과 같다: Math.random()은 [0이상, 1미만) 사이의 랜덤한 소수를 반환한다. 여기에 배열의 요소 수(length)를 곱해주면, [0이상, 배열의 요소 갯수 미만) 사이의 랜덤한 소수가 반환된다. Mat.. 2023. 8. 23. [JS] 영어 단어/문장 첫글자만 대문자로 바꾸는 초간단 방법 (코드 1줄) # Javascript - 영어 단어 첫 글자만 대문자로 바꾸는 방법 자바스크립트 자체적으로는 영어 단어의 첫글자만 대문자로 바꾸는 기능이 없다. 하지만 toUpperCase() 와 slice() 등를 적절히 배합하면, 아래와 같은 한 줄 짜리 함수를 만들어 구현할 수 있다. const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`; const myName = "teddy"; capitalize(myName); // "Teddy" 이 함수의 구동원리는 다음과 같다: str.charAt(0)으로 첫글자만 뽑아서 toUppercase()로 대문자로 변환한다. str.slice(1)으로 두번째 이후의 모든 문자를 추출하여 그대로 뒤.. 2023. 8. 23. [JS] Shallow Copy & Deep Copy 기본 개념, 원리 (feat. 값 vs. 레퍼런스 전달) # Shallow Copy, Deep Copy 기본 이해 이 글에서는 Shallow copy(얕은 복사), Deep copy(깊은 복사)의 기본 개념은 물론, 실질적인 구현 방법과 근본적인 작동 원리까지 파악해보려 한다. 자바스크립트의 Data Type과 Value 전달 및 Reference 전달 Shallow Copy 와 Deep Copy개념과 구현 방법 객체의 작동 방식과 Shallow Copy의 근본 원리 # Javascript의 데이터 타입 Javascript의 데이터 타입은 원시타입과 참조타입이 있다. 1. Primitive Data types undefined Boolean Number String BigInt Symbol ... 2. Structural Data Types Object: ne.. 2023. 8. 22. [Typescript] @ts-ignore vs. @ts-expect-error 차이, 사용법(타입 에러 무시) # Typescript 의 에러 무시 방법 Typescript 사용시, 의도적으로 에러를 무시해야하는 경우가 있다. 타입스크립트 자체의 이슈 때문일 수도 있고, 개발자가 의도적으로 에러 발생을 무시해야하는 경우가 있을 수도 있다. 이럴 땐, 아래의 2가지 주석 중 하나를 에러가 발생하는 코드 위에 추가해주면 된다. // @ts-ignore // @ts-expect-error Typescript의 붉은 에러 경고가 깔끔하게 사라진다. # // @ts-expect-error 와 // @ts-ignore 의 차이점 위 두가지 주석은 미묘한 차이가 있다. 이 차이를 인식하고 필요할 때 적절하게 사용해주면 된다. 1. // @ts-expect-error - 코드에 에러가 있으면 => 해당 코드의 에러를 무시한다... 2023. 5. 9. [Typescript] 설치 및 초기 세팅 방법(node.js 환경) # Typescript 설치 및 세팅 방법 개요 - 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다. - 따라서 `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다. # 설치 및 세팅 방법 1. node.js 설치 (3가지 방법이 있음) - 방법1(초보자 추천): node.js 홈페이지를 통해 설치한다. - 방법2: n 으로 설치(버전 업그레이드에 용이) - 방법3: nvm (버전 스위칭에 용이) 2. package.json 파일 생성 (프로젝트 루트 경로 터미널에서) - `npm init -y` : 디폴트 세팅으로 package.json파일을 생성해준다. (나중에 수정 가능) 3. typescript 모듈 설치 (.. 2023. 5. 8. [JavaScript] if 조건문 효율적으로 가독성 있게 쓰는 방법 # if 조건문 헬(Hell)에 빠지는 이유 자바스크립트에서 if 조건문을 쓸 때, 효율성/가독성이 떨어지고, 추가/수정이 어려워지는 이유는 대체로 2가지이다. 한번에 너무 많은 요소를 비교한다. 중첩(nested)조건이 많아진다. 1-1. 한번에 너무 많은 요소를 비교하는 경우 - 사례 예를 들어, 음식 종류를 비교하는 조건문을 보자. if(food === "pizza" && food === "pasta" && food === "burger" && food === "steak"){ return "Western food"; }else{ return "Asia food"; } - 가독성이 떨어진다 : 음식 종류가 10개 쯤 된다면 더욱 읽기 힘들 것이다. - 비효율적이다 : 동일한 코드(food === ".. 2023. 5. 7. 이전 1 2 3 4 ··· 9 다음
