javascript6 자바스크립트 정규표현식 (Regular expression) 매번 정규 표현식을 사용할 때마다 제대로 이해하지 못한 코드를 가져다 사용하는 것이 싫어 공부해보기로했다. 이번에는 적어도 핸드폰번호와 이메일 정규 표현식은 내가 직접 만들어야겠다. 정규 표현식 만들기 자바스크립트에서 정규 표현식을 만드는 방법은 두 가지가 있다. 정규식 리터럴을 사용하기const regex = /ab+c/; RegExp 객체의 생성자 함수를 호출하기const regex = new RegExp("ab+c"); 정규식 리터럴을 사용하면 스크립트를 불러올 때 컴파일이 된다. 만약 정규식이 상수라면 리터럴 방식을 사용하는 것이 좋다. 반면 생성자 함수를 호출하는 방식은 런타임시에 컴파일이 된다. 그래서 정규식의 패턴이 동적으로 변해야하는 경우에 생성자함수를 사용하면 된다. 사용자에게서 정규 표.. 2021. 5. 28. JavaScript Async/Await (비동기 함수와 실행 순서) Promise → then → promise → then → ... 계속 반복해서 사용하면 난잡해짐! ⇒ 이 문제를 해결하고자 등장한게 Async/Await! (Syntactic sugar) The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. (비동기적인 코드를 동기적으로 보이도록! 가독성 높아짐) # Async async function name([param[, param[, ...param]]]) { statements } 이런식으로 앞에 async 키워드를 사.. 2020. 6. 27. JavaScript의 Call, Apply, Bind ☝ 우선 call, apply, bind를 위해서는 this에 대한 이해가 선행되어야 함. ☝ 일반적으로 JavaScript의 this는 해당 함수를 호출한 객체를 의미한다. (화살표함수에서 제외하고!) 이게 무슨말이야?? 함수를 호출한 객체? 🤦♀️... const toy = { name: 'forky', favorite: 'trash', introduce(){ console.log(`My name is ${this.name}, I like ${this.favorite}`); } } toy.introduce(); // My name is forky, I like trash 여기서 introduce를 호출한 주체는 누구일까? ⇒ 바로 toy!!!가 된다. 이건 어렵지 않게 이해할 수 있다. 그렇다면 조.. 2020. 6. 24. 객체 내 key 또는 value로 배열 만들기 const fruit = { fruit1: "apple", fruit2: "banana", fruit3: "kiwi", fruit4: "grape" } 위와 같은 일반적인 객체나 유사배열 객체는 배열에서만 사용할 수 있는 forEach, map 등의 함수를 사용할 수 없다. (유사배열객체는 []로 둘러싸여있지만 배열은 아니므로 배열의 함수를 이용할 수 없다. Array.isArray(obj)로 확인할 수 있다.) 이를 해결할 여러가지 방법들이 있지만 ES8에서 등장한 문법은 이를 아주 간단하게 해결해준다. Object.keys 객체의 key들만 모아 배열을 반환한다. console.log(Object.keys(fruit)); // result: [ 'fruit1', 'fruit2', 'fruit3', '.. 2020. 4. 6. this 키워드 (this keyword in JavaScript) 최근 자바스크립트에 대해 공부하며 이해한 내용을 바탕으로 작성한 것이며, 계속해서 새로 알게되는 내용이 있다면 추가할 예정입니다. (* "use strict"모드에서는 다른 방식으로 동작하며 이를 사용하지 않는 경우를 가정하고 글을 작성했음을 밝힙니다.) this란 무엇일까? Mozilla MDN사이트에 의하면 this는 다음과 같다. In most cases, the value of this is determined by how a function is called (runtime binding). 함수가 어떻게 불리는지에 따라서 this의 값이 결정된다고 한다. this 키워드는 해당 함수를 호출하는 객체를 가리키기 위해 사용된다. 함수를 호출하는 객체? 무슨 말일까? 아래의 코드를 살펴보자. var.. 2020. 3. 23. 자바스크립트 호이스팅 (JavaScript hoisting) 이전에 함수 호이스팅에 관해 공부를 하 난 후에 정리하면서 쓴 글이 있다. 그러나 최근에 다시 호이스팅에 대해 공부를 하게 되면서 조금 더 알게 된 내용이 있어 정리하게 됐다. 호이스팅이라는 것은 "끌어올린다"는 뜻이다. console.log(one); console.log(two()); var one = 1; function two(){ return 2; } 위의 코드를 실행시키면 각각 undefined와 2가 결과로 나타난다. C++과 같이 호이스팅이 일어나지 않는 언어를 사용한다면 undefined나 결과가 나올 것이 아니라 정의되지 않는 변수 또는 함수라고 나와야 정상이지만 왜 자바스크립트에서는 이런 결과가 나오는 것인지에 대해 알아보자. 그렇다면 언제, 무엇을 끌어올린다는 것일까? 자바스크립트 .. 2020. 3. 20. 이전 1 다음
