javascript

[Javascript] 모듈 기능으로 살펴보는 자바스크립트

자바스크립트는 웹의 보조적인 기능을 수행하기 위해서 설계되었다는 태생적인 한계 때문에 모듈 기능을 지원하지 않았습니다. 모듈 기능을 지원하지 않는다는 뜻은 각각의 파일들이 독자적인 스코프를 가지고 있지 않고 동일한 전역 객체를 공유하고 있다는 뜻입니다. 그렇기 때문에 전역변수의 사용을 상당히 조심했어야 했습니다. foo.js와 bar.js에서 동일한 전역 변수를 선언했다면, foo의 변수가 bar의 변수로 재정의되면서 foo의 파일이 의도대로 동작하지 않는 문제가 발생하게 됩니다. 시간이 흘러서, 모듈 지원을 해결하기 위해서 CommonJS와 AMD 진영으로 나뉘게 되었고, ES6에 이르러서 module 기능은 표준화가 되었습니다. script 태그에 type="module" 어트리뷰트를 추가하면 로드된..

자바스크립트 객체 부수기

객체란? 객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다. 자바스크립트에서는 이름과 값으로 구성된 속성을 가지는 기본 데이터 타입을 말한다. 자바스크립트에서의 객체는? typeof([]) > "object" typeof({}) > "object" // 함수는 객체의 특성을 가지고 있지만 typeof로는 function을 출력함. typeof(function(){}) 'function' 자바스크립트에서는 원시 값을 제외한 나머지 값(함수, 배열 정규표현식)은 모두 객체이다. 자바스크립트를 구성하는 거의 모든 것이 객체라고 생각하면 된다. 자바스크립트는 객체 기반의 프로그래밍 언어라고 할 수 있다. 객체 구조 살펴보기 var counter = { num: 0, // 프로퍼티 /..

[Javascript] 이번에야말로 regex를 써보자

✨Regex란? Regular Expressions의 준말이다. 정규 표현식, 또는 정규식이라고도 하며 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 보통 회원가입 시에 아이디나 비밀번호, 이메일과 같은 정보를 유효성 검사할 때 많이 사용한다. 문자열로 고통받는 이들을 위한 구세주 같은 존재이다. 🔍정규표현식 알아보기 Groups and ranges | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문가 아닐때 (?:) 찾지만 기억하지는 않음 Quantifiers ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,} 최소 {min,max} 최소,..

[TIL] 자바스크립트를 알고리즘으로 배웠어요

👨‍⚖️자바스크립트 함수에 대해 공부해보자! 함수의 기본 형태 함수 선언, 함수 호출, 매개변수(parameter), 리턴값 익명함수 function () {} : 이름이 붙어있지 않은 함수를 익명함수라고 부른다 함수 선언의 장점 반복 작업을 피할 수 있다. 모듈화로 가독성이 높아진다 기능별 수정으로 유지보수가 좋다. 함수로 모듈화를 깔끔하게 해놓은 코드만큼 보기 좋은게 없지 암 선언적 함수 function 함수() { // 함수 선언식 } let 함수 = function () {}; // 함수 표현식 let 함수 = () => {}; // 화살표 함수 함수 선언식과 표현식의 호이스팅 차이를 꼭 알고 써야함! 화살표 함수와 일반함수의 차이점 JavaScript - 화살표 함수와 일반 함수의 차이 Java..

[TIL] 행복했던 너와 이제는 안녕...

[2022.11.19 TIL] 프론트엔드 공부를 시작하고나서 받아온 데이터들을 자바스크립트로 처리하는데 한계를 느끼고 코딩테스트 용도뿐만 아니라 자바스크립트로 알고리즘 풀이하는 것에 필요성을 많이 느꼈다. 벌써 작성한지 오래된 코드인데도 그 때 기억이 너무 깊게 남아서 잊을 수가 없다. Lodash쓰고 어찌저찌해서 엄청 더럽게 코드를 짰었다. 알고리즘 공부 해야지 해야지 하다가 이번 항해를 계기로 본격적으로 자바스크립트로 문제풀이를 시작했다. 한동안 꽤 오랫동안 파이썬을 사용해와서 그런지 쉬운 문제에도 세부적인 문법이나 처리를 헷갈려서 어렵게 어렵게 문제를 풀었다. 자바스크립트를 사용하면서 느낀 많고 많은 것들중에 하나는 함부로 결과를 판단해버리지 말고 조건문이나 연산을 정확히 작성해야한다는 점 한가지 ..

[TIL] 자바스크립트에 시동걸기

월요일부터 목요일까지 프로젝트를 진행하다가 긴장감이 갑자기 싹 없어져서 오랜만에 한가하게 공부하는 시간을 가졌다. 오늘부터는 알고리즘 공부를 시작하는 주간이라서 자바스크립트라는 언어의 특성을 공부하는 시간을 가졌다. Javascript의 특성에 대해서 알아보자 🎨JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 1. 느슨한 타입(loosely typed)의 동적(dynamic) 언어 동적 타입 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 synuns.tistory.com 느슨한 동적 타입이라니... 느슨한 것도 맘에 안드는데 동적이기까지 해버린다 지 맘대로에 속을 도통 알기가 힘든 녀석 내가 제일 싫어..

Javascript의 특성에 대해서 알아보자

🎨JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 1. 느슨한 타입(loosely typed)의 동적(dynamic) 언어 동적 타입 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다. 타입 없이 변수 선언하는 것을 느슨한 타입이라고 하며, 강력한 타입(strong typing)을 사용하는 언어는 타입과 함께 변수를 선언해야만 한다. 타입 없이 변수를 선언한다고해서 타입이 존재하지 않는 것이 아니고 컴퓨터가 해석하고 알아서 타입을 지정해준다고 볼 수 있다. 타입에 따라서 자료형에 맞는 메모리를 지정해주는 과정이 존재하기 ..

[Javascript] Array filter 맛깔나게 써보기

가장 많이 사용하는 자료형 중에 하나인 Array의 메소드 중에 존엄 filter에 대해서 알아보자. 📖MDN부터 살펴보기 Array.prototype.filter() - JavaScript | MDN The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. developer.mozilla.org "filter 메소드는 조건을 통과(참)하는 모든 요소를 모아서 새로운 배열로 반환한다" 배열 데이터에서 원하는 조건의 요소들만 쏙쏙 뽑..