Dev./JavaScript26 [레츠기릿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. [인간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. [인간JS되기] 스코프 체인 제로초님 강의 보고 정리 중 [인간 JS 엔진 되기 1-4] 스코프 체인 정의: 식별자의 유효 범위 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것 스코프 체인을 간단히 설명하면 '함수에서 어떤 값에 접근이 가능한가 불가능한가' ES2015 기준으로 그 이전까지는 함수가 기준이었지만, 그 후로는 { } 블록이 기준이 되었다 함수가 아닌 블록들 if() {} for() {} while() {} 등등.... 그 외에도 { } 그냥 이렇게만 있는 블록도 있는데 객체가 아니므로 주의! => 이걸 객체로 만들고 싶으면 ({ }) 이렇게 소괄호로 감싸서 사용 //객체를 리턴하는 함수가 아니라, 블럭이다 c.. 2023. 3. 6. [인간JS되기] 자바스크립트 호출 스택 제로초님 강의 보고 정리한 것 [인간 JS 엔진 되기] const x = 'x'; function c(){ const y = 'y'; console.log('c'); } function a(){ const x = 'x'; console.log('a'); function b(){ const z = 'z'; console.log('b'); c(); } b(); } a(); c(); 함수가 여러개 얽혀있는 코드가 있다 실행을 돌려보지 않아도 결과가 어떻게 나오는지, 어떤 함수에서 어떤 변수에 접근이 가능한지 코드를 보고 미리 예측을 할 수 있어야 한다 결과는 a(); // a, b, c c(); // c 자바스크립트 코드, 프로그래밍 코드들을 볼 때 주의할 점이 있다 일반적으로 코드는 위에서 아래, 왼쪽에서 .. 2023. 3. 3. [인간JS되기] 함수와 함수의 호출, 고차함수 제로초님 유튜브 보고 공부 함수와 함수의 호출 const add = (a,b) => a+b; //함수의 기본 형태(여기선 화살표함수로 표현) function calculator(func, a, b){ return func(a,b); } 함수 두 개를 만들어 준다 함수 add 함수 calculator const add = (a,b) => a+b; /* //위의 코드는 리턴이 생략되어 있다 풀어 쓰면 아래 코드 const add = (a,b) => { retun a+b; }; */ /* 객체 리턴 할 때 const add = (a,b) => ({a+b}); //이렇게 해야 함 const add = (a,b) => {a+b}; // 소괄호로 감싸주지 않으면 다른 결과가 나옴 */ 이 때 add함수에는 retu.. 2023. 2. 26. JavaScript :: 예외처리 try-catch 미리 에러가 나올만한 상황을 대비해서 에러핸들링을 적절하게 해주는 것이 좋은 코드 1. try 블럭 안에 있는 코드를 실행하다가 에러가 나면 2. catch 블럭 안에 들어가서 에러를 실행 3. 에러가 없다면 catch 블럭을 무시하고 넘어간다 4. try / catch는 오직 런타임 에러에만 동작한다. 즉, 실행 가능한 코드에만 try/catch가 사용될 수 있다 5. 만약에 {} 중괄호 짝이 안맞다던지, 등등의 문법적인 에러로 돌아가지 않는 코드라면 try/catch가 동작할 수 없다 try{ 에러가 발생될 수 있는 코드 입력 }catch(error){ 에러 핸들링 } try 에서 에러가 생기면 catch 블럭에 error정보를 error객체 안에 넣어서 매개변수로 전달해준다 Error객체를 살펴보면.. 2022. 8. 1. 동기와 비동기에 대한 간단한 이해 1. 자바스크립트의 구성 요소 stack자바스크립트 코드가 실행되면 실행될 명령들(스택 프레임)이 쌓이는 장소 스택에 새로운 프레임들이 들어오고 실행이 완료되면 나간다 드럼통처럼 생겨서 First In Last Out 구조의 자료형이다(먼저 들어온게 나중에 나간다) 예제) 다음의 코드가 stack에 어떻게 들어가는지 살펴보자 function add(x,y){ return x + y } function first(){ let i = add(1,1) console.log(i) } first() Heap동적으로 생성된 변수들은 메모리 heap에 가서 저장이 된다 테스크 큐(Queue) 웹 API로 부터 받은 테스크를 큐에 저장해 둔다 스택이 비워지면 이벤트 루프가 큐에 아이템을 꺼내다가 스택으로 올려준다 Fi.. 2022. 7. 29. Javascript :: ES6 문법 예시 문제 화살표함수 function pooh() { console.log('곰돌이 푸우'); } pooh(); let pooh2 = () => { console.log('곰돌이 푸우2'); }; pooh2(); 곰돌이 푸우 곰돌이 푸우2 function pooh() { return '푸우는 꿀을 좋아해'; } console.log(pooh()); let pooh2 = () => '푸우는 꿀을 좋아해!!'; console.log(pooh2()); 푸우는 꿀을 좋아해 푸우는 꿀을 좋아해!! this. let age = 30; let person = { name: '홍길동', age: 20, getInfo: function () { console.log(age); }, }; person.getInfo(); 30 let.. 2022. 7. 20. 이전 1 2 3 다음
'Dev./JavaScript' 카테고리의 글 목록 (2 Page)
