Small Grey Outline Pointer 'Dev.' 카테고리의 글 목록 (3 Page)
본문 바로가기

Dev.218

[레츠기릿JS] 계산기 만들기 / event 객체로 중복 제거하기 const onClickNumber = (number) => (event) => { if(operator){ //연산자 비어 있지 않을 때 numTwo += number; }else { //연산자 비어 있을 때 numOne += number; }$result.value += number; } event 객체는 event.target.value 화면상에서 입력 받은 값을 가져오기 위해 사용하는데 여기서 event는 어디서 나온 것인가 => 브라우저가 넣어주는 것이다 const a = () => {} document.querySelector('#plus').addEventListener('click', a); 함수 자리에 a라는 함수를 넣었기 때문에 문제 없다 const a = (event) => { con.. 2023. 4. 23.
[레츠기릿JS] 계산기 만들기 / 고차함수로 중복 제거하기 함수가 함수를 반환하는 경우 const func = () => { return () => { console.log('hello'); }; }; func함수를 호출하면 함수를 반환한다 반환된 함수는 다른 변수에 저장될 수 있고 변수에 저장된 함수를 다시 호출할 수 있다 const innerFunc = func(); innerFunc(); // hello func() 부분을 반환값(retunr문) 으로 대체해보면 이해하기 쉽다 const innerFunc = () => { console.log('hello'); }; innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다 바꾸고 싶은 자리를 매개변수로 만들어 주면 된다 const func = (msg) => { return.. 2023. 4. 23.
[레츠기릿JS] 계산기 만들기 순서도를 먼저 그린다 사람이 계산기를 사용할 때 어떤 순서로 쓰는지 생각해본다 하지만 사람이 계산기를 이용할 때는 예를들어 100을 입력하려고 하면 100을 한꺼번에 바로 입력하는게 아니다 1, 0, 0 이렇게 숫자를 한자리씩 입력하는 것이다 그 후, 연달아 계산하는 방법들의 절차도 하나씩 생각해 본다 하지만 자바스크립트 프로그램의 순서도를 만들 때 사용자 이벤트를 기준으로 순서도를 끊어야 한다고 했다 입력한 숫자를 저장할 변수와 선택한 연산자를 저장할 변수도 생성해야 한다 사용자의 입력 직전에는 항상 대기가 걸린다는 것을 유념해야 한다 앞으로 순서도를 짤 때는 처음처럼 간단하게 짜도 되지만, 코드로 옮기려면 언제 대기가 걸리는지 체크해서 이벤트를 더 작은 단위로 쪼개주는 것이 좋다 10 - 5를 예를 .. 2023. 4. 23.
프로그래머스 접미사 배열 JS 접미사 배열 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다. 문자열 my_string이 매개변수로 주어질 때, my_string의 모든 접미사를 사전순으로 정렬한 문자열 배열을 return 하는 solution 함수를 작성해 주세요 function solution(my_string) { var answer = []; var strLen = my_string.length; for(var i=0;i 2023. 4. 21.
[레츠기릿JS] 배열 기본 const fruits = ['사과', '오렌지', '배', '딸기']; 배열의 자릿수는 0부터 시작 인덱스(index) : 배열의 자릿수 요소(element) : 배열 내부의 값 const fruits = ['사과', '오렌지', '배', '딸기']; console.log(fruits[0]); //사과 console.log(fruits[1]); //오렌지 console.log(fruits[2]); //배 console.log(fruits[3]); //딸기 배열안에 있는 값들의 자료형이 모두 같지 않아도 된다 배열 안에 다른 배열이나 변수를 넣을 수 있다 const arrayOfArray = [[1, 2, 3], [4, 5]]; arrayOfArray[0]; // [1, 2, 3] const a = 10.. 2023. 4. 17.
[레츠기릿JS] 끝말잇기 만들기 세 가지의 대화상자 const number = parseInt(prompt('몇 명이 참가하나요?'),10); alert(number); const yesOrNo = confirm('맞나요?'); prompt : 사용자로부터 값을 입력 받는다 alert : 사용자에게 경고 메세지를 표시 confirm : 사용자의 확인을 요구 (확인 / 취소) 선택자 querySelector / querySelectorAll 1번째 참가자 제시어: 입력 선택자 사이에 공백(띄어쓰기)을 주어 구분한다 document.querySelector('선택자 내부선택자 내부선택자...'); document.querySelector('body #target button...'); //body태그 안에 있는 id값이 target인 태그.. 2023. 4. 4.
프로그래머스 Javascript Lv.0 옹알이(1) 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. var babbling = ['aya','yee','u','maa','wyeoo']; babbling.forEach((word)=>{ if(word.includes('aya')){ console.log('yes!!!!'); console.log(word.includes('aya')); } }); //yes!!!! //true var babbling = ['ay.. 2023. 4. 2.
[인간JS되기] this를 분석할 수 없는 케이스 제로초님 강의 보고 정리중 addEventListener의 this는 무엇일까 const obj = { addEventListener : function(eventName, callback){ callback(obj); // this가 window -> 땡 }, }; header.addEventListner('click',function(){ console.log(this); //this가 header }); - 결론 : 위의 코드만 봐서는 this를 알 수 없다! 왜냐? this는 호출할 때 정해지는데, addEventListner 함수호출은 어디서 되는지 알 수 없음. - 공식문서를 보면 일반적으로 addEventListener의 this는 앞에 붙은 객체,태그로 되어있다고 명시되어 있다 따라서, 공.. 2023. 3. 28.
[인간JS되기] 자바스크립트의 this 제로초님 인간JS되기 강의 보고 정리 자바스크립트의 this는 다른 언어에서의 this와 다르다 콘솔 로그로 this를 찍어보면 윈도우가 나온다 자바스크립트에서 this는 기본적으로 window라고 생각하면 된다 js(브라우저) - window(전역객체) node - global(전역객체) 이었는데, 최근에는 둘 다 globalThis라는 것으로 합쳐졌다고 한다 (if문으로 분기처리를 하지 않기 위해 통합 되었다고 함) const obj = { name : 'soyoung', sayName(){ console.log(this.name); } }; obj.sayName(); // soyoung 이 때 this는 window를 가리키는 것이 아니라, obj객체를 가리킨다 하지만 항상 이렇게 적용 되는 것은 .. 2023. 3. 23.
[인간JS되기] 호이스팅 제로초님 강의 듣고 정리 중 [인간 JS 엔진 되기 1-5] 호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var - 호이스팅 시 변수를 초기화 (undefined) let/ const - 호이스팅 시 변수 초기화X function a(){ console.log('a'); b(); console.log(x); // TDZ const x = 'x2'; } TDZ (Temporal Dead Zone) 스코프의 시작 지점부터 초기화 시작 지점까지의 구간 호이스팅을 염두에 두고 코드 분석해보기 예시 코드 const x = 'x1'; console.log(z); var y = 'here'; const z = () => {}; function c(){ const y = 'y';.. 2023. 3. 13.

티스토리툴바