프론트 엔드/Javascript

[Javascript] 자바스크립트: '==' 와 '==='는 다르다!

무엇이 다른가? "=="와 "==="의 차이점은 무엇일까, 예를 들어, 숫자를 숫자 리터럴과 피교하면 '=='는 그것을 허용하지만 '==='는 두 변수의 형식이 동일하지 않는 경우, 값뿐만 아닌 두 변수의 유형도 확인하므로, 허용하지 않는것, 즉 '==='는 'false'으로 반환하고 '=='는 'true'로 반환한다. '==' 와 '===' 의 차이점 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에서 말했듯, ===는 변수유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다. '==' 연산자를 이용해 서로 다른 유..

[JS] JS와 TS의 차이점

Javascript vs Typescript TypeScript는 Javascript의 기반의 언어 Javascript는 클라이언트 측 스크립트 언어 Typescript는 객체 지향 컴파일 언어 객체 지향 프로그래밍 패러다임은 데이터 추상화에 중심 - 객체와 클래스라는 두 주요 개념을 기반으로 한다. Javascript 웹 개발에 주로 사용되는 언어 웹 페이지를 대화식으로 만드는 프로그래밍 언어 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행하는 역할 클라이언트 측 스크립트 언어 - 사용자가 웹 브라우저를 열고 웹페이지를 요청할 시 해당 요청이 웹 서버로 이동한다. 멀티 스레딩, 멀티 프로세싱 기능이 없음 Typescript Javascript의 상위 집합으로 Javascript의 모든 기능이 ..

[프로그래머스 코딩테스트] 문자열 다루기 기본

[프로그래머스] 문자열 다루기 기본 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인 해주는 함수, solution을 완성하세요, 예를 들어 s가 "a1234" 이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다. 제한 사항 s의 길이는 1이상, 길이 8 이하인 문자열입니다. 입출력 예 s return "a234" false "1234" true 정규표현식을 이용한 풀이법 function solution(s) { return (s.length === 4 || s.length === 6) && /^[0-9]+$/.test(s); } test() 메서드는 주어진 문자열이 정규 표현식에 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다. 1. ^ : 시..

[javascript] map,filter,every 함수

❗️map과 filter함수의 공통점은 기존배열을 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다는 뜻이고, 차이점을 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다. map() Array.prototype.map() 배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴한다. let newArray = arr.map(callback(currentValue[, index[, array]]) { // return element for newArray, after executing something } 안티패턴이지만 parameters(파라미터)를 확인하기 위해 코드를 적어보면 예시 let numbers = [1, 4, 9] le..

[프로그래머스 알고리즘] 같은 숫자는 싫어

문제설명 배열에 arr이 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이떄, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려 합니다. 단, 제거가 된후에는 남은 수들을 반환할때 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면 arr = [1,1,3,3,0,1,1,] 이면 [1,3,0,1]을 return 해야합니다. arr = [4,4,4,3,3] 이면 [4,3]을 return 해야합니다. 배열 arr에서 연속적으로 나타나는 숫자를 제거하고 남은 수들을 return 하는 solution 함수를 완성해주세요. 제한 사항 배열 arr의 크기: 1,000,000 이하의 자연수 배열 arr의 원소 크기: 0보다 크거나 같고 9보다 작거나 같은 정..

[Javscript] 구조분해할당 활용하기

자바스크립트에서 가장 유용하고 많이 쓰이는 문법이라 하면 구조 분해할당을 뺴놓을 수 없다. 구조 분해 할당은 문법은 배열혹은 객체에서 각각 값(value) 이나 프로퍼티(property) 를 분해해 손쉽게 별도에 변수에 담을 수 있도록 해준다. 배열(array) 에서의 구조 분해 할당 let [a,b] = [10,20]; console.log(a); // 10 console.log(b); // 20 구조 분해 할당이라고 해서 특별한 문법적 형태가 다른것이 아닌, 할당받을 변수를 왼쪽에, 분할할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다. 배열 [10,20] 이 분해되어 각각 a,b에 담긴 것이다. 물론 아래와 같이 미리 저장해둔 배열로 부터 구조 분해 할당을 하는 형태도 당연히 가능하다. le..

[Javascript] Scope(스코프) 란?

스코프(Scope) 란? 스코프는 참조 대상 식별자(identifier: 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분해 식별할 수 있는 유일한 이름) 을 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 기본적으로 프로그래밍에서는 변수를 선언하고 값을 할당하며 변수를 참조할 수 있는 기능을 제공하게 되고 이를 토대로 프로그램의 상태를 관리할 수 있다. 전역 변수 혹은 코드 블록 (if, while, for, try/catch 등) 함수 내에 선언하여 변수는 중첩될 수 있고, 자신이 어느곳에서 선언되었는지에 따라서 코드가 자신을 참조할 수 있는 범위를 갖게 된다. 스코프(Scope)의 구분 자바스크립트에서는 총 2가지로 나누어져 있다. 전역 스코프 (Global Scope)..

[Javascript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 차이

깊은 복사와 얕은 복사에 대해 알아보자. 얕은 복사 (shallow copy) 얕은 복사는 참조(주소)값의 복사를 나타낸다. const obj = { value: 1 } const newobj = obj; newObj.value = 2; console.log(obj.value); //2 console.log(obj === newObj); // true obj객체를 새로운 newObj 객체에 할당하였으며 이를 참조 할당이라 불른다. 복사 후 newObj객체에 value값을 변경하니 기존의 obj.value 값도 같이 변경된 것을 알 수 있다. 두 객체를 모두 비교해도 true로 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이..

[Javascript] 호이스팅 이란?

호이스팅 이란? 호이스팅은 코드를 실행하기전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아닙니다. 호이스팅은 코드를 실행하기전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올려진 것 같은 현상을 말합니다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정(실행 전 컨텍스트를 위한 과정)을 거친다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 모든 선언(var,int,const,function,class)를 스코프에 등록한다. 코드실행 전 이미 변수선언/함수선언이 저장되어 있기에 선언문보다 참조/호출이 먼저 나와도 오류없이 작동한다. 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍..

[Javscript] 원시 자료형, 참조 자료형

원시 자료형과 참조 자료형 1.원시 자료형 원시자료형은 고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터라고 한다. 원시 타입 테이터 객체가 아니면서 method를 가지지 않는 6가지 타입(string, number, bigint, boolean, undefined, symbol,null) 원시 자료현 모두 하나의 데이터만을 담고 있다. 예시 const num = 123 const arr = [1,2,3,4,5]; let bye = "good bye!" 위 예시를 보면, 데이터의 크기와 관계 없이 하나의 변수에는 하나의 데이터만을 담을 수 있다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다. 2.참조..

[Javscript] Tagged Template Literal

1. Template Literal 이란? 템플릿 리터럴은 ' ` '(grave accent)로 감싸진 문자열 리터럴로서 여러 줄로 이뤄진 문자열과 문자 보간 기능을 표현할 수 있다. 일반적으로 JS에서 스트링을 표현하고자 한다면 주로 (') 문자나 (") 문자를 사용한다. 이것을 Single/Double quotation (싱글 쿼테이션 / 더블 쿼테이션) 이라고 부른다. 하지만 템플릿 리터럴은 똑같은 스트링을 표현하지만 grave accent(억음 부호) 라고 부르는 ( ` ) 문자로 감싸진 String을 사용한다. 그럼 이 둘 중에 어떤 것이 차이가 날까? 1-1. 줄 바꿈 표현 첫번째 로 줄 바꿈을 조금 더 편하게 표현해 줄 수 있다. 일반적으로 String에서 줄 바꿈을 표현할 때 이런식으로 '..

[Javascript] 모듈 export, import

리액트를 사용하다보면 import & export는 가장 필수적으로 알아야할 문법이다. 하지만 이런 문법들을 처음사용해보면 많이 어색할 수 있어 내용을 정리해보았다. 1.모듈이란? 모듈은 마치 레고의 한조각이다. 리액트가 제일 최적화된 프로그램으로 인식되는 것이 바로 컴포넌트를 하나하나 각각 관리할 수 있기 때문이다. 과거 Vanila Javascript(바닐라 자바스크립트)로 처음 자바스크립트를 접했을때를 생각해보면, script.js하나로 수 많은 html 파일의 스크립트 로직을 짯던 기억이 있을 텐데 어떻게 연결 돼어 있는지 읽기조차 힘든 긴 script.js하나로 여러개 모듈로 연결해 쪼개고, 해당 스크립트에 적용하는 jsx도 따로 분리해 가독성도 유지보수도 편리해진 것이다. js파 하나하나가 모..