미성이랑

안녕하세요 ! 오늘은 javascript에서 화살표 함수를 사용하는 이유에 대해 자세히 알아보겠습니다. 화살표 함수의 모양은 알지만, 왜 사용하는지 정확한 이유는 아직 알지 못하신다면 오늘 내용이 많은 도움이 되실 겁니다 ! 📑☑️ javascript에서 함수를 만들 수 있는 문법들에는 보통 어떤 것들이 있을까요? 💭 1. function 함수이름() { // 함수내용 } 2. const 함수이름 = function () { // 함수내용 } 일반적으로 우리는 javascript에서 함수를 만들 때 위 두 가지 방법을 자연스럽게 이용합니다. 이외로는 아래와 같이 ES6 신문법인 화살표 함수를 사용하여 나타내는 방법이 있죠. javascript를 계속 해 오신 분들이라면 이 모양을 한 함수를 많이 봐 오셨..

안녕하세요 ! 오늘은 따로 포스팅한 적이 없어 이번 기회에 소개드리는 3가지 프로미스 메소드와, 더하여 js의 추가된 기능 몇 가지까지 간단히 살펴보는 시간을 가지겠습니다. 목차 🛸 1. String.replaceAll() 2. Promise.any() 3. Promise.all() 4. Promise.race() 5. javascript에서 큰 숫자를 적을 때 꿀팁 6. "??" 연산자 String.replaceAll : replaceAll 은 String 객체에 새로 추가된 메소드입니다 ! 직관적으로 특정 문자열을 원하는 문자열로 바꿀 수 있게 해 주는 메소드인데요, 아래 코드를 보시면 어떤 식으로 동작하는지 바로 이해가 되실 겁니다. - 여러 개의 프로미스들을 배열 형태로 받아들이고, 그들의 결과를..

안녕하세요 ! 오늘은 javascript 스케줄링 함수에 대해 알아보겠습니다. 😇 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call) 이라고 합니다. 호출 스케줄링을 구현하는 방법은 🌟✌🏻두 가지가 있습니다. ✌🏻🌟 ( * 두 함수 모두 콜백 함수를 넘겨받아 실행합니다. ) 1. setTimeout : 지정된 시간이 경과한 후에 한 번 콜백 함수를 실행. 2. setInterval : 지정된 시간 간격마다 콜백 함수를 반복적으로 실행. setTimeout 함수부터 먼저 살펴봅시다. 위 코드와 같이 setTimeout은 인수로 (실행할 함수, 지연시간, ...args) 를 받습니다. 🐟🌀 [ setTimeout의 인수 ] 1. 실행..

안녕하세요 ! 오늘은 코드를 더욱 가독성 있고 간결하게 만들어주는 🌟구조 분해 할당🌟 에 대해 알아보겠습니다. 구조 분해 할당이란 무엇일까요? 이는 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이랍니다. 한 문장만으로 객체나 배열 구조를 분해한 후 각각의 요소들을 새로운 변수들에 하나하나 할당할 수 있게 됨으로서, 객체나 배열 요소들의 변수 할당이 매우 간단해지게 되었습니다 ! 예시 코드를 통해 알아봅시다. 첫 번째 줄 코드에서는 구조 분해 할당을 이용해, 변수 user1에는 'mimi'를, 변수 user2에는 'mike'를, 변수 user3에는 'miso'를 할당하고 있습니다. 따라서 user2를 출력해보면 "mike"가 나오게 됩니다. user2 = users[1]; 형태의 코드를 세 ..

☀️ 안녕하세요 ! 오늘은 javascript의 자료형 중 심볼형(Symbol)에 대하여 알아보겠습니다. ☀️ 지금까지 공부한 바에 의하면 여태까지 객체 property key의 자료형으로는 오직 문자형만 가능했습니다. 그러나 객체 property key로 허용되는 자료형이 하나 더 있는데, 바로 오늘 공부할 심볼형입니다. 🎾🥕 심볼은 변경이 불가능한 고유한 값임을 먼저 말씀드리며, 바로 예시 코드를 통해 심볼을 어떻게 생성하고 또 어떻게 활용하는지 알아보겠습니다. 1. 심볼의 생성 심볼의 생성은 간단합니다. "Symbol()"함수를 사용하면 심볼값을 만들 수 있습니다. 괄호 안에 들어가는 값은 심볼 이름이라 불리우는 것인데, 단지 해당 심볼에 대한 description 목적일 뿐 코드적으로 주는 영향은..

🚨🚨🚨🚨 (= 반복 / 순회 가능한 객체 ) ☝🏻 iterable (이터러블) : for ...of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체. 이터러블 프로토콜을 준수한 객체. 이터러블 프로토콜을 준수한다? = Symbol.iterable 을 이미 가지고 있거나 prototype chain을 통해 상속받는 것. 자신 혹은 자신의 prototype 메소드 중 "Symbol.iterable" 메소드가 존재해야만 iterable하다고 말할 수 있음. ( "Symbol.iterable" 메소드가 iterator를 반환하는 역할을 하기 때문에. 그리고 iterator가 있어야 next 메소드를 통해 반복을 수행할 수 있게 되기 때문에. ) generator 함수, 배열, 문자는 모두 prototype..

안녕하세요 ! 오늘은 javascript의 generator (제너레이터) 함수에 대해 알아보겠습니다. generator 함수는 일반적인 함수와 모양도 기능도 조금 다른데요, 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능이 있답니다! 이 말인즉, 다른 작업을 하다가 다시 돌아와도 진행이 멈췄던 부분부터 이어서 실행할 수 있는 함수라는 뜻입니다. 듣기만 해도 유용할 것 같지 않나요 ?! 쉬운 코드를 함께 보면서 generator 함수와 친해져 봅시다 ! 🌳🌲📗 우선, generator 함수를 선언할 때에는 function 키워드 바로 뒤에 '*'만 붙여주시면 됩니다. 다른 새로운 키워드 2개가 보일 텐데요, 자세한 설명을 하기에 앞서 결론적인 이야기부터 나누자면 "yield"라는 키워드를 만났을 때 ..

안녕하세요 ! 오늘은 지난 시간에 배웠던 Promise (프로미스) 를 더 간지나게 사용할 수 있게 해주는 아이들인 async와 await에 대해 배워보겠습니다. 🥦 [javascript] 비동기 처리(callback, Promise) - https://with-mimi.tistory.com/m/entry/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%ACcallback-Promise [javascript] 비동기 처리(callback, Promise)안녕하세요! 🩶 오늘은 1. 비동기 처리 2. callback 함수 3. Promise 객체 에 대해 하나하나 알아보겠습니다. 자바스크립트를 해오신 분들이시라면 아시겠지만, 자바스크립트에서는 코드를 위에서..

💡 안녕하세요! 오늘은 유용한 객체 메소드들과 숫자메소드들에 대해 알아보는 시간을 가지겠습니다. 📋✍🏻 1. 객체 메소드 2. 숫자 메소드 1. 객체 메소드🌟 1. 객체 복제 : Object.assign() user라는 객체가 있다고 칩시다. 이 객체를 복제해서 이름이 mimi인 새로운 객체를 만들고 싶어요. 이럴 때에는 어떻게 해야 할까요? const mimi = Object.assign( { }, user ); 바로 이렇게 적어주면 됩니다. Object()는 javascript에 내장되어 있는 생성자함수라고 생각하시면 됩니다. assign은 여기서 "할당하다"는 의미로 쓰이는 단어인데요, 두 번째 매개변수로 적힌 user를 첫 번째 매개변수인 중괄호 안에 할당해주게 되는 겁니다. 현재 코드에서는 빈 ..

🍊안녕하세요. 오늘도 감사합니다 🍊 오늘은 클로저에 대해 알아보겠습니다 ! 클로저에 대해 본격적인 설명에 들어가기에 앞서 말씀드리자면, 클로저는 정보 은닉 개념과 연관이 있습니다. 클로저를 사용하면 궁극적으로는 데이터 보호를 할 수가 있게 됩니다. 클로저는 무엇이며 클로저가 어떻게 데이터를 보호하는 역할을 하는 것인지 함께 알아봅시다. 이 코드는 우선 클로저와는 관계가 없는 일반 코드입니다. onlyname함수가 보이고요, 들여다보니 name 매개변수 하나를 받아 바로 콘솔 출력해주는 함수네요. 자, 여기서 저희가 onlyname 함수를 호출한 후에 onlyname 함수 속 age 변수값에 접근하여 변경할 수 있는 방법이 있을까요? 당연히 없습니다. onlyname() 함수 실행이 끝남과 동시에 지역변수..