자바스크립트55 [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. [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. [JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API 기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했다. 아래 글 참고 [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 그러나 execCommand 메서드는 Deprecated 되었으며, 대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다. window.navigator.clipboard.writeText() 메서드를 사용하면, 아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다. 너무나 쉽고 좋아서 정리해두지 않을 수 없다. 1. 텍스트 복사 - navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝! - 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 th.. 2022. 6. 23. [자바스크립트] MediaElementAudioSourceNode 음원 파일(mp3, wav 등) 사용 방법 Web Audi API는 음원의 타입(파일, 버퍼, 스트림 등)에 따라 소스Node와 작업 방식이 조금씩 다르다. 45초 이상의 긴 음원 파일(mp3, wav)을 다루기 위해서는 MediaElementAudioSourceNode를 소스Node로 이용해야 한다. 이 글에서는 MediaElementAudioSourceNode를 통해 mp3 등의 음원파일을 다루는 방법을 정리한다. ※ Web Audio API의 기본 사용 방법은 아래 글 참고 [자바스크립트] Web Audio API 기본 원리와 예제 코드 ※ 45초 이하의 짧은 음원을 다루는 AudioBufferSourceNode는 아래 글 참고 [자바스크립트] AudioBuffer, AudioBufferSourceNode 사용 방법 & 예제 코드 # Med.. 2022. 1. 20. 이전 1 2 3 4 ··· 7 다음
