JS (7) 썸네일형 리스트형 종합 정리_조건부 연산자_spread_구조분해_에러_try catch 조건부 연산자 (Conditional operator) 삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자 입니다. if문과 같은 원리로 조건에 따라 값을 결정할 때 활용되는데요. const cutOff = 80; const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!'; console.log(passChecker(75)); 간단한 조건식의 경우에는 if문 보다 훨씬 더 간결하게 표현할 수 있는 장점이 있지만 내부에 변수나 함수를 선언한다거나 반복문 같은 표현식이 아닌 문장은 작성할 수 없다는 한계가 있기 때문에 if문을 완벽하게 대체할 수는 없다는 점. 꼭 기억.. finally문 finally문은 try catch문이 끝난 다음에 최종적으로 실행될 코드를 다룰 때 활용하는데요. finally문 try { // 실행할 코드 } catch (err) { // 에러가 발상했을 때 실행할 코드 } finally { // 항상 실행할 코드 } try문에서 에러가 발생하지 않는다면 try문의 코드가 모두 실행된 다음에, try문에서 에러가 발생한다면 catch문의 코드가 모두 실행된 다음 실행할 코드를 finally문에 작성하면 됩니다. 다시 말해 try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성하는 것이죠! function printMembers(...members) { for (const member of members) { console.log(mem.. 문장 vs 표현식 자바스크립트의 다양한 문법들을 이해할 때 알아두면 유용한 기초 개념을 한 번 짚고 넘어가고자 합니다. 바로, 문장과 표현식에 대한 개념인데요. 영어로는 각각 statements와 expressions라고 부릅니다. 문장 (statements) 우리가 작성하는 모든 자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있습니다. 먼저, 자바스크립트에서 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리를 가리킵니다. 예를 들어서 let x; x = 3; if (x < 5) { console.log('x는 5보다 작다'); } else { console.log('x는 5와 같거나 크다'); } for (let i = 0; i < 5; i++) { console.log(i); } 이 코드의 첫 번째 줄도.. 즉시 실행 함수(IIFE) function sayHi() { console.log('Hi!'); } sayHi(); 일반적으로는 이렇게 함수를 먼저 선언한 다음,선언된 함수 이름 뒤에 소괄호를 붙여서 함수를 실행하는데 그런데 때로는 함수가 선언된 순간에 바로 실행을 할 수도 있다. 즉시 실행 함수 (function () { console.log('Hi!'); })(); 보시는 것처럼 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식 이렇게 하면 함수가 선언된 순간 바로 실행이 된다. 한 마디로 정리하자면, ( // 일반적인 함수 작성 )(); 이렇게 함수 선언과 동시에 즉시 실행되는 함수를 가리켜 즉시 실행 함수 (표현)이라고 부른다. 영어로는 Immediately Invoked F.. null 병합 연산자 ?? ES2020에서 새롭게 초가된 null 병합 연산자에 대해 살펴보자. 영어로는 'Nullish coalescing operator' 라고 한다. null 병합 연산자 ?? 물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자 이다. const example1 = null ?? 'I'; const example2 = undefined ?? 'love'; const example3 = 'Codeit' ?? 'JavaScript'; console.log(example1, example2, example3); // ? example1과 2를 보시면, 지금 null 병합 연산자 왼편에 각각 null과 undefined가 있다. 이렇게 연산자 왼편의 값이 null 이나 undefin.. JavaScript vs ECMAScript 1. 공식 문서 ECMAScript의 공식 문서가 궁금하다면 아래 링크를 참고해 보세요. ECMA-International 공식 ECMA-262문서 2. 진행 현황 지금까지 제정된 ECMAScript 표준 사항이나 과거 역사가 궁금하다면 아래 링크들을 참고해 보세요. 위키백과 - ECMA스크립트 MDN 문서 3. 브라우저 지원 현황 각각의 문법별로 브라우저의 지원 여부를 확인하고 싶다면 아래 링크들을 참고해 보세요. 한눈에 확인하는 호환성 테이블 문법 검색으로 확인하는 호환성 테이블 4. 버전의 정식 표기 ES6부터는 연호를 사용해서 ES2015, ES2016이라고도 부른다. 개발자들 사이에서는 짧고 빠르게 소통하기 위해서 ES6, ES7이라는 용어를 사용하지만, 실제로 ECMA International.. 마우스 이벤트_이벤트 객체의 프로퍼티 (clientXY, pageXY, offsetXY) 마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티인 clientXY, pageXY, offsetXY에 대해 알아보자. 1. clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있다. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻한다. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치 clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치 client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다. 2. offsetX, offsetY offset 프.. 이전 1 다음
