\
역슬래시alert( 'I\'m the Walrus!' ); // I'm the Walrus!
문자열안에 따옴표 넣고 싶을때!
피연산자를 32비트 정수로 바꾼후(소수부는 모두 버려짐) 모든 비트를 반전합니다.
n
이 32비트 정수일 때 , ~n
은 -(n+1)
이 된다.
==> 오래된 자바스크립트에서는 자주 나오지만 코드 작성을 추천하지는 않는다.
(이런거도 있다고 알아만 놓자!)
✏️ 첫 글자를 대문자로 변경하기
ucFirst("john") == "John";
결과가 이렇게 되야한다.
➡️
function ucFrist(str) {
return str[0].toUpperCase() + str.slice(1, str.length);
}
// 굳이 str.length를 안써도 1번째부터 모두 출력된다.
if (!str) return str;
// 빈 문자열인지 확인해주면 좋다!!
✏️ 스팸 문자열 걸러내기
str에 'viagra’나 'XXX’라는 문자열이 있으면 true를 반환해주는 함수 checkSpam(str)을 만들어보세요. 해당 문자열이 없으면 false를 반환하면 됩니다.
함수는 대·소문자 관계없이 해당 단어를 걸러주어야 합니다.
➡️
function checkSpam(str) {
let checkStr = str.toLowerCase();
if (checkStr.includes("viagra") || checkStr.includes("xxx")``) {
return "true";
} else {
return "false";
}
정답
function checkSpam(str) {
let lowerStr = str.toLowerCase();
return lowerStr.includes('viagra') || lowerStr.includes('xxx');
}
alert( checkSpam('buy ViAgRA now') );
alert( checkSpam('free xxxxx') );
alert( checkSpam("innocent rabbit") );
// 결과는 나오지만 정답보다 코드가 길다.
// 어차피 includes() 의 결과가 true or false니까 if문을 쓸 필요없이, if문을 뺀 코드를 return 했으면 좋았을 거 같다.
✏️ 문자열 줄이기
str의 길이를 확인하고, 최대 길이 maxlength를 초과하는 경우 str의 끝을 생략 부호 ("…")로 대체해주는 함수 truncate(str, maxlength)를 만들어봅시다. 새로 만든 문자열의 길이는 maxlength가 되어야 합니다.
함수의 반환 값은 원하는 길이로 줄여진 문자열이 되어야 합니다.
< 예시 >
truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…"
truncate("Hi everyone!", 20) = "Hi everyone!"
➡️
function truncate(str, maxlength) {
if (str.length > maxlength) {
let newstr = str.slice(0, maxlength - 1) + "...";
return newstr;
} else {
return str;
}
}
< 정답 >
function truncate(str, maxlength) {
return (str.length > maxlength) ?
str.slice(0, maxlength - 1) + '…' : str;
}
// 같은 결과라도 코드를 짧고 간결하게 어떻게 쓸 건지 생각해봐야겠다..
✏️ 숫자만 추출하기
달러 표시가 먼저 나오고 그 뒤에 숫자가 나오는 문자열 "$120"가 있다고 가정해 봅시다.
위와 같은 문자열에서 숫자만 뽑아내는 함수 extractCurrencyValue(str)를 작성해 봅시다.
실행 결과는 아래와 같아야 합니다.
alert( extractCurrencyValue('$120') === 120 ); // true
➡️
function extractCurrencyValue(str) {
return str.slice(1);
}
console.log(extractCurrencyValue("$120")); // 120
정답에선 str 앞에 +
를 붙여줬다
✏️ 배열은 복사가 될까요?
let fruits = ["사과", "배", "오렌지"];
// 배열을 '복사'한 후, push 메서드를 이용해 새로운 값을 추가합니다.
let shoppingCart = fruits;
shoppingCart.push("바나나");
// fruits에 어떤 값이 들어 있을까요?
alert( fruits.length ); // ?
➡️
// fruits = ["사과", "배", "오렌지" , "바나나"];
// shoppingCart 가 fruits 배열임으로, shpoppinCart에 새로운 값을 추가하면
// fruits 배열에 추가가 된다!!
✏️ 배열에 관련한 연산
배열과 관련된 다섯 가지 연산을 해봅시다.
단계를 하나씩 거칠 때마다 배열 모습은 아래와 같이 변해야 합니다.
Jazz, Blues
Jazz, Blues, Rock-n-Roll
Jazz, Classics, Rock-n-Roll
Classics, Rock-n-Roll
Rap, Reggae, Classics, Rock-n-Roll
➡️
let styles = ["jazz", "Blues"];
styles.push("Rock-n-Roll");
styles[Math.floor(styles.length / 2)] = "Classics";
styles.shift();
styles.unshift("Rap", "Reggae");
✏️ 배열 컨텍스트에서 함수 호출하기
let arr = ["a", "b"];
arr.push(function() {
alert( this );
})
arr[2](); // ?
// arr = ["a", "b" , function(){alert(this)}] 가 될것이다.
// 배열에는 어떤 자료형이든 들어 갈 수 있다!!
arr[2]()
=> 이건 좀 신기한 형태이다
=> 위에 결과로는 alert창에 arr 값이 출력된다.
신기한 새로운 것을 배웠다.
✏️ 입력한 숫자의 합 구하기
아래 조건을 만족하는 함수 sumInput()을 작성해 봅시다.
주의: 숫자 0은 유효한 숫자이므로, 사용자가 0을 입력하더라도 질문이 멈추지 말아야 합니다.
➡️
function sumInput() {
let arr = [];
while (true) {
let num = prompt("숫자를 입력해주세요", 0);
if (num === null || typeof num !== "number") {
break;
}
let sum = 0
arr.push(num);
sum = arr.reduce((a, b) => a + b);
}
return sum
}
alert(sumInput());
// 이렇게 저렇게 해봤는데, 입력값을 반복해서 받다가 이번에는 입력값을 한번만 받고,
// 자꾸 합계를 받지 못한다.
일단 prompt에 입력 된 값을 변수로 저장,
빈 배열에 받은 값을 push해준다.
이 과정을 반복하고,
빈칸이거나, 숫자형이 아니면 반복하는걸 정지
정지 후, sum이라는 변수에 배열 요소들을 다 더해서 출력시켜준다.
<정답>
function sumInput() {
let numbers = [];
while (true) {
let value = prompt("숫자를 입력해 주세요.", 0);
// 입력받는 것을 정지해야 하는 경우
if (value === "" || value === null || !isFinite(value)) break;
numbers.push(+value);
}
let sum = 0;
for (let number of numbers) {
sum += number;
}
return sum;
}
alert( sumInput() );
💬 정답을 보면 원리를 알겠는데, 내가 직접 코드를 써서 짜야할 때 너무 어려웠다.
자꾸 prompt에 값을 받아서 정지하는 부분이 헷갈리는건가
앞서 문제들도 값을 받는거도 조금 헷갈렸던거 같기도하다.
💬 오늘의 느낀점
일단 문자열 문제 풀때는 그동안 그냥 써왔던걸 좀 머릿속에서 정리가 될 수 있었던 거 같고,
배열은 객체다!
그리고 숫자가 들어가서 뭔가를 구하려고 하면 자꾸 나도 모르게 어려워 하는 건가
쉽게 문제풀이가 잘 안되는 느낌이다..
항상 느끼는 거지만 같은 결과 값을 좀 더 짧은 코드로 짜는 연습을 해야 할 거 같다!
🗣 강사님 feedback!
object의 key 데이터 타입은 문자열(string), array의 key 데이터 타입은 정수 숫자(number)
문자열을 편집하면 객체에 접근할 수 있고,
숫자를 편집하면 배열에 접근할 수 있다.