200923_TIL

오늘 한 일

• 문자열 indexOf(), split(), substring(), slice(), toUpperCase(), toLowCase()
• Template string(template literal) 사용방법
• pair programing(Driver) - 코플릿 문자열 문제 풀기(1번 ~ 17)
• Office Hour - csv 형식의 데이터가 주어졌을 때 원하는 문자를 추출하기

 

indexOf(searchValue[, fromIndex])

호출한 String 객체에서 주어진 searchValue 와 일치하는 첫 번째 인덱스를 반환한다.

 

let word = 'Hello Code';

// fromIndex의 기본값은 0이다. 문자열 전체를 대상으로 찾는다.
word.indexOf('l');		// 2

//fromIndex 값이 음수면 전체 문자열을 찾는다.
word.indexOf('l', -6);		//2

//일치하는 값이 없다면 -1을 반환한다.
word.indexOf('z');		// -1

word.indexOf('C', 0);		// 6
word.indexOf('C', 8);		// -1

// 아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용한다.
word.indexOf('');		// 0

// fromIndex >= str.length 이면, 검색하지 않고 바로 -1을 반환한다.
word.indexOf('d', 29);		// -1

 

split([separator[, limit]])

지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

 

let str = 'box, car, coffe, name, korea, computer';

let words = str.split(',');
console.log(words);		// ["box", " car", " coffe", " name", " korea", " computer"]

console.log(words[3]);		// name

let strCopy = str.split();
console.log(strCopy);		// ["box, car, coffe, name, korea, computer"]

 

substring(indexStart[, indexEnd])

기존문자열의 부분 문자열을 반환한다.

 

let word = 'codestates';

// indexEnd이 생략된 경우에 문자열의 끝까지 모든 문자를 추출한다.
word.substring(2);		// 'destates'

// indexStart와 indexEnd가 같을 경우, "" 빈 문자열을 반환한다.
word.substring(4, 4);		// ''

// indexStart > indexEnd 경우, 두 개의 인자를 바꾼 듯 동작한다.
word.substring(0, 1);		// 'c'
word.substring(1, 0);		// 'c'

// 뒤에서 부터 반환하기
word.substring(word.length-5);	// 'tates'
word.substring(word.length-7);	// 'estates'

 

slice(beginIndex[, endIndex])

문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

 

let str0 = 'The Wind Blows',		// str0의 문자열 길이는 14
	str1 = str0.slice(1, 8),		
	str2 = str0.slice(4, -2),		
	str3 = str0.slice(12),			
	str4 = str0.slice(30);			

console.log(str1);		// 'he Wind'
console.log(str2);		// 'Wind Blo'
console.log(str3);		// 'ws'
console.log(str4);		// ''

 

 

Template string(template literal)

백틱(` `)을 이용한다.

${ expression } 을 이용해 변수 or 함수를 표기한다.

 

let a = 2020;
let b = 5;

// Expression_interpolation
Exp = "앞으로 " + b + "년 뒤 \n" + (a + b) + "년 이다.";

console.log(Exp);
// "앞으로 5년 뒤
// 2025년 이다."

// Template_literals

console.log(`앞으로 ${b}년 뒤 
${a + b}년 이다.`);
// "앞으로 5년 뒤
// 2025년 이다."

 

 

오늘 느낀점

• 자바스크립트 문자열 문제를 풀면서 문법을 익히고 있다. 아직까지 어려움은 없다.
• 매주 월, 수는 pair programming 과 Office Hour 가 있는 날이다. 오늘은 페어로 재윤님과 함께 문자열 문제풀이를 했다. 내가 드라이버고, 재윤님이 네비게이터로 진행됐다. 나는 재윤님이 생각할 수 있는 시간을 최대한 주고, 문제가 정답이더라도 부가적인 설명과 레퍼런스를 비교해 재윤님의 알고리즘과 차이점을 설명했다. 설명을 하다보니 왜 그런지에 대한 원리에 대해서 같이 토론하기도 하고, 더 깊이있게 공부할 수 있는 것 같아 만족한다. 재윤님은 코딩이 이번이 처음이라고 하셨는데, 엄청난 학습의지와 열정이 나에게 자극이 되고 있다. 설명을 하면서 더듬은 부분이 많이 있었는데,  앞으로는 재윤님에게 더 쉽게 설명할 수 있도록 준비하면 좋을 것 같다.
• Office Hour 는 1시간 동안 진행됐고, 중요한 개념을 짚어주는 시간이다. 그리고 실무적인 내용도 가끔씩 나오는데, 오늘은 csv(comma-seperated values) 데이터 를 '\n'과 ','로 split() 을 이용해 원하는 값을 추출하는 내용이 유익했다. 예전에 빅데이터 수업을 들으면서 파이썬으로 많이 해봤던 내용인데, 자바스크립트로 하는 방법도 보니깐 어렵지 않았다.

 

내일 할 일

• Do it! 자바스크립트 + 제이쿼리 입문 교재를 보며 공부 시작하기(15일 목표)!
• VS Code 설치, git 과 연동하기