본문 바로가기

자바스크립트41

함수의 매개변수(parameter) 종류 ■ 디폴트 매개변수 (default parameter)- 디폴트 매개변수란 매개변수에 const, let, var 로 값을 할당하듯이 기본이될 값을 할당하는 것 이다. const log = console.log;function test(x, y = "값없음"){ console.log(x, y);}test(7); // 7 "값없음" 출력test(7, 7); // 7 7 출력  ■ 나머지 매개변수 (rest parameter) - 매개변수 자리에 "..." 와 매개변수명을 선언한다. 이 매개변수는 함수를 호출했을때 넣은 인자를 모두 배열 안에 담아 가져올 수 있다. function test(x,y,...z){ console.log(x); // 3출력 console.log(y); // .. 2022. 7. 14.
Optional Chaining 연산자와 Nullish coalescing 연산자. 그리고 우선순위 [1] Optional Chaining 연산자 → "?."optional chaining 연산자는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. const obj = { a: { b: { c: { age: 12 } } }}console.log(obj.a.b.c.age); // 12 이렇게 nesting 이 된 객체에서 만약 age 의 값을 읽으려고 했을때 c 프로퍼티 바로 위 단계인 b 가 없는데 위와 같이 읽으려고 한다면? "Cannot read properties of undefined" 에러가 출력된다. 여기서 optional chaining 연산자의 진가.. 2022. 6. 27.
함수의 활용 [1] Default Parameter - 사용할 변수를 미리 선언 ex#1: let variable = ""; function myFunc(){ variable = "test"; console.log(variable); } myFunc() // test ex#2: function myFunc(variable = "test"){ console.log(variable); } myFunc() // test [2] Rest Parameters - 인수로 받은 ...Rest Parameters는 배열객체로써 함수 안에서 사용되어진다. ex#1: function printAll(...args){ for(let i = 0; i < args.length; i++){ console.log(args[i]); } for(.. 2022. 5. 11.
event handling, 이벤트 처리 2022. 4. 2.
마우스 포인터 좌표, 마우스 위치 값 확인 1. MouseEvent.clientX, clientY 화면에 표시되는 창 기준 마우스 포인터 위치. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있다. clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있다. client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.2. MouseEvent.offsetX, offsetY 이벤트가 발생한 요소 기준 마우스 포인터 위치, 이벤트가 발생한 target(DOM Element)이 기준이 된다. offsetX .. 2022. 4. 2.
콤마찍기 function set_comma(n) { var reg = /(^[+-]?\d+)(\d{3})/; n += ''; while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); return n; } 2021. 5. 10.