본문 바로가기

JavaScript/Modern JavaScript

 (33)
[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] 배열 메소드 forEach 와 map forEach 메소드 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드로 forEach 함수는 첫번째 아규먼트로 콜백함수를 전달 받는데, 콜백함수의 파라미터에는 각각 배열의 요소, Index, 메소드를 호출한 배열이 전달된다. 그동안 반복적인 작업을 할 때, for of 문을 사용했었으나 const members = ['철수', '유리', '훈이', '짱구', '맹구']; for (let member of members) { console.log(`${member}님이 입장하셨습니다.`); } const members = ['철수', '유리', '훈이', '짱구', '맹구']; members.forEach(function (member) { console.log(`${member}님이 입장하셨습니..

티스토리툴바