F.E/JavaScript

window의 location에 대해 알아보자

0. 들어가기 전 최근 회사에서 업무를 보면서 History에 대한 부분에 이슈가 있었다. 브라우저에서 이동을 하는 과정에서 기록을 남기지 않고 가야하는 이슈가 있었는 데, 이에 대해 window.location.href를 이용하여 이동하는 것이 아니라 window.location.replace를 이용하여 해결을 했지만 해당 객체에 대한 정리가 필요할 거 같아서 작성을 한다. 1. Location 객체 window.location은 Location 객체를 가르킨다. 우리는 Location 객체를 이용하여 현재 웹 페이지의 URL 정보를 얻거나, 변경할 수 있다. Location 객체에는 데이터에 대한 정보를 받아올 수 있는 인스턴스의 속성과 메서드로 구성되어있다. Location은 읽기 전용의 프로퍼티지..

[JavaScript] 조건문 - if, switch

조건문 조건문은 특정한 조건에 따라 코드 진행을 달리하는 분기처리를 하는 문법으로, Javascript에서는 if문과 switch문을 많이 사용하며, 논리 연산자와 삼항 연산자로도 사용이 가능하다. 조건문 if문 if문은 소괄호 안의 조건식이 참이 될 때, 중괄호 안의 코드를 실행 시킨다. const age = 21 if(age >= 20){ console.log("성인 입니다.") } // 성인 입니다. 조건문 if else문 단순하게 나이가 20살 이상일 때뿐만 아니라 20살이 아닐 때라는 분기처리를 희망하면 else를 아래와 같이 사용한다. if문의 모든 조건들의 해당되지 않는 나머지 경우의 수일 때 else 중괄호 안의 식이 실행이 된다. const age = 18 if(age >= 20){ co..

[Javascript] 반복문 - for, for each, for in, for of

반복문 Javascript에서 코드를 특정한 횟수를 반복하거나 리스트 형태의 데이터를 순회하고 싶을 때 반복문을 사용 합니다. 주로 많이 사용하는 반복문은 for을 이용한 횟수를 중요시하는 반복문들이 있습니다. for for each for in for of 반복문 for 반복문 for은 코드를 특정한 횟수를 반복할 때 사용합니다. for (let i = 0; i 조건식 -> 반복 코드 -> 후위식의 순서대로 진행 되며, 반복하다가 조건식이 false일 때 반복을 멈춥니..

[JavaScript] Hoisting

Hoisting Hoisting이란 변수의 선언만을 해당 스코프의 맨 위로 끌어올리는 것을 의미한다. 아래의 예시를 보고 이해해보자. 아래의 1번을 보면, x는 console.log아래에서 선언과 초기화가 이루어져있는 데도, Error가 아닌 undefiend가 나오고 있다. 이것이 Hoistring의 예시라고 생각하면 된다. 1번처럼 작성한 코드가 Hoistring으로 2번처럼 아래에서 선언된 변수가 선언만은 위에서 되어 undefined가 나오는 것이다. // 1번 console.log(x) // undefiend var x = 1 // 2번 var x console.log(x) x = 1 그렇다면 Hoisting이 안 된다면 어떻게 될까 아래의 예시를 보면 Hoisting이 되지 않는다면 Refer..

[JavaScript] Event Loop

JavaScript에는 동시성 모델인 Event Loop, Call Stack, Callback Queue가 있다. Event Loop EventLoop는 여러개의 스레드를 사용하고, 그 중 우리가 작성한 JavaScript가 실행되는 스레드를 메인 스레드라한다. 이 메인 스레드는 Node JS 프로세스에서는 하나만 존재하며, 한 순간에 한 줄씩 실행된다. 하지만 그 이외의 일을 하는 워커 스레드는 여러개가 존재할 수 있다. Call Stack Call Stack이란 지금 시점까지 호출된 함수들의 Stack이다. 여기서 Stack은 자료 구조 중 하나며, 아래에서 위로 차곡 차곡 쌓이지만, 위에서부터 빼내는 자료 구조다. 즉 함수가 호출 될 때 마다 하나 씩 쌓이고, 리턴 할 때 빠지게 된다. 이벤트 루..

[JavaScript] JSDoc으로 함수 쉽게 사용하기.

JSDoc JSDoc은 JavaDoc과 유사한, JavaScript용 API 생성기인데, 문서 주석을 코드와 함께 직접 소스 코드에 추가할 수 있다. 오늘은 JSDoc을 활용하여 개발을 좀 더 쉽게 하는 방법에 대해 학습해보자. 함수 printWord를 만들어 예를 들어보자 printWord는 인자 하나를 받아, 콘솔에 출려하는 함수다. 우리는 해당 함수를 아래와 같이 선언 하고 호출 할 것이다. const printWord = (word) => { console.log(word) } printWord('Hello') 하지만 함수가 많아지고, 혼자가 아닌 여럿이서 개발을 하게 되면 어떨까?? 분명 해당 함수가 어떤 역할을 하는 지 무엇을 매개 변수로 받는 지를 쉽게 파악하기 어렵다. 따라서 JSDoc을 ..

[JavaScript] Map, Filter, Reduce

MAP() 배열에 접근해 콜백 함수를 통해 새로운 값으로 정의하고 신규 배열을 만들어 반환하는 함수로, 배열을 순회할 때 주로 사용된다. 사용 방법은 arr.map(() => {})이며, 새로운 변수에 저장하거나, log와 같은 이벤트 연결 혹은 UI를 보여줄 수 있다. const arr = [1, 2, 3] // 배열 arr의 값을 2배로 곱한 새로운 배열 반환해 mapArr에 저장 const mapArr = arr.map(item => item*2) console.log(mapArr) // [2, 4, 6] map()의 매개 변수는 value, index, source가 차례로 오게되며, 각각 value는 각 요소의 값, index는 순서, source는 순회 중인 배열이며, 모든 매개 변수를 사용할..

[JavaScript] 이터러블(interable), 이터레이터(iterator), 제네레이터(Generator)

이터러블(interable) 이터레이터를 리턴하는 [Symbol.iterator] 메소드를 가지고 있는 자료를 반복할 수 있는 객체다. 우리가 많이 사용하는 배열도 이터러블이며, 이터러블은 for of문으로 순회 할 수 있다. 만약 [Symbol.iterator] 메소드를 제거한다면, for of문으로 순회 할 수 없게 된다. const arr = [1, 2, 3] for(const a of arr) console.log(a) // 1, 2, 3 //[Symbol.iterator]를 없애본다면? arr[Symbol.iterator] = null for(const a of arr) console.log(a) // ERROR 이터레이터(iterator) 이터러블 객체의 [Symbol.iterator] 메소드..

[JavaScript] 정규식에 대해 알아보자

정규식(정규 표현식) 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서는 정규식도 객체이기에, RegExp의 exec 등의 메서드를 사용할 수 있다. 정규 표현식 만들기 const re1 = /ab+c/ const re2 = new RegExp('ab+c') //정규식은 // 안에 찾고자 하는 패턴을 작성하고 여러가지 옵션을 준다. Groups and ranges | 는 또는을 의미한다. const reg = /HI|HELLO/ // HI or HELLO () 는 그룹을 의미한다. const reg1 = /(HI|HELLO) | (BYE)/ // HI거나 HEllO를 찾거나 혹은 BYE const reg2 = /gr(e|a)y/ //grey 혹은 gray 탐색 (?:) 찾지만, 그..

[JavaScript] Symbol(심볼)

JavaScript는 6개의 원시 타입(Number, String, null, undefined, Boolean, Symbol)과 1개의 객체 타입(Object)를 가지고 있으며, 심볼(Symbol) 타입도 6개의 원시 타입 중 하나로 ES6에서 추가 되었다. Symbol이란? 객체의 속성 키(Property Key)를 고유하게 설정하여, 속성 키의 충돌을 방지하기 위해서 사용된다. Symbol의 생성 Symbol은 함수 Symbol()를 통해 생성한다. const symbol1 = Symbol() const symbol2 = Symbol("Hello") console.log(symbol1) //Symbol() console.log(symbol2) //Symbol(Hello) Symbol은 유일성이 보장..