본문 바로가기

FrontEnd/Javascript

(26)
JS 유용한 배열 메서드 정리. forEach, map, reduce, find, filter 등등 // forEach는 map과는 다르게 반환값이 없음. 따라서 return해도 undefined가 나옴. let answer=[3,2,1,4]; let attempt=[1,2,3,4]; let strike=0; let ball=0; for(let i=0;i-1){ if(idx==i){ strike+=1; continue; } ball+=1; } } attempt.forEach((value, idx)=>{ let index=answer.indexOf(value); if(index>-1){ if(idx==index){ strike+=1; } else{ ball+=1; } } }); let arr2=[1,2,3,4,5]; /* 아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어..
제로초 baseball Toy project 학습내용 보통이렇게 form과 input태그가 함께 쓰이면 form태그에 evnet를 추가하여 줌. 그래서 아래 코드에$form.addEventListener("submit", (event) => { });와 같이 코딩한 것임. 사실 form 태그 없이 input만 써도 되긴합니다. 하지만 html의 웹표준을 준수하려고 form안에 input태그를 사용해 준것입니다. 버튼(click)과 달리 form태그는 submit이라는 이벤트가 존재합니다. 이렇게 해서 form안에 있는 button을 누르게 되면 submit이 호출되게 됩니다. 기본적으로 아래와 같은 주소(~.html)였다. 그런데 확인 버튼을 누르면 화면이 깜빡거리는 동시에 이 주소가 로 바뀌는 것을 볼수있다(뒤에 ? 가 덧붙음). 이것이 바로 form 의..
Js 배열 //배열은 index를 나타내는 문자열을 property로 갖는다. //js배열에서 key=index다(=js에서 프라퍼티의 key는 index로 쓰일 수 있다) const arr=[7,8,9]; arr[3]="s" arr.x=4; console.dir(Object.getOwnPropertyDescriptors(arr)); console.log(arr); console.log(arr['2']);//배열은 index를 나타내는 문자열을 프라퍼티로 갖는다. console.log(arr[2]); console.log(arr['s']);//undefined; // console.log(arr[x]);//Error x is not defined; console.log(arr['x']);//Js에서는 이처럼 배열의..
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입에 대하여 자바스크립트 Deepdive p272에 관한 내용정리이다. 이책을 시작한 이후 처음으로 내게 절망을 준 단원이고 그만큼 결국엔 보람을 준 단원이다. 이 단원에서 배운 가장 큰 사실은 JS에서 function foo( ) { } 라는 함수선언문이 문맥에 따라서는 함수객체도 될수 있고 함수 리터럴이 될 수도 있다는 점이다. let obj={};//obj는 리터럴 표기법에 의해 생성된 객체로 Object생성자를 사용하지 않았지만 조사하면 그 결과는 Object생성자를 //사용하여 생성한 객체인 결과가 나온다. console.log(obj.constructor===Object);//true console.log(obj.__proto__===Object.prototype);//true console.log(obj..
프로토타입에 대하여 출처: https://poiemaweb.com/js-prototype#42-%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98%EB%A1%9C-%EC%83%9D%EC%84%B1%EB%90%9C-%EA%B0%9D%EC%B2%B4%EC%9D%98-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EC%B2%B4%EC%9D%B8 위글을 다시 복습하면서 유추하면서 읽어야 하는 중요한 사실 정리: 1. 생성자 함수에서 프로토입에 접근할 때는 prototype를 쓰고 그 생성자가 만든 객체에서 프로토타입에 접근 할 때는 __proto__를 사용한다. 생성자 함수.__proto__는 Function.prototype 이다. 2.[[Prototype]]..
[JavaScript] 전개 연산자 ( Spread Operator ) 출처: https://blog.naver.com/zoz0312/221622159150 전개 연산자는 배열 또는 객체를 하나하나 넘기는 용도로 사용된다. 코드를 통하여 확인하자 const arr = [1,2,3]; let test_arr = [4,5,6]; let test_arr2 = [4,5,6]; test_arr.push(arr); console.log(test_arr); //[4, 5, 6, [1, 2, 3]] //ES6 test_arr2.push(...arr); console.log(test_arr2); //[4, 5, 6, 1, 2, 3] push를 이용할 때 전개 연산자를 사용하지 않은 코드는 array 전체가 들어가 2차원 배열이 되었지만, 전개 연산자를 사용하게 되면 array 내부의 요소 ..
호이스팅과 var과 let의 차이점 그리고 let, const의 블록레벨스코프 출처: https://www.youtube.com/watch?v=F_NgVhvD5Ts&list=PLkNVwwEe58DjbNUHlD_fUOxUWlWYss1DV&index=7 글 일부내용의 출처: https://poiemaweb.com/es6-block-scope 호이스팅이란? var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다. 호이스팅에 의해 스크립트가 로딩되는 시점에 변수의 선언과 초기화를 undefined로 같이 시켜버린다. 값의 할당은 해당 라인에 가서 할당값으로 할당됨.(변수 호이스팅..
템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 출처: https://curryyou.tistory.com/185 정리: 템플릿 리터럴=문자열표기법=문자열 생성시 따옴표 대신 백틱( ` )사용=템플릿 리터럴의 주요사용 문법은 벡틱과 달러연산인거 같다. 템플릿 리터럴의 기능. 1. 줄바꿈(개행) =백틱(`)을 사용하면 쉽게 줄바꿈됨. 2. 표현식 삽입 ${ } 사이에 변수나 연산 등을 삽입할 수 있게 되었다. (자바로 치면 %연산자 같은 거임ex%d, %s등등)