2021.12.29

sum = sum + i

를 축약하면 sum += i

 

let owner = blog.owner 와

let owner = blog["owner"] 는 같은 뜻.

 

최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있다. ${}도 문자열 중간에 변수를 추가할 때 사용.

EX)

(기본 방식)

let name = "뚱땅보리"
let str = "내 이름은 " + name
console.log(str)
VM2478:4 내 이름은 뚱땅보리

(X)

let str2 = "제 이름은 ${name} 입니다.";
console.log(str2)
VM2640:2 제 이름은 ${name} 입니다.
undefined

 

(O)

let str2 = `제 이름은 ${name} 입니다.`;
console.log(str2)
VM2659:2 제 이름은 뚱땅보리 입니다.

 

===========================================

여기서부터는 숙제 푸는 험난한 과정......

(1) 특정 과일 개수 세기 문제

<문제>

let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기']

let count = 0;

for (let i = 0; i < fruit_list.length; i++) {

   let fruit = fruit_list[i];

   if (fruit == '딸기') {

   count += 1;

   }

}

console.log(count);

이거를 map을 사용해서 다시 해결해라.

 

let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기']

let count = 0;

여기까지 복사해서 입력해놓는 건 당연히 쉬웠다.

 

map에 대해 간단하게 설명은 들었으나 수업에서 쓴 건

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => {

    console.log(value,i)

})

이렇게 값과 순서를 출력해주는 거여서 완전히 다른 거였다...

 

그래서 처음에는 이해를 못하고

fruit_list.map((value)=>{
    let fruit = fruit_list[value]
    if (value == '딸기') {
    count += 1;
}
})
console.log(count)

 

이렇게 입력을 했는데 놀랍게도 결과가 제대로 2가 나왔다.....

value를 i로 바꿔도 똑같이 2가 나왔다....

하지만 뭔가 찜찜......

그래서 답안지를 봤더니 완전히 다르게 적혀있네!?!?! 일단 좌절.

다른 거부터 해! 그래서 2번을 우여곡절 끝에 풀고 돌아온 나.

MDN에 map을 검색하고 화면을 노려보면서 map 자체가 뭔지 이해해보려고 시도했다.

 

'map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.'

뭔 소리야...일단 그렇구나 함.

 

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

예시 이해 성공.

모르겠는 건 다 넘기면서 쭉쭉 내려감.

 

다음 코드는 숫자의 배열을 받아 각 숫자들의 제곱근이 들어있는 새로운 배열을 만듭니다.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

이것도 이해 성공.

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

이것도 이해 성공.

이쯤되니 'map을 쓰면....리스트 전체를 그냥 통째로 가져다가 쓸 수 있나본데.....?' 하는 생각이 들었다.

그게 MDN에서 적어놓은 map의 정의 그 자체였다는 사실은 지금 이 글을 쓰면서 실시간으로 깨달았다...

그래서 반신반의한 상태로 콘솔창에 더듬더듬

 

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;

fruit_list.map((x)=>{
    if (x == '딸기') {
    count += 1;
}
})
console.log(count)

 

이렇게 적어보니 2가 나오는 게 아닌가!!! (솔직히 오류 뜰 줄 알았다.)

곧바로 답안지를 확인하니 정답!!!! 야호!!!!

 

(2) 이메일 검사 함수 만들기

<문제>

입력한 이메일이 제대로 된 이메일인지 어떻게 알아낼 수 있을까요? 예컨대 gunhee#gmail.com이라고 썼다면 이메일인지 어떻게 할 수 있을까요?

function checkEmail(email) {

...

}

checkEmail('gunhee21@gmail.com') // 이메일이 맞습니다

checkEmail('gunhee21$gmail.com') // 이메일이 아닙니다.

 

1.구글에 "자바스크립트 indexOf"라고 검색 한 다음 indexOf를 이용하여 풀어보세요

2.구글에 "자바스크립트 이메일 정규표현식"이라고 검색한 다음 정규 표현식을 이용해서 구현해보세요

 

2번이 문제가 2개였다는 사실은 지금 알았음...

이건....더 이상 뇌가 돌아가지 않으므로 내일 해설영상 보면서 다시 살펴볼 예정.

(구글 검색은 해봤는데 당연하게도 전혀 이해가 안 됐다!)

 

indexOf를 검색했다.

MDN을 들여다봤는데 이해하는 데 실패했다!! 뭐라는 거야!!!!!!

그래서 어쩔 수 없이 일반 블로그를 뒤져봤다.

https://hianna.tistory.com/379

https://webisfree.com/2015-06-22/[자바스크립트]-배열-또는-문자열에-indexof()-사용한-특정-문자-검색 

두 글이 도움이 돼서 첨부.

그런데 특정 문자를 검색하는 예시 코드 안에 자꾸

!= -1

이게 들어가있는 거다.

저게 뭔데!!!! 저걸 설명해줘!!!! 왜 아무도 언급하지 않는 거야!!

하면서 구글에 검색했더니 이미 (지나가듯) 배워서 공부 일지에 적어둔 거였다는 이야기.......

-1이 아니다 라고 하네요.

(답안지 보니 그냥 if(email.indexOf('@') < 0){ 이렇게 적어도 되는 거였더라.

조금 배신감이 들었다.)

그 뒤로는 강의자료를 참고하며 조건문을 붙여 어렵지 않게 답을 적어냈다.

자바스크립트 어려워~!!!