js 13

클로저(Closure)

- 주변 상태에 대한 참조와 함께 묶인 함수의 조합, 내부 함수에서 외부 함수의 범위에 대한 접근 제공js에서 클로저는 함수가 생성될 때마다 생성됨 - 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있음어휘적 범위 지정 (Lexical scopeing)function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수 function displayName() { // displayName() 은 내부 함수이며, 클로저 console.log(name); // 부모 함수에서 선언된 변수를 사용 } displayName();}init();ex2function outerFunction() { l..

프로토타입과 클래스

객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있음 객체 생성자를 사용 할 때에는 보통 함수의 이름을 대문자로 시작, 새로운 객체를 생성 할 때에는 new 를 붙여준다 function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); } } const dog = new Animal('개', '댕댕이', '멍멍'); const cat = new Animal('고양이', '냥냥이', '야옹'); dog.say(); cat.say(); // result : 멍멍 // re..

배열 내장함수

indexOf => 원하는 항목이 몇 번째 원소인지 찾아주는 함수 // indexOf const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // result : 2 findIndex 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf 배열 안의 값이 객체, 배열이면 ? findIndex const memu = [ { id: 1, text: '모듬회', done: true }, { id: 2, text: '삼겹살', done: true }, { id: 3, text: '탕수육', done: tr..

reduce

reduce reduce 는 잘 사용하면 정말 유용한 내장 함수임 배열의 총합을 구한다고 해보자 변수 sumEx 는 그냥 대충지은거임 현재 열어놓은 크롬창에 sum이 선언되어있어서..ㅇㅇㅋ const numbers = [1, 2, 3, 4, 5]; let sumEx = 0; numbers.forEach(n => { sumEx += n; }); console.log(sumEx); 결과는 15 여기서 sumEx 를 계산하려고 선언을 하고, forEach 를 사용해서 계속해서 덧셈 해줬음 근데 reduce 를 사용하면 아래와 같다. const numbers = [1, 2, 3, 4, 5]; let sumEx = numbers.reduce((acc, current) => acc + current, 0); con..

spread 와 rest

spread spread 의 의미 : 펼치다, 퍼뜨리다. 예를 들어 이런 객체들이 있고 새 객체를 만들 때 마다 앞의 객체의 속성을 그대로 가지고 만들어 줬다. 그러면서 속성은 하나씩 추가가 되었는데 이런 식으로 기존의 것을 건들이지 않고 새로운 객체를 만드는 함수가 spread 놀랍다 매우... 그리고 spread 연산자는 배열에도 사용 할 수 있따. 또한 배열에서 spread 함수를 여러번 사용도 가능! ㅗㅜㅑ... rest 객체에서의 rest rest 안에 head 값을 제외한 값이 들어있다. rest 는 객체와 배열에서 사용 할 때는 이런식의 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때에는 rest 라는 키워드를 사용, 그치만 추출 값한 값의 이름이 꼭 rest 일 필욘없다. 이어서 bo..

localStorage / sessionStorage

localStorage = 창을 닫아도 계속 유지 탭 여러개 공유 명시적으로 삭제 될 때 까지 유지 sessionStorage = 창을 닫으면 삭제 세션 기간 동안 사용가능 사용법은 동일하다. 가끔 js 에서 js 로값을 보내려고 할때 사용해보자 상황 ) 어떤 input 에서 이메일을 가져와서 다른 곳에 넣으려 할 때 전송 $("#getEmail").on('click', function () { var getEmail1 = $("#managementId").val(); console.log("getEmail1 : " + getEmail1); var getEmail2 = { "email" : getEmail1 } //스토리지에 저장 key, value localStorage.setItem("getEmail..

js 파일을 수정해도 적용이 안될 때

진짜 js 파일을 몇번을 수정해도 적용이 안되길래 나는 항상 강력새로고침을 하는 편이라 그거도 안먹히기에.. 마음속으로 모니터 진심펀치 30번 날리고 내가 지금 파일을 잘못찾아서 하고 있나? 이쯤 되면 내가 잘못한건가?하며 내 자신의 사고방식을 바꾸려 나와의 싸움을 할 때 알게 되었다. 그 방법을... ?v= 자바 내부함수를 이용해서 js 파일을 저장 후 출력하는 방식이 아닌 그냥 새로이 호출해서 보여주는거라 바로 반영이 된다. 시간함수를 넣은 이유는 시간은 계속 흐르기 때문에 굳이 내가 숫자를 넣지 않아줘도 시간은 자동으로 바뀌기 때문. 위의 저걸 이런식으로 넣어주고 실행해보자 하핳ㅎ핳ㅎ하하핳ㅎㅎ 당신은 성공을 했다. 그리고 난.. 틀리지 않았다...

Element.closest()

closest() 는 특정한 문자열과 일치하는 노드에서 가장 가까운 자신 또는 조상엘리먼트를 반환한다. 값이 없다면 null 을 반환한다. 문법 var closestElement = targetElement.closest(selectors); selectors 에는 id, class, div 등을 넣으면 된다. 예시 여기는 div-01 여기는 div-02 여기는 div-03 var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // id=div-02로 요소를 반환. var r2 = el.closest("div div"); // div에 있는 div인 가장 가까운 상위 항목을 반환. div-03 자체 var r3 = el.c..

Java Script 객체

l 객체 - 세상에 존재하는 모든 것 연관배열 말고 JSON 이다!! l 자바스크립트 객체 - 사용자 정의 객체: 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체(예: Car( ), House( ), Hotel( )) - 내장 객체: 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체(예: Object( ), Array( ), Date( )) l 내장 객체의 종류 - 브라우저 객체 모델(BOM, Browser Object Model): 웹 브라우저의 각종 요소를 객체로 표현 - 문서 객체 모델(DOM, Document Object Model): 웹 문서의 각종 요소를 객체로 표현 - - 전역 자바스크립트 객체(Global JavaScript Objects): 자바스크립트 프로그램..