22.11.19 토
DAY 5 - javascript (기초다지기)
📌문자열
\역슬래시
alert( 'I\'m the Walrus!' ); // I'm the Walrus!문자열안에 따옴표 넣고 싶을때!
- 비트 NOT 연산자를 사용한 기법
피연산자를 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"가 있는 styles 배열을 생성합니다.
- "Rock-n-Roll"을 배열 끝에 추가합니다.
- 배열 정 중앙에 있는 요소를 "Classics"로 바꿉니다. 가운데 요소를 찾는 코드는 요소가 홀수 개인 3. 배열에서도 잘 작동해야 합니다.
- 배열의 첫 번째 요소를 꺼내서 출력합니다.
- "Rap"과 "Reggae"를 배열의 앞에 추가합니다.
단계를 하나씩 거칠 때마다 배열 모습은 아래와 같이 변해야 합니다.
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()을 작성해 봅시다.
- prompt 창을 띄워 사용자에게 숫자를 입력해 달라고 요청한 후, 입력받은 값들을 배열에 저장합니다.
- 숫자가 아닌 값, 혹은 빈 문자열을 입력하거나 ‘Cancel’ 버튼을 누르면 질문을 멈춥니다.
- 배열 요소의 합을 계산하고 리턴합니다.
주의: 숫자 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)
문자열을 편집하면 객체에 접근할 수 있고,
숫자를 편집하면 배열에 접근할 수 있다.
