허도경, limewhale

자바스크립트에서 사용하는 call, apply, bind에 대해 알아보려고 합니다. 하지만 그전에 JavaScript에서 this에 대해 우선 먼저 알아보겠습니다. 아니 나는 call, apply, bind가 궁금해서 왔는데 왜 this를 이야기 하는거죠? 라는 의문이 드실 텐데.. 우선 this를 이해하게 되면 부수적으로 call, apply, bind가 연관되어서 이해되기 시작합니다. 그리고 This를 이해하게 되면서 우리를 그렇게 괴롭히던 다양하게 변경되는This(트렌스포머)를 이해할 수 있게 됩니다. 📖 This 너는 누구니? 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. call, apply, bind는 자바스크립트에서 ..

자바스크립트를 사용하다 보면 한 번쯤은 Lodash에 대해 들어보게 됩니다. Lodash는 자바스크립트에서 구현하기 힘든 부분을 보다 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 성능적인 개선 부분에서도 많이 사용하는데 공식문서 가이드 를 참고해도 사용방법을 알 수 있지만 구체적인 예시가 있어야 이해하기가 쉽기에 아래 예제를 통해 사용 방법을 익혀 봅시다. 👏 Collection 배열과 객체 모두 사용 가능한 메서드 💡 filter _.filter( 컬렉션, 검색할 데이터 또는 콜백 함수 ) 컬렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 포함한 컬렉션을 반환합니다. 리스트 검색 조건에 유용합니다. var users = [ { user: 'barney', age: 36, active: tru..

자바스크립트의 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..

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

일반적으로 스크립트를 작성하다 보면 공통적으로 상용되는 스크립트는 별도의 공통 함수로 빼서 작업을 하는 게 일반적입니다. 그래야 관리 이슈도 적고 해당 함수를 호출하게 될 때에도 쉽게 파악하여 스크립트를 사용할 수 있습니다. 이 방식은 정의되어 있는 스크립트를 화면에서 호출할 때에는 아무런 문제가 발생하지 않습니다. 그렇다면 공통 함수를 별도의 다른 스크립트에서 사용해야만 하는 상황이 발생하게 된다면 어떻게 될까요? 위의 상황을 조금 더 쉽게 예시를 들어서 이야기 해 보겠습니다. 우리는 공통 스크립트 "common.js"라는 파일을 만들었습니다. 그리고 특수한 페이지에서만 사용하는 "others.js" 스크립트도 만들어서 사용하고 있습니다. 그런데 작업을 진행하다 보니 별도의 함수에서만 사용하는 스크립트..

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter() 메서드를 사용하면 filter() 메서드의 조건에 맞는 요소로 이루어진 새로운 배열을 반환합니다. 어떤 요소도 조건을 만족하지 못했다면 빈 배열을 반환합니다. 즉 filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다. 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback의 조건을 만족하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다. f..