TIL: 2022-08-23

⚙️ 오늘 배운 언어

JavaScript

 

🐹 오늘의 기분

본격적으로 어려워지는게 느껴지기 시작했다. 첫 페어분과 익숙해지려할 때 새로운 페어분과 함께하게 되어 두려움 반, 설렘 반이었다. 페어프로그래밍을 하니 확실히 내가 설명을 얼마나 못하는지를 깨달을 수 있었다. 상대의 수준을 정확하게 모르기 때문에 자꾸만 나의 시각에서 설명하게 된다. 조금 더 이해하기 쉽게 설명하고 싶은데 그렇게 하다보면 기술용어를 자꾸만 빼먹게 되고ㅜ 좋은 설명은 참 어렵다. 내가 완전히 이해하지 못했다는 반증이기도 하겠다. 하지만 혼자 했다면 분명 중간에 풀다가 포기했을 것 같다. 페어분과 함께 문제를 풀고 고민해보면서 많은 것을 배우고 있다. 동료가 있다는 건 참 든든한 일이다. 혼자가 아니라는 것에 감사하기! 

 

🗝 키워드

비교연산자(>,<, ===), 논리연산자(&, ||, !), 조건문, 문자열, substring, length, slice, indexOf, truthy, falsy, toUpperCase(), toLowerCase(), 단축 평가, split

 

🗣 스스로에게 설명

타입까지 엄격하게 비교하지 않는 '=='와 '!=' 연산자는 사용하지 않는다.

여러 조건을 동시에 만족할 때 코드가 실행되도록 하려면 논리 연산자 '&&'를 사용한다. (조건A && 조건B)

여러 조건 중 하나만 만족해도 된다면 '||'를 사용한다.

불리언 값을 반전시킬 때에는 NOT 연산자 '!'를 사용한다.

✨ 논리 연산자에는 불리언 타입이 아닌 다른 값이 들어갈 수도 있다! 

falsy 값과 truthy 값이 그 예이다.

falsy 값은 불리언 타입은 아니지만 불리언 맥락에서 false로 평가되는 값으로, 아래의 값은 모두 falsy 값이다.

if (false)
if (null)
if (undefined)
if (0)
if (NaN) 
if ('')

falsy 값에 해당하지 않는 모든 값은 truthy 값에 해당한다. 

 

OR 연산자 '||'는 truthy한 값을 만나면 그 값을 출력하고 더 이상 뒤는 평가하지 않는다. (단축 평가)

어차피 OR 연산자에서는 하나만 true여도 true를 리턴하기 때문이다.

모든 값이 falsy하다면, 맨 마지막 값을 리턴한다. 

// 단축 평가 OR

// 하나만 truthy
undefined || 'hello'; // hello
'hello' || undefined; // hello

// 둘 다 falsy
null || 0; // 0

 

비슷한 원리로 AND 연산자 '&&'는 falsy한 값을 만나면 그 값을 출력하고 더 이상 평가하지 않는다. 

하나만 false여도 false를 리턴하기 때문이다.

// 단축 평가 AND

// 하나만 truthy
undefined && 'hello'; // undefined
'hello' && undefined; // undefined

// 둘 다 falsy
null && 0; // null

여기서 falsy하거나 truthy한 값을 그대로 출력하지 않고 불리언 타입으로 출력하고 싶다면, 해당 논리식에 Boolean()을 적용하면 된다.

Boolean('hello' || undefined); // true
Boolean('hello' && undefined); // false

 

문자열의 인덱스 접근이 가능하다. 하지만 인덱스에 값을 할당하여 문자열 자체를 수정할 수는 없다.

문자열에 +를 이용하면 다른 변수와 연결할 수 있다. 그리고 연결된 결과는 자동으로 문자열로 변환된다. (concatenate)

문자열의 길이를 확인할 때에는 length 메소드를 이용한다. 

indexOf(찾을 문자열): 문자열이 있으면 그 문자열이 시작하는 지점의 인덱스를 리턴한다. 문자열이 없다면 -1을 리턴한다.

비슷하게 includes(찾을 문자열) 메소드가 있다. 

lastIndexOf(찾을 문자열)은 문자열의 뒤부터 탐색한다.

split()은 인자로 받는 구분자를 기준으로 문자열을 나눠준다. 

substring 메소드는 처음과 끝 인덱스를 지정하면 처음 인덱스부터 끝 인덱스 사이의 문자열을 리턴한다. 

(처음부터 끝 인덱스까지의 문자열을 리턴하는 것이 아니다!)

문자열을 전부 알파벳 대문자나 소문자로 바꾸고 싶을 때에는 toUpperCase()나 toLowerCase()를 이용한다.

문자열에 toUpperCase()나 toLowerCase를 적용한다고 해서 문자열 자체가 바뀌지는 않는다. 문자열은 바뀌지 않고 그대로 있다. (immutable)

 

❓ 막히는 or 막혔던 부분

조건을 나눌 때 경우를 잘 생각해야 할 것 같다. 조건문 문제가 유독 어렵게 느껴졌던 이유가 이거인 것 같다. 

그리고 논리연산자와 문자열 slice가 어렵게 느껴졌다. 

자바스크립트 딥다이브를 읽어보니 같은 챕터에 단축 평가라는 개념도 등장하는데 한 번만 봐서는 잘 이해가 되지 않아서 천천히 다시 봐야 할 듯 하다.

슬라이스에서는 인자로 넣어주는 인덱스가 너무너무 헷갈려서 차근차근 공부해볼 필요성을 느꼈다. 🔗

그리고 NaN === NaN은 왜 불리언값이 true가 아니라 false로 리턴되는지도 궁금했다. 결국 isNaN을 사용하여 풀긴 했지만, 자바스크립트의 동작 원리를 제대로 학습해야겠다는 생각이 든 순간이었다.

 

🛠 질문 만들기

• 여섯 가지 falsy 값에는 어떤 것들이 있는가? 
• 'hello'의 불리언값은 true인가 false인가?
• 여러 조건을 동시에 만족할 때 코드를 실행하고 싶다면 어떻게 해야 하는가?
• 엔터 단위로 줄이 구분되는 문자열 데이터를 줄별로 나누고 싶다면 어떤 메소드를 어떻게 써야 하는가?
• 길이가 5인 문자열 'hello'의 첫 세글자만 출력하고 싶다면 어떤 메소드를 어떻게 써야 하는가?