JavaScript (83) 썸네일형 리스트형 [JavaScript] 에러와 에러 객체 다음과 같은 코드가 있다. 이를 실행하면 console.log('시작'); const name = '신짱구'; console.log(name); console.log(age); console.log('끝'); 정의 되지 않은 age 변수에 의해 에러가 발생하고, '끝' 이라는 문자열은 출력되지 않는다. 자바스크립트로 안정적인 프로그램을 만들기 위해서는, 이러한에러를 다루는 방법이 중요하다. 자바스크립트는 코드를 실행할 때, 에러가 발생하면 그 에러에 대한 정보를 담은 에러 객체를 생성함. console 에서보는 에러메세지도 에러 객체를 담고 있음. 에러객체는 에러의 이름을 담은 name 프로퍼티와, 내용을 담은 message 프로퍼티를 가지고 있다. 에러는 크게 세 타입으로 분류될 수 있는데, 1. 존재.. [JavaScript] null 병합 연산자 [null 병합 연산자] 물음표 두개(??) 를 사용하여 null 혹은 undefined 값을 가려내는 연산자로, 연산자 왼편의 값이 null 이나 undefined 면, 연산자 오른쪽 값이 리턴되고, 연산자 왼편의 값이 null 이나 undefined 가 아니라면 왼편의 값이 리턴. const example1 = null ?? 'I'; // I const example2 = undefined ?? 'love'; // love const example3 = 'Codeit' ?? 'JavaScript'; // Codeit console.log(example1, example2, example3); // I love Codeit 이는 or 연산자와 비슷해보이지만, const title1 = false || .. [JavaScript] 옵셔널 체이닝 (Optional Chaining) 객체를 활용하여 데이터를 표현하다보면, 이런식으로 중첩된 객체를 작성하는 일이 빈번하다. function printCatName(user) { console.log(user.cat.name); } const user1 = { name: 'Captain', cat: { name: 'Crew', breed: 'British Shorthair', } } printCatName(user1); // Crew 중첩된 개체를 작성할 때, 주의할 부분이 있음. onst user2 = { name: 'Young', } console.log(user2.cat); // undefined printCatName(user2); // TypeError: Cannot read property 'name' of undefined 데.. [JavaScript] 조건 연산자/ 삼항 연산자 [삼항연산자] 조건 ? truthy 할때 표현식 : falsy 할 때 표현식 조건연산자 라고도 하며 다음과 같이 나타낼 수 있다. const CUT_OFF = 60; function passChecker(score) { return score > CUT_OFF ? '합격!' : '불합격!' } console.log(passChecker(50)); // 불합격! console.log(passChecker(70)); // 합격! 조건이 여러개일 경우 다음과 같이 작성하면 됨. // 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식 const CUT_OFF = 60; function passChecker(score) { return score > CUT_OFF ? '합격!' : score == .. [JavaScript] this 객체 브라우저에 다음과 같이 입력하면, console.log(this); 전역객체인 Window 객체가 this 의 기본값이 된다. const user = { firstName: 'Tess', lastName: 'Jang', getFullName: function() { return `${user.firstName} ${user.lastName}` }, }; console.log(user.getFullName()); // Tess Jang 위 메소드를 다른 객체에도 적용하고 싶어서 function getFullName() { return `${user.firstName} ${user.lastName}` } const user = { firstName: 'Tess', lastName: 'Jang', getFul.. [JavaScript] 변수와 스코프 변수선언 var console.log(title); // undefined var title; 변수를 만들기도 전에 title 을 실행했는데도, 에러가 발생하는 것이 아닌 undefined 값이 출력됨. 선언이 나중에 되었으나, 선언부분이 올라가 있는 것 같은 현상을 호이스팅(Hoisting) 이라고 한다. console.log(title); // undefined var title = 'codeit'; console.log(title); // 'codeit' 선언 부분만 올라가기 때문에 해당 되는 값 자체는 그 이후에 접근이 가능하다. let console.log(title); // ReferenceError let title; let 은 변수선언 이전에 접근할 수 없어서 에러가 난다. 중복선언 var.. [JavaScript] 데이터타입 Symbol 과 bigInt Symbol 심볼(Symbol) 은 기본형 데이터 타입 중 하나로, 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용된다. const user = Symbol(); const user = Symbol('this is a user'); user === 'this is user'; // false user === 'user'; // false user === 'Symbol'; // false user === true; // false user === false; // false user === 123; // false user === 0; // false user === null; // false user === undefined; // false ... Symbol 값을 담게 된 user 이름의 변.. [JavaScript] mouseenter / mouseleave mouseenter : 마우스포인터가 요소 바깥쪽에서 안쪽으로 이동할 때 발생 mouseleave : 마우스포인터가 요소 안쪽에서 바깥쪽으로 이동할 때 발생 mouseenter 와 mouseleave 는 각각 mouseover, mouseout 과 비슷하지만 다른 점이 있다. 1. 버블링이 일어나지 않는다. 자식요소에서는 mouseenter 와 mouseleave 이벤트가 발생하지 않음. 2. 자식요소의 영역을 계산하지 않는다. mouseenter 와 mouseleave는 자식요소의 영역을 계산하지 않는다. 자식요소가 이벤트의 영향을 끼치는지가 가장 큰 차이점이라고 생각할 수 있음. 이전 1 2 3 4 5 ··· 11 다음
