본문 바로가기

모던 자바스크립트 튜토리얼6

[SOPT]JS 스터디 6주차 에러 핸들링, 프로미스, async await try catch try catch 는 동기적으로 동작한다. 따라서 setTimeout 과 같은 비동기 함수에서 발생한 예외는 try catch 가 잡을 수 없다. setTimeout 은 엔진이 try catch 를 지나간 다음에 실행되기 때문이다. 따라서 만약 이와 같은 비동기 함수의 예외를 잡고 싶다면, try catch 를 함수 내부에 구현해야 한다. try { setTimeout(function() { noSuchVariable; // 스크립트는 여기서 죽습니다. }, 1000); } catch (e) { alert( "작동 멈춤" ); } -> 에러를 잡지 못한다. setTimeout(function() { try { noSuchVariable; // 이제 try..catch에서 에러를 핸들링 .. 2023. 5. 27.
SOPT 자스 스터디 5주차 프로토타입, 콜백, 프로미스 프로토타입 상속 객체를 확장하고 싶을 때 사용한다. __proto__ 를 사용해 객체를 재사용할 수 있다. let animal = { eats: true, walk() { console.log('토끼는 걷는다'); } }; let rabbit = { jumps: true, __proto__: animal, }; // 프로퍼티 eats과 jumps를 rabbit에서도 사용할 수 있게 되었습니다. alert( rabbit.eats ); // true (**) 이때 __proto__ 의 값은 객체나 null 만 가능하다. 프로토타입은 읽기 전용이기 때문에, 프로퍼티를 추가하거나 수정하기 위해선 객체에 직접해야 한다. 예를 들어서 rabbit 에 walk 가 들어있다고 생각해 보자. 만약 이 walk 를 수정하.. 2023. 5. 21.
SOPT 자스 스터디 4주차 나머지 매개변수 ... 과 스프레드 문법으로서의 ... 나머지 매개변수로 ... 을 사용할 경우, 나머지 매개변수는 모두 ...을 붙인 배열에 집어넣으라는 뜻이 된다. 이때 나머지 매개변수 ... 은 맨 마지막 매개변수로 온다는 것에 주의하자! function showName(firstName, lastName, ...titles) { alert( firstName + ' ' + lastName ); // Bora Lee // 나머지 인수들은 배열 titles의 요소가 됩니다. // titles = ["Software Engineer", "Researcher"] alert( titles[0] ); // Software Engineer alert( titles[1] ); // Researcher alert.. 2023. 5. 14.
[SOPT] JS 스터디 3주차 배열 객체 vs 배열 배열은 객체의 특수한 종류(배열의 키 == 인덱스)이다. 객체는 태생이 순서를 고려하지 않고 만들어졌기 때문에, 순서 메서드가 없다. 따라서 여러 가지 자료형을 한 데 모은 자료구조가 필요한데다가 순서 메서드가 필요한 일이 많다면 배열을 사용하는 편이 좋다. ex) 객체는 새 프로퍼티를 기존 프로퍼티 사이에 끼워 넣는 것 불가 더 공유하고 싶은 내용1_객체에서도 length 메서드가 있을까? 더보기 결론: 없지만, Object.keys()를 통해 키 값을 요소로 하는 배열을 만들 수 있고, 그 배열에 length 를 적용하면 된다. const obj = { a: 1, b: 2, c: 3 }; console.log(Object.keys(obj).length); // 3 배열과 push.. 2023. 5. 6.
[SOPT] JS 스터디 2주차 객체 객체에 대한 개략적인 설명 자바스크립트 -> 총 8개의 자료형. 7개 = 하나의 데이터만 담을 수 있어, 원시형 객체 = 다양한 데이터를 담을 수 o (따라서, 객체는 원시형이 아니다!) 키(key, 문자형만(혹은 심볼형. 만약 문자형도 아니고 심볼형도 아닌 값이 오면 문자형으로 자동 형변환된다.))와 값(value, 모든 값)의 쌍 = 프로퍼티(property) 키를 이용해 프로퍼티를 찾고, 수정, 삭제 빈 객체를 만드는 두 가지 방법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 (주로 사용하는 방법 -> 왜?) 간편성, 가독성, 속도 더보기 가독성 function Person(name, age) { this.name.. 2023. 4. 22.
[SOPT] JS 스터디 1주차 알아두면 유용할 것 같은 지식들 위주로 정리를 해보려고 한다. 1. if 문의 소괄호() 에는 어떤 타입이든 올 수 있고, 이를 불린형으로 변환한 뒤 true 면 조건문을 실행하고 false 면 조건문을 실행하지 않는다. 이때 if 문이 false 라고 처리하게 되는 값을 falsy값이라고 하고, 이런 값에는 숫자 0, 빈 문자열 "", null, undefined, NaN 가 있다. 주의할 점은 이 외의 다른 값들은 모두!! true 로 변환된다는 것이다. 이렇게 if 문의 소괄호 대목은 자동적으로 불린형으로 형변환이 된다는 점을 잘 기억하면, 불필요한 === 연산을 줄일 수 있을 것 같다. 2. 앱잼 단골 손님, 삼항 연산자. jsx 에서 if 문을 쓸 수 없기 때문에, 대체제로 많이 사용했다. 그러.. 2023. 4. 9.