지난번 nextJS 포스팅에서 @vercel/postgres의 sql에 직접적으로 템플릿 리터럴을 넣으면 오류가 발생하는 부분에 대해 작성했었다. 일단 템플릿 리터럴도 그냥 되고, 편하니까 사용하고 있었는데 이왕 정식 명칭을 알았으니 이제부턴 있어보이게 템플릿 리터럴이라고 표현해야겠다. (그전까진 그냥 백틱이라고만 표현했음..) 템플릿 리터럴 자바스크립트에서 문자열을 생성하는 방법중 하나. ``으로 감싸진 문자열로, 변수, 표현식을 ${}의 형태로 사용할 수 있다. const name = 'John'; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력: "Hello, John!" 그렇다면 sql`템플릿 리터럴`의 형태로 사용하던 함수는 뭘..
자바스크립트 데이터 타입(javascript data type) 자바스크립트에는 8가지 데이터 타입이 있고, 그중 7가지는 원시 데이터 타입이라고 한다. Number BigInt String Boolean null undefined Symbol Object 이중 Object를 제외한 나머지 7개가 원시 데이터 타입이다. 원시 데이터 타입(Primitive value) 변경할 수 없는 불변의 데이터 타입으로, 다른 데이터들을 구성하는 가장 기본적인 단위 한 번 생성되면 변경할 수 없다. 값을 직접 수정할 수 없다. 복사될 때 값 자체가 복사된다.(참조가 아닌 값 자체를 저장) 객체가 아니기 때문에 매서드를 가지지 않는다. *단, 일부 원시 값은 임시로 객체로 변환되어, 매서드를 사용 가능한 경우도 있다. ..
자바스크립트란? ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 프로그래밍 언어라고는 하지만 컴파일 없이 실행이 가능. 예를 들면, 브라우저에서 바로 스크립트를 입력해서 실행이 가능하다. 통상적으로 브라우저에서만 사용하기 위해 만들어졌지만 브라우저 밖에서도 자바스크립트를 돌아가게 해주는 엔진이 있으면 브라우저 외의 환경에서도 동작이 가능하다. 하지만 통상적으로 브라우저 내에서 작동하는 자바스크립트를 기반으로 포스팅을 이어갈 계획이다. 자바스크립트로 브라우저에서 다양한 것들을 할 수 있는데 대표적으로 아래의 작업들을 수행할 수 있다. 웹페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기 ( CRUD ) 사용자 행동에 반응하기 ( 클릭, 스크롤, 기타 등등.. ) 클라이..
for() while문과 같은 반복되는 작업을 처리하기 위해 사용된다. 차이점은 세미콜론으로 구분되는 세개의 선택식을 넣을 수 있는 점 정도?.. 주로 반복 횟수가 딱 정해져 있는 경우에 쓰면 좋다. 구문 for(카운터 변수 초기화, 평가식, 반복 후 평가식) 반복할 문; for(카운터 변수 초기화, 평가식, 반복 후 평가식){ 반복할 블럭문; } //- - - for(let i = 0; i < 10; i ++) console.log(i); //0 //1 //2 //3 //4 //5 //6 //7 //8 //9 하기 for문을 살펴보자. for(...) 내부를 ";"으로 나눠서 보면 for(let i = 0; i < 10; i ++) console.log(i); let i = 0; for문이 반복되는 동..
slice() 배열을 잘라서! 새로운 배열을 반환해주는 간단한 매서드지만 활용도가 굉장히 높다. 구문 Array.slice(시작인덱스); Array.slice(시작인덱스, 종료인덱스); 의외로 시작인덱스도 옵셔널이라 그냥 Array.slice() 하면 기존 배열에서 같은 복사된 배열을 반환해준다. 시작 인덱스만 넣으면 자동으로 종료인덱스는 배열의 끝이 된다. 사용예시 const arr = [1,2,3,4,5,6,7,8,9]; arr.slice(); //[1,2,3,4,5,6,7,8,9] arr.slice(0); //[1,2,3,4,5,6,7,8,9] arr.slice(3); //[4, 5, 6, 7, 8, 9] arr.slice(3, 5); //[4, 5] 시작위치에 음수를 넣어주면, 뒤에서 음수만큼 떨..
includes() 심플하게 배열에 특정요소가 포함되어 있는지를 Boolean(참/거짓)으로 반환해준다. 구문 Array.includes("찾을 원소"); Array.includes("찾을 원소", "인덱스 시작 위치"); indexOf()랑 마찬가지로 두번째 매개변수에 인덱스를 시작할 위치를 찾을 수 있다. 보통 indexOf() 매서드의 반환값이 -1일 때를 이용해 해당 배열에 원소가 포함 되어 있는지 체크했었는데 더 간결한 방법인것 같다. 딱히 사용 예제는 없다.
indexOf() 배열과 문자열에서 사용할 수 있는 매서드로, 지정된 원소의 인덱스를 반환해 준다. 배열에 해당 인덱스가 없다면 -1이 반환된다. 구문 arr.indexOf(찾을 원소) arr.indexOf(찾을 원소, 검색을 시작할 위치) 사용예시 주요 기능과는 다르게 배열에 특정 원소가 있는지 없는지를 판단할 때 자주 쓰인다 -_-;; 물론 Array.includes()가 있긴 한데.. 음.. 왜 내가 공부할 때는 includes()를 안 썼지? 어쨌든.. 배열에 내가 원하는 값이 없을 경우 -1을 리턴해주는 특징을 이용해서 주로 해당 배열에 내가 찾는 원소가 있는지 없는지를 판단할 수 있다. const someArr = ["banana", "apple", "orange"]; someArr.index..
개요 자바스크립트로 뭔가를 하다보면 뭔가를 반복적으로 사용해야 할 일이 생긴다. 예를들어 콘솔에 "a"를 3번 출력 한다고 하면 console.log("a"); console.log("a"); console.log("a"); 이런식으로 될것이고, "a"를 10번 출력해야 한다면 console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); console.log("a"); 이렇게 쓰여질것이다. 물론 이건 뭔가.. 뭔가.. 나쁘진 않지만 뭔가.. 뭔가 무식해보인다. ( 가끔은 저게 먹..
sort()? 배열의 원소들을 콜백함수의 결과에 따라 정렬해 주는 매서드 예를 들어, [1,4,2,3,5]라는 배열을 오름차순으로 정렬해 [1,2,3,4,5] 혹은 내림차순으로 [5,4,3,2,1] 이런 식으로 정리할 수 있다. 특징으로는 원본배열 자체를 정렬해 버리 때문에 원본이 변경되는 걸 원하지 않는 경우엔 배열을 복사 후 사용해야 한다. 구문 sort() sort(compareFn) compareFn 은 정렬 순서를 정해주는 함수로, 매개변수 a와 b를 갖고는데, a는 비교할 첫 번째 원소, b는 비교할 두 번째 원소다. compareFn 내부에서 a와 b를 비교해서 음수, 0, 양수를 리턴해주면 음수일 경우 b를 앞으로, 0일 경우는 그대로, 양수일 경우 a를 앞으로 리턴해준다. 이를 이용해 리..
join()? 자주쓰이지는 않지만 종종 쓰이는 매서드 주로, 문자열을 다룰때 배열로 변환 후 원하는 작업을 처리 한 뒤 다시 문자열을 리턴해야 할 경우 사용된다. 구문 Array.join() Array.join(separator) 매개변수로 separator를 선택적으로 사용할 수 있다. 매개변수를 전달하지 않으면 ","로 배열안의 모든 원소가 문자열이되어 리턴된다. 사용예시 let someArr = [1,2,"hi" ,"nice" ,"to", "meet", "you"] someArr.join(); //"1,2,hi,nice,to,meet,you" someArr.join(""); //"12hinicetomeetyou" someArr.join(" "); //"1 2 hi nice to meet you" s..
split() split() 매서드는 문자열을 입력받은 구분자를 기준으로 여러개로 나눈 배열을 반환해준다. 주로 코딩테스트 등에서 초기에 주어진 문자열을 원하는 배열의 형태로 바꿀때 시작하는 느낌으로 많이 사용한다. 실무에서는 DB에서 받은 데이터가 예를들어 | 라던지 , 로 구분된 문자열을 배열로 변경하는데 자주 사용된다. 음.. 예를들면 "B00|B001|AN001|ZA023" 등의 코드정보가 담긴 문자열을 받았을 때, "|" 를 구분자로 활용해 ["B00", "B001", "AN001", "ZA023"] 와 같은 배열을 얻어낼 수 있다. 구문 String.split() String.split(separator) String.split(separator, limit) 매개변수 separator 원본 ..
filter()? filter는 자바스크립트 Array 객체의 내장 매서드로, 기본적으로는 배열의 각 원소들을 순회하며 콜백함수를 실행하고, 리턴값이 true인 경우의 원소만을 모아서 새로운 배열을 리턴해주는 매서드이다. 단순히 배열에서 특정 조건외의 원소들을 배제 시킬때도 사용하며, 개인적으로는 중복을 허용하는 숫자로 이루어진 원소들중 해당 원소가 몇번째인지를 구할때라던가, 혹은 배열에서 중복값을 제거하는등의 응용해서 사용하는 방식이 흥미로웠다. 사용법 Array.filter((element, index, originArr) => { //some function... }) // - - - - - - const numberArr = [1,2,3,4,5,6,7]; // 3 이하의 원소들로 이루어진 배열을 ..
reduce()? reduce는 자바스크립트의 Array 객체에 내장되어 있는 매서드로, 개인적으로 가장 좋아하는 매서드중의 하나이다. 작동 방식은 기본적으로 2가지의 인자를 가지는데, 배열을 순환하면서 계속해서 들고갈 acc, 그리고 현재 원소인 cur을 갖는다. 쉽게 말하면, map()이나 filter()의 경우엔 각각의 원소들을 순회하면서 이전 원소나, 다음 원소에 대한 정보를 알기가 편하지가 않은데, reduce의 경우 acc에 다양한 형태로 배열을 순환하면서 생기는 결과값들을 저장 할 수가 있다. 리턴하는 결과값도 새로운 배열이 아닌 acc를 리턴하기 때문에 결과는 배열일수도, 객체일수도, 숫자일수도, 문자일수도있다. 가장 간단한 예로, [1,2,3,4,5] 라는 배열의 모든 원소의 합을 구할때..
튜토리얼이나, 프로그래머스 문제 풀이를 할 때마다 자주 나오는 몇 가지 매써드들을 정리해 두고 링크용도로 쓰려고 요 카테고리를 만들었다. 1.Array? Array는 자바스크립트에서 사용되는 목록 형태의 표준 내장 객체인데, [ ]로 감싸고, ", "으로 구분해서 다양한 데이터를 저장할 수 있게 해 준다. [1,2,3,4,5,6] 이런 식으로 1부터 6까지의 목록이 있는 데이터를 저장 하거나 혹은 [1, "happy", true, [1,2,3], {a: 10}] 이런식으로 각각 숫자, 문자, 참/거짓, 혹은 또 다른 배열, 객체 등등 ", "으로 구분해서 저장해 둘 수 있는 아주~ 편리한 내장 객체이다. Array의 기본 형태 [1, 2, 3, 4, 5, 6, 7] ["hellow", "hi", "goo..
