CodeStates [1주차]


🙇🏻‍ 2019-04-29 ~ 2019-05-02

1주일에 화, 목만 세션을 진행하기때문에 2일차라고 할 수 있다!

나홀로 JavaScript공부를 하고 있으니, 성취감도 없고 제대로 공부하고 있는지 감이 잡히지 않아서 좀 더 긴장감을 가지고!

방향을 제대로 잡고 공부하기 위해 신청하였다...!

기본적인 내용은 알고 있으니 중요한 내용 위주로 블로깅을 진행하고 싶다.

다시 정리하지 않으면 절대 머리속에 남질...않는다....😂

정규표현식 내용은 따로 블로깅할 예정이다. 이 정도 정리로 학습될 내용이 아니다...!


🍎 문자열

str.substring(start, end)

  • arguments : 시작 index, 끝 index
    start, end를 바꾸어도 같은 값이 나오는 것이 특징아닌 특징🤔
    const str = 'Hello world';
    console.log(str.substring(0, 3));  // 'Hel'
    console.log(str.substring(3, 0));  // 'Hel'
    console.log(str.substring(1, 4));  // 'ell'
    console.log(str.substring(-1, 4)); // 'Hell'
    console.log(str.substring(0, 20)); // 'Hello world'

trim

공백을 자른다.

const hello = '   Hello world!   ';
console.log(hello);                 // "   Hello world!   "; 
console.log(hello.trim());          // "Hello world!";

공백 문자

자주 안쓰이다보니 머리에 잘 안 남는다...

\XXX      8진수 Latin-1 문자
\'        작은따옴표
\"        큰따옴표
\\        역슬래시
\n        개행
\r        캐리지 리턴
\v        세로 탭
\t        탭
\b        백 스페이스
\f        폼 피드
\uXXXX    유니코드 코드포인트
\u{X}     ... \u{XXXXXX}    유니코드 코드포인트 
\xXX      Latin-1 문자

정규표현식

문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴
표현에는 두 가지 방식이 있다.

// 1. 리터럴
var re = /ab+c/;
// 2. 생성자 함수
var re = new RegExp("ab+c");
특수문자를 전부다 적기엔 양이 많고 몇가지만 적어본다!
  • . : 모든 문자와 일치.
  • [] : 대괄호 사이에 존재하는 문자들 중 하나에 일치.
  • [^] : 대괄호 사이의 가장 첫 번째 문자로 ^가 있을 때, 그 문자 이후에 존재하는 문자들을 제외한 모든 문자와 일치.
  • [a-z] : 대괄호 사이 'a ~ z'사이의 모든 문자와 일치.
  • ^ : 대괄호 안에서는 부정을 뜻하지만, 밖에서는 문자열의 시작과 일치.
  • $ : 문자열의 끝과 일치. ^의 반대.
  • * : 앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응. {0,} 와 같은 의미.
  • + : 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응. {1,} 와 같은 의미.
  • ? : 앞의 표현식이 0 또는 1회 등장하는 부분과 대응. {0,1} 와 같은 의미.
  • \ : 특수 목적 문자를 문자 그대로 사용할 수 있도록 변환. \.. 문자 그대로를 뜻함.
패턴
  • \d : 숫자와 일치.
  • \w : 영문자 및 _와 일치.
  • \s : 여러 가지 공백 문자와 일치.
  • \D : 숫자를 제외한 문자와 일치
  • \W : 영문자 및 _를 제외한 문자와 일치.
  • \S : 공백을 제외한 문자와 일치.
  • {n} : 앞에 존재하는 문자가 n번 반복되는 문자와 일치.
  • {n, m} : 앞에 존재하는 문자가 n번 이상 m번 이하 반복되는 문자와 일치.
  • {n,} : 앞에 존재하는 문자가 n번 이상 반복되는 문자와 일치.

str.replace(regexp|substr, newSubstr|function)

어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다.

// /gi : global + 대소문자구분x
var p = 'the lazy dog.';
var regex = /dog/gi;
console.log(p.replace(regex, 'ferret')); // "the lazy ferret."
console.log(p.replace('dog', 'monkey')); // "the lazy monkey."

str.match(regexp)

문자열이 정규식과 매치되는 부분을 검색한다.

// A~E의 모든 문자와 a~e의 모든 문자가 배열의 각 원소를 구성하는 형태로 반환
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);

console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

🍏 배열

length

문자 그대로 길이를 뜻한다.

const alphabet = ['a','b','c','d','e'];
console.log(alphabet.length); // 5

Array.isArray(obj)

배열인지 아닌지 확인한다. 알고리즘 문제에 자주 사용하였다...!
예를 들면...배열이 아니면 -1을 리턴하세요...이런 문제가 많았다...

Array.isArray([]); // true
Array.isArray([1]); // true
Array.isArray(); // false

arr.forEach(callback)

element마다 함수를 반복 실행한다.
parameter로 (현재요소, 현재 인덱스, 배열 자체) 를 받는다.
반복문을 좀 더 멋있게 사용할 때 사용하고 있...다...😅

['1','2','word','값'].forEach((val, index) => {
    console.log(`val: ${val}, index: ${index}`);
})
// val: 1, index: 0
// val: 2, index: 1
// val: word, index: 2
// val: 값, index: 3

arr.map(callback)

기존 배열과 동일한 길이를 갖고, 형태가 다른 새로운 배열을 만들 때 사용한다.
parameter로 (현재요소, 현재 인덱스, 배열 자체) 를 받는다.
너무너무...너무 자주 사용한다...!!!

let double = [1,2,3,4,5].map(val => val * 2);
console.log(double);

arr.filter(callback)

기존 배열에서 조건에 따라 특정 요소를 걸러낼 때 사용한다.
parameter는 이전 메소드와 같다.

let evenNumber = [1,2,3,4,5,6,7,8,9,10].filter(val => val % 2 === 0);
console.log(evenNumber);

arr.slice()

index의 범위만큼 element를 추출
이전 메소드들과 다르게 immutable이라서 기존 값을 변경하지 않는다.
빈 값을 넣으면 복사가 된다.(매우 유용!)

const arr = ['가','나','다','라'];
console.log(arr.slice());    // [ '가', '나', '다', '라' ]
console.log(arr.slice(0,3)); // [ '가', '나', '다' ]
console.log(arr.slice(-1));  // [ '라' ]
console.log(arr.slice(10));  // []

arr.splice()

배열의 내용을 추가/삭제할 때 사용한다.
parameter로 (시작 인덱스, 삭제할 개수, 추가할 요소) 를 받는다.
slice와 달리 mutable이라서 원본이 변경된다.

const user = ['dahuyn', 'sohee', 'naeun', 'yeil'];
user.splice(2, 0, 'sohee'); // [ 'dahuyn', 'sohee', 'sohee', 'naeun', 'yeil' ]
user.splice(2, 1);          // [ 'dahuyn', 'sohee', 'naeun', 'yeil' ]
user.splice(1, 2);          // [ 'dahuyn', 'yeil' ]
user.splice(0, 1, 'nayeon') // [ 'nayeon', 'yeil' ]

arr.reduce()

모든 element의 계산을 누적해 하나의 결과를 리턴한다.
parameter로 (누적값, 현재값, 인덱스, 원본 배열)을 받는다.
마지막에 초기값을 설정해도 되고, 생략도 가능하다.

const oddNumber = [1,3,5,7,9];
const sum = oddNumber.reduce((acc, i) => acc + i, 0);
console.log(sum); // 25

arr.join()

배열 요소를 합칠 때 유용하다.

const sentences = ['I', 'like', 'to', 'eat', 'hamburgers','!!'];
console.log(sentences.join(' '))
// I like to eat hamburgers !!

이 외의 메소드는 알고리즘에서 활용하면서 연습하려고 한다...!👨🏾‍💻