허도경, limewhale

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​ 1) for( ) 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다. 중간에 "break;" 문을 만나면 반복문을 중단합니다. for ([initialization]; [condition]; [final-expression]) statement​ ​ 2) forEach( ) 배열의 각 요소에 대해 callback을 실행합니다. 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다. array.forEach(callback(currentvalue[, index[, array]])[, thisArg]) ​ 3) map( ..

👍 목표 호이스팅(Hoisting)이란 무엇인지 이해합니다. 함수 선언문과 함수 표현식에서의 호이스팅 차이를 이해합니다. let / const와 var 변수 선언에서의 호이스팅 예시 차이를 이해합니다. 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅에 대해 이해합니다. 👏호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 단 선언에 대한 부분만 끌어올려지고 값의 할당은 끌어올려지지 않습니다. ✔ 호이스팅이란 자바스크립트 Parser는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지를 먼저 수집합니다. 때문에, 변수를 인식할 때 식별자를 모두 모아서 유효 범위의 최상단에 선언합니다. 단 값의 할당 과정은..

1. Object.assign() 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. 방법 : Object.assign(target,... sources) target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체 ...sources 타겟 오브젝트에 병합 리턴값으로 타겟 오브젝트를 반환 const obj = {a:1}; const copy = Object.assign( {}, obj ); console.log(copy); // {a: 1} const obj1 = {a:1}; const obj2 = {b:2}; const obj3 = {c:3}; const newObj = Object.as..

자바스크립트를 공부하게 되면 한 번쯤은 들어보게 되는 단어가 '클로저'입니다. 하지만 막상 클로저를 설명하려고 하면 어렴풋이 개념은 알고 있어도 쉽게 설명을 하지 못하는 경우가 많습니다. 👍 클로저란? 클로저에 대해 MDN은 아래와 같이 정의하고 있습니다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. MDN에 정의되어 있는 말을 보아도 문맥이 어려워서 선뜻 이해가 되지 않습니다. 위 정의에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(..

자바스크립트에서 문자열에서 문자 또는 문자열의 위치를 검색 위해서는 indexOf와 search 함수를 사용하고, 문자열의 뒤에서부터 문자열을 검색할 때는 lastIndexOf 함수를 사용하면 됩니다.​ - str.indexOf(searchValue[, fromIndex]) - str.search(regexp) - str.lastIndexOf(searchValue[, fromIndex]) 대부분 문자열을 찾을 때는 indexOf 함수를 많이 사용하며, 정규식을 사용해야 할 경우 search 함수를 사용하면 됩니다. 문자열을 찾으면 문자열의 첫 번째 위치를 반환하고 찾지 못하면 -1을 반환합니다. 💡 indexOf 함수로 문자열 찾기 const str = 'HTML,CSS,JavaScript'; const..

ES6 내용 중 이전에 정리를 했었지만 스스로 제대로 이해를 하지 못하고 있는 거 같아서 다시 한번 내용을 정리해 보려 합니다. 구조 분해 할당이란 배열이나 객체의 값을 원하는 개별 변수에 할당할 수 있습니다. 💡 Before : 배열/객체 데이터를 가져오는 방법 // 배열 let array = ["멍멍이", "냥냥이"]; let name1 = array[0]; let name2 = array[1]; // 객체 const animal = { name: '멍멍이', color: 'white' }; const name = animal.name; const color = animal.color; 💡 After : destructuring으로 배열/객체 데이터 가져오는 방법 // 배열 let [name1, na..

데이터를 처리할 때 단순 텍스트를 화면에 보여줄때도 있지만 숫자(Number) 형태의 값을 처리할 때도 상당히 많습니다. 가장 대표적인게 금액인데 금액은 다른 숫자 데이터와 다르게 가독성을 위해서 숫자의 3자리 수 단위마다 콤마(,)를 추가해서 표현해 주곤 합니다. 콤마를 표현하기 위해서는 다양한 방법들이 있는데 여러 방법 중에서 코드도 간단하고 심플하면서 정규식이기 때문에 아래 방법을 사용하면 좋을 거 같아서 아래 방법을 추천합니다. 1. 콤마 변환 function CommaFormat(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } // Number Type 전달 CommaFormat(12345) // '12,345' // Stri..

스크립트를 작성하다 보면 이벤트에서 currentTarget과 target이 구분되어 존재하는 것을 알 수 있습니다. 분명 차이점이 존재하기 때문에 두 개가 구분되어 사용되는 데 그 차이점을 알아보려고 합니다. 💡 currentTarget과 target의 차이점 currentTarget : 이벤트 리스너가 달린 요소 target : 실제 이벤트가 발생하는 요소 좀 더 쉽게 이해하기 위해 예시를 통해서 알아볼게요. Click!! const currentTarget = document.getElementById('event-wrap'); currentTarget.addEventListener('click',(event)=>{ console.log('currentTarget : ', event.currentT..

이전에 작성했던 jQuery를 바닐라 JS로 변경하기라는 글에서도 잠깐 서술한 적이 있는 fetch에 대해서 알아보려고 합니다. fetch에 대하여 정리하면서 Ajax와 fetch, Axios의 차이점에 대해서도 간단히 정리해 보려고 합니다. 일반적으로 외부 API를 호출하기 위해서는 비동기 방식을 이용하여 데이터를 가져와야 합니다. JavsScript에서 비동기 통신을 위해 사용하는 대표적인 방법으로는 Ajax, Axios, fetch가 있습니다. 동기, 비동기 개념과 차이 -동기방식 (Synchronous : 동시에 일어나는) 요청과 그 결과가 동시에 일어난다는 약속으로, 바로 요청을 하면 시간이 여부에 상관없이 결과가 나올 때까지 기다렸다가 결과가 나타난 후 다음 명령어를 실행합니다. -비동기방식 ..

jQuery에 익숙해지면 너무나도 간단하지만 저는 요즘 작업할 때 jQuery를 사용하지 않고 순수 자바스크립트로 작업을 하려고 합니다. React나 Vue와 같은 프레임이 많이지면서 jQuery와 같이 Dom을 직접 탐색하여 이벤트를 발생시키는 건 스크립트 충돌면에서도 좋지 않고 또 별도의 npm을 설치해야 하기 때문입니다. 자바스크립트에서 jQuery 없이 사용하려면 너무나도 불편했던 형제선택, siblings()를 사용해 보겠습니다. function siblings(t) { const children = t.parentElement.children; const tempArr = []; for (let i = 0; i < children.length; i++) { tempArr.push(childre..