웹/JavaScript
-
[Javascript] 스코프와 바인딩, 렉시컬, 클로저웹/JavaScript 2023. 1. 14. 09:14
I. 렉시컬(정적) 스코프 lexical(static) scope 변수나 상수가 코드상 어디에서 지정되었는가에 따라 그 사용 범위를 결정 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정 호출한 곳을 기준으로 하는 동적 스포크 dynamic scope 와 상반되는 개념 👉 MDN 문서 보기 const x = 1; const y = 1; const z = 1; function func1 () { const y = 2; const z = 2; console.log('2', x, y, z); func2(); } function func2 () { const z = 3; console.log('3', x, y, z); } console.log('1', x, y, z) fun..
-
[Javascript] 옵셔널 체이닝, prop, ?., 옵셔널 체이닝 연산자웹/JavaScript 2023. 1. 13. 19:40
유효하지 않을 수 있는 참조에 의한 문제들 🌐 네트워크 요청 등, 어떤 값이 들어올지 모르는 상황에서 ⚠️ 에러가 발생하는 상황들 // undefined로부터 값에 접근할 때 let undefObj; console.log(undefObj.x); // null부터 값에 접근할 때 let nullObj = null; console.log(nullObj.x); // 무효한 배열에 접근할 때 let undefArry; console.log(undefArry[1]); // 존재하지 않는 함수를 호출할 때 let noFunc = {} noFunc.func(); 다음과 같은 상황에서 에러를 피하려면? 결과에 prop3이 있다면 가져와야 하는 상황 // 최소 undefined // 최대 {prop1:{prop2:{pr..
-
[Javascript] 엄격모드, strict mode, use strict웹/JavaScript 2023. 1. 13. 19:33
엄격 모드 strict mode 기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킴 "지금부터 대충 넘어가지 않겠다." 🪖 엄격 모드의 적용방법과 그 효과들 예시 1. 선언되지 않은 변수 사용시 오류 발생 + 범위별 적용 방법 notDeclared = 1; // 💡 암묵적으로 전역 var 변수로 선언 // ⚠️ 새로고침 후 실행해볼 것 // 선언되지 않은 변수 사용 금지 'use strict'; // 쌍따옴표도 가능 notDeclared = 1; // 오류 발생! 위와 같이 자바스크립트 문서 최상단에 작성 - 문서 전체에 적용 문서, script 태그별로만 적용 - 여러 .js파일이 페이지에 사용될 시 각각 작성해야 함 // 1.js 'use strict'; x = 1;..
-
[Javascript] var웹/JavaScript 2023. 1. 13. 19:26
var : let과 const가 생기기 전 변수 선언에 사용되던 문 각종 문제점들을 갖고 있으므로 오늘날에는 사용하지 않을 것을 권장 1. 선언 없이도 사용 가능 notDeclared = 1; // 미리 선언한 부분이 없을 시 var로 만들어짐 console.log(notDeclared); // num이 var로 선언된 것 for (num of [1, 2, 3]) { console.log(num); } 2. 재선언 가능 코딩 중 실수의 여지가 됨 let a = 1; let a = 2; // ⚠️ 오류 const b = 1; const b = 2; // ⚠️ 오류 var c = 1; var c = 2; 3. 블록 레벨 스코프 무시 let num1 = 1; { let num1 = 2; { let num1 =..
-
[Javascript] 에러 핸들링, try, catch, finally, error, error bubbling웹/JavaScript 2023. 1. 13. 19:16
🐛 에러 핸들링 error handling 의 필요성 에러/에러 error 발생에 대비하지 않으면 프로그램이 종료됨 console.log('에러 발생 전'); // ⚠️ 오류를 발생시키는 코드 (3).split(''); // 출력되지 않음 console.log('에러 발생 후'); I. 자바스크립트의 에러 핸들링 👉 MDN 문서 보기 1. try ... catch 문 console.log('에러 발생 전'); try { (3).split(''); } catch (e) { console.error('🛑 에러!!', e); } console.log('에러 발생 후'); try 블록 에러 발생 여지가 있는 코드 포함 이곳에서 발생한 에러는 프로그램을 멈추지 않음 catch 블록 에러 발생시 ..
-
[Javascript] 제너레이터, generator웹/JavaScript 2023. 1. 13. 18:55
제너레이터 generator function* genFunction () { console.log('하나를 반환합니다.'); yield '하나'; console.log('둘을 반환합니다.'); yield '둘'; console.log('셋을 반환합니다.'); yield '셋'; } const genFunc = genFunction(); // 반복 수행해 볼 것 // 💡 아래의 코드가 블록의 코드에 대한 제어권을 가짐 console.log( genFunc.next() ); 함수 내 코드들을 모두 실행하지 않고 외부 호출자에게 제어권을 양도 - "계속할까요?" 이터러블과 이터레이터를 보다 간결하게 구현 가능 👉 MDN 문서 보기 I. 기본 사용법 1. 제너레이터 함수/메서드 선언 function ..
-
[Javascript] Set, Map웹/JavaScript 2023. 1. 13. 18:24
중복되지 않는 값들의 집합 표준 내장 객체 중 하나 💡 배열과의 차이: 동일한 값을 여러 번 포함할 수 없음 값들의 순서가 무의미함 I. 기본 사용법 // Set 생성 const set1 = new Set(); // add 메서드 - 요소 추가 set1.add(1); set1.add('A'); set1.add(true); console.log(set1); // 이미 포함된 요소는 추가하지 않음 set1.add(1); set1.add(true); console.log(set1); // 배열을 인자 넣으면 생성 + 초기화 // 중복된 요소 제거 const set2 = new Set([1, 1, 1, 'A', true]); console.log(set2); // has 메서드 - 요소 포함여부 ..
-
[Javascript] Symbol웹/JavaScript 2023. 1. 13. 17:46
다른 값과 절대 중복되지 않는 유일무이한 값 원시 타입 👉 MDN 문서 보기 👉 MDN 문서 보기 (영문 - 더 자세한 정보) I. 기본 생성과 활용 const mySymbol = Symbol(); console.log(typeof mySymbol, mySymbol); // 💡 new를 사용하지 않음 const mySmbol = new Symbol(); // ⚠️ 오류 발생! 문자열 값을 인자로 줄 수 있음 해당 심벌에 대한 설명일 뿐, 각 심벌의 값은 유일무이 const symbol1 = Symbol('hello'); const symbol2 = Symbol('hello'); console.log(symbol1, symbol2); // 래퍼 객체(Symbol)의 인스턴스 프로퍼티 console...