1. 목적
공부 목적은 아래의 글을 통해 자세하게 남겨놨습니다.
2021.05.06 - [이러쿵 저러쿵/공부 목적] - [공부목적] JS알고리즘 공부 이유 & 우아한테크캠프 도전
이번 정리가 끝일 수 도 있지만 (끝이 아니길 간절히 빌겠습니다..ㅠ) 급하게 자신의 언어스타일을 이용해서라도 사용할 수 있도록 중요 메서드, 클래스(컬렉션?)들을 정리 해보겠습니다.
2. 컬렉션
- Map
맵은 별로 어렵지 않다. new Object()로 선언하여 m['a']=1; 과 같이 써도 되지만 size와 forEach가 먹히지 않는다고 한다.
let m = new Map();
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
m.set('d', 4);
m.set('e', 5);
m.forEach(function(val, key){
console.log(`${key} : ${val}`);
});
console.log(`a: ${m.get('a')}, c : ${m.get('c')}`);
console.log(`size : ${m.size}`);- Set()
set도 많이 어렵진 않고 필자는 잘 사용하지 않지만 가끔 쓰일 때가 있어 정리해 둔다.
let s = new Set();
s.add(2);
s.add(2);
s.add(3);
s.add(1);
s.add(1);
console.log(s.size);
//3
s.forEach(function(val){
console.log(val);
})
// 2
// 3
// 13. 문법 및 메서드
-변수
javaScript는 타입을 따로 지정하지 않아도 됩니다.(TypeScript는 얼핏보기에 자료형이 들어간 JS 같아 보였습니다.)
단 3가지의 종류의 type이 있는데 var, let, const 입니다.
- var
가장 기본적인 변수로 선언 시 중복이 되어도 사용가능합니다.
var a = 123;
console.log(a);
var a = 222;
console.log(a);위와 같이 써도 오류없이 잘 작동 됩니다.
아래 두가지의 종류는 이런 중복을 없애는 변수들 입니다.
- let
let a = 123;
console.log(a);
let a = 222;
console.log(a);
// c:~~1_example.js:3
// let a = 222;
// ^
// SyntaxError: Identifier 'a' has already been declared중복으로 썼을 경우에는 주석과 같은 오류가 발생합니다. let은 값의 변환이 가능합니다. const와 비교해 보겠습니다.
- const
const a = 123;
console.log(a);
a = 222;
console.log(a);
// c:~~1_example.js:3
// a = 222;
// ^
// TypeError: Assignment to constant variable.const는 다음과 같이 a=123에서 a=222로 값을 바꾸면 오류가 발생합니다. C++의 const, java의 final와 같은 역할을 합니다.
사용 -> 편하게 let, var만을 사용해도 괜찮지만 보통 입력받는 바뀌지 않는 값이나 MAX, MIN 값들은 const로 받는 것이 좋을것 같습니다.
- forEach
forEach문은 잘 사용하면 문장을 대폭 줄일 수 있는 것 같아요.
const arr = [0,1,2,3,4,5,6,7,8,9,10];
// 1
arr.forEach(function(element, index, array){
console.log(`${array}의 ${index}번째 요소 : ${element}`);
});
// 2
arr.forEach(element => console.log(element));
// 3
for(let a in arr){
console.log(a);
}
// 4
let str ="abcde";
for(let s in str){
console.log(s);
}배열에 많이 쓰이는 것 같은데 사용은
1. 배열.forEach(function(원소값, 인덱스(0~N-1), 배열){
실행문장
}
2. 배열.forEach(원소값 => 실행(반복)문장);
3. for(let[var] a in 배열){
실행문장
}
4. for(let[var] a in 문자열){
실행문장
}
과 같이 하면 됩니다. 1번과 3번은 편한 것으로 골라 쓰시면 될것 같네요. 혹은 인덱스의 여부에 따라서 사용하면 될것 같아요.
※주의사항
4번 같은 경우는 매우 까다롭습니다. 우선 a는 0~str.length-1 까지를 나타내구요. s는 문자라고 생각하면 됩니다. s+1은 1,2,3,4~ 가 아니라 01, 11, 21, 31~ 으로 출력됩니다. 즉, 인덱스를 나타내는 길이 1짜리 문자열...
- 배열.includes()
배열안에 값을 가지고 있는지 확인 하는 것입니다.
let arr = Array(1,2,3,4,5);
console.log(arr.includes(2)); // true
console.log(arr.includes(6)); // false- 배열.map
어떤 배열이 주어지고 그 배열에 따라 일련의 과정을 거처 한개씩 배열에 저장해야한다면 어떻게 하시겠습니까?
예를 들어 'a','b','c','d'~~ 같은 배열을 a->1, b->2로 바꾸려면 말이죠. 그럴때 배열.map을 사용하시면 될 것 같네요
let al = ['a', 'b','c','d','e'];
let arr = al.map(function(a){return parseInt(a.charCodeAt(0))-parseInt('a'.charCodeAt(0));});
console.log(arr);
//[ 0, 1, 2, 3, 4 ]
- 클래스
클래스는 JAVA와 유사합니다. 다만 생성자에 this.프로퍼티 와같이 생성해 주면 됩니다.
class User {
constructor(name){
this.name = name;
this.num = 123; // 초기변수
}
sayHi(){
console.log("say hello!!!");
}
}더 많은 방법이 있다고 하는데 이게 가장 익숙한 것 같아요..
나중을 위해 다른 방법들도 올려놓겠습니다.
1) 리터럴 방식의 클래스
var 인스턴스 = {
프로퍼티1 : 초기값,
프로퍼티2 : 초기값,
메서드1 : function() {
},
메서드2 : function() {
}
}
2) 함수 방식의 클래스
function 클래스이름() {
this.프로퍼티1 = 초기값;
this.프로퍼티2 = 초기값;
this.메서드1 = function() {
}
this.메서드2 = function() {
}
}
var 인스턴스 = new 클래스이름();
3) 프로토타입(prototype) 방식의 클래스
function 클래스이름() {
this.프로퍼티1 = 초기값;
this.프로퍼티2 = 초기값;
}
클래스이름.prototype.메서드1 = function() {
}
클래스이름.prototype.메서드2 = function() {
- sort
알고리즘에서 빠질 수 없는 매우 중요한 녀석이죠. 보통 배열에 사용하는데 사용법은 매우 간단합니다.
// sort
var arr = new Array(5,7,6,1,4,2,3);
console.log(arr);
arr.sort();
console.log(arr);
// [
// 5, 7, 6, 1, 4, 2, 3
// ]
// [
// 1, 2, 3, 4, 5, 6, 7
// ]가장 기본인 오름차순 이구요. 내림차순과 커스텀도 알아봐야겠죠?
var arr = new Array([1,2],[5,3],[7,2],[4,5],[7,3],[3,2],[6,1],[3,7]);
console.log(arr);
arr.sort(function(a,b){ // 앞에 것 기준 정렬
if(a[0]==b[0]) return a[1]-b[1];
return a[0]-b[0];
});
console.log(arr);
arr.sort(function(a,b){ // 뒤에 것 기준 정렬
if(a[1]==b[1]) return a[0]-b[0];
return a[1]-b[1];
});
console.log(arr);
내림차순이구요. javaScrit는 0보다 같거나 작으면 위치를 바꾸지 않고 0보다 크면 위치를 바꾸는 것 같네요.
배열.sort(fucntion(a, b){
return 조건;
}
- join
이건 C++에 없는 기능이지만 유용할 것 같아서 정리해 둡니다.
console.log(arr.join("")); // 01234
console.log(arr.join("-")); // 0-1-2-3-4
- Stack & Queue
항상 출제되는 DFS, BFS등을 풀때 없어서는 안되는 녀석이죠? 그냥 배열을 Queue나 Stack처럼 사용 할 수 있는 법으로 익히면 될 것 같아요.
var arr = [];
// 공통 PUSH,
arr.push(1);
arr.push(2);
arr.push(3);
arr.push(4);
arr.push(5);
arr.push(6);
console.log(arr);
// [ 1, 2, 3, 4, 5, 6 ]
let value;
// Stack POP
value = arr.pop();
console.log(arr , "\t - > \t" + value);
// [ 1, 2, 3, 4, 5 ] - > 6 // 맨 뒤의(가장 마지막에들어간) 6이 빠짐
console
// Queue DEQUEUE
value = arr.shift();
console.log(arr , "\t\t - > \t" + value);
// [ 2, 3, 4, 5 ] - > 1 // 맨 앞의(가장 처음에들어간) 1이 빠짐
// arr에서 각각 맨 뒤, 맨 앞에서 값이 빠지면서 value에 저장이 됩니다.
// 입력 : arr.push();
// 값 제거 & 반환 : var value = arr.pop() -> 스택(pop), var value = arr.shift() -> 큐 (dequeue)원하는 것에 따라 Deque으로도 사용할 수 있겠죠? 참고로 앞에 원소를 넣는것은 arr.unshift(원소) 입니다.
- 문자열
문자열은 간단히 인덱스에 대한 문자, 문자열 자르기 정도만 알면 된다.
split은 매개변수를 기준으로 나누어 배열을 반환한다.
trim은 앞뒤 공백을 제거해 준다.
substring은 두가지의 파라미터가 있는데 첫번째 파라미터는 시작 인덱스, 두번째 파라미터는 마지막인덱스+1로 시작인덱스 ~ 마지막인덱스 부분 문자열을 반환한다. 예 에서는 1번 인덱스인 1~ 마지막인덱스 2까지 12를 출력했다.
즉, 파라미터는 시작인덱스~ 마지막 인덱스+1로 쓰면 된다. 조금 헷깔리면 파라미터2-파라미터1 = 글자수 로 생각 하면된다.
substr은 substring과 비슷한듯 다르다. 첫 파라미터는 같지만 두번째 파라미터는 글자의 개수이다. 즉, 출력하고 싶은 문자의 수만큼을 입력하면 된다.
console.log("asdklj-dsf-asd-f".split('-'));
//[ '1234', '456', '789', '10' ]
console.log(" asdkjfdkja ".trim());
//abcdefgh
console.log("0123456789A".substring(1,3));
//12
console.log("0123456789A".substr(5,4));
//5678'개발 > 자바스크립트(JS)' 카테고리의 다른 글
| [JS] DOM 관리, 접근 (0) | 2021.05.15 |
|---|---|
| [JavaScript] 배열관련 메서드(sort, filter, every, some, find, findIndex, includes) (0) | 2021.05.13 |
| [JavaScript] JSON파일 다루기 (0) | 2021.05.12 |
댓글