어제 양꼬치에 고량주 먹고 낮잠 잤더니 기록을 못했다
하지만 절거웠다 하하하하 주정뱅이 백수의 삶 나쁘지 않아
나의 목표는 올해안에 (12월 말까지) JS 강의 다 듣고나서
JS기능 여러 개 넣은 다채로운 미니 프로젝트 만들어서 이력서에 추가하고 ,
Typescript 강의 들으면서 타입스크립트 맛보기 끝내기! 이다
오늘 또 가보자구우우우 해진쓰 화이팅
1일차 복습내용
함수 만드는 방법
- var 함수명 = function(p){실행문}
- function 함수명 (p){실행문}
arrow function의 등장
- var 함수명 = (p)=>{실행문}
arrow function, parameter 가 한 개만 있을 경우
- var 함수명 = p =>{실행문}
arrow function, parameter도 한 개, 실행문도 한 줄뿐일 경우
- var 함수명 = p => 실행문
매우 직관적이군
오늘은 예제를 풀어보고자 한다!
간단한 자바서커랩터 예제니까 겁먹지말고 가보자고
첫 번째 예제
setTimerOut은 몇 초 후에 할건지, 또 어떤 실행문을 작동할지 만들 수 있는 기능이다.
setTimeout( ( )=>{ 실행문 }, time)
예시로 setTimeout ( ( )=>{ console.log( 어떤 함수 )} , 1000)라고 적는다면 1000밀리초, 즉 1초 뒤에 console 창에 어떤 함수를 동작시킨다는 뜻이다.
그럼 일단 document.getElementById('버튼').innerHTML 으로 버튼 속 문구를 저장할 수 있으니
- setTimout 적기
- 1초 뒤에 콘솔창에 띄워야 하니
setTimout (( ) => {console.log( 어쩌구 )}, 1000) 로 만들기 - 버튼 속 innerHTML 이니,
내 생각1
setTimeout(( )=>{
console.log(
document.getElementById(' 버튼 ').innerHTML());}, 1000)
으로 쓰면 동작하지 않을까?
아니면 변수를 만들어서 좀 더 깔끔하게
내 생각2
let 버튼속글자 = document.getElementById(' 버튼 ').innerHTML();
setTimeout(( )=>{
console.log( 버튼속글자 );}, 1000)
로 적을 수도 있겠다.
결과는?
어 머머야 웨안돼
콘솔창에 도큐먼트 어쩌구가 not a function 이래
머지
혹시 나 바보짓했나?
innerHTML 뒤의 소괄호를 지워보았다
앗
2번째 방법도
너무 잘 된다
innerHTML 뒤에는 소괄호를 붙이는 게 아니다
푸하하하
알면 됐다
다시는 똥멍청이짓을 하지 않을 경험이 생겼다
어쨌든 첫 번째 예제 성공!
두 번째 예제
Array 안에 있는 숫자의 합을 새로운 함수를 만들어 콘솔창에 출력하는 예제이다.
학원에 다닐 때 1~100까지 합을 구하는 비슷한 예제를 해보았는데 그 때 아무리 들여다봐도 왜 이렇게 작동하는지 이해도 안되지, 왜 중간에 새로운 변수를 만들어야 하는지도 모르겠지, 변수와 함수의 차이는 또 뭔지,,,,^ㅠ^
모르고 계속 헤매기만 했던 기억이 있던 예제라 반가우면서도 이번에는 잘 풀 수 있을까?!
못 풀면 이번에 다시 제대로 배우면 되지! 하는 마음으로 서타트.
일단 내 계획은
- Array 안의 숫자를 모두 한 번씩 꺼내야하니 forEach 필요함.
- hap 이라는 변수를 만들어 hap=0 으로 만들어 forEach 로 나올 Array 안의 숫자들이 달라붙어 더해질 수 있도록 하자.
일단 요정도로 계획을 세웠고 코딩해보자!
음 forEach 도 모든 숫자가 한 번씩 나오긴 하는데
합이 아니라 그냥 0에 a가 한 번씩 더해져 5개의 숫자가 나온다.
어떤 부분을 바꾸면 될까?
Plus 라는 변수는 hap(0임)에 +=a 라는 식으로
0+1, 1+2, 3+3, 6+4, 10+5 가 적용되어 1,3,6,10,15 가 나오고 있다.
이 문제는 어떻게 생각을 바꿔서 적용하면 될까?
일단 forEach 를 사용해 모든 숫자를 한 번씩 꺼내는 데에는 문제가 없다.
hap = 0 의 식을 가진 변수를 만드는 것도, 괜찮다.
덧셈 부분에서 문제가 발생하는데,,,,
머리 팍팍 치면서 하루 이상 들여다봤는데도 모르겠으면 그런다고 금나와라 뚝딱 빛나라 지식의 별이 되지 않는다
찾아보자 도와줘 구글
Array.reduce()
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
arr.reduce( callback [ , initialValue ] )사용방법
- callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐
- accumulator : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
- currentValue : 처리할 현재 요소
- currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
- array (Optional) : reduce()를 호출한 배열
오 이거 완전 누적합을 구하는 최적의 매서드잖아!
해보자
이이게뭐야
reduce 너..........
역시 내가 했던 고민들 다 나보다 더 똑똑하고 빠른 개발자분들도 했던 고민이고 그래서 만들어둔 매소드가 있구나
최고
리액트 처음 배울 때 개발자들 환호하는 기술이라길래 배우는데
배우는 내내 ??????? 왜.... 신세계라는거지?,,,, 했다
왜냐면 잘 모르고 따라가기 바쁘니까 ^ㅠ^
그런데 오늘 매소드 하나에 신세계를 느꼈다
소중한 경험
reduce... 잊지않을게
arr.reduce( ( )=>{ 실행문}, 초기값)
