바텐더에서 개발자로 바텐더에서 개발자로

I. 렉시컬(정적) 스코프 (lexical(static) scope) ① 변수나 상수가 코드상 어디에서 지정되었는가에 따라 그 사용 범위를 결정 ② 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정 ③ 호출한 곳을 기준으로 하는 동적 스코프와 상반되는 개념 const x = 1; const y = 1; const z = 1; function func1 () { const y = 2; const z = 2; console.log('2.', x, y, z);// 2. 1 2 2 func2(); } function func2 () { const z = 3; console.log('3.', x, y, z);/ 3. 1 1 3 } console.log('1.', x, y, z)// 1. 1 1 1..

I. 유효하지 않을 수 있는 참조에 의한 문제들 네트워크 요청 등, 어떤 값이 들어올 지 모르는 상황에서,,,, 에러가 발생하는 상황들 // 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(); II. ?. - 옵셔널 체이닝 (optional chaining) 연산자 - 호출 대상이 undefined 나 null 이어도 오류를 발생시키지 않고 ..

I. 엄격 모드 (strict mode) 란? 기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킴 II. 엄격 모드의 적용방법과 그 효과들 예시 1. 선언되지 않은 변수 사용시 오류 발생 // 선언되지 않은 변수 사용 금지 declared = 1; // 💡 암묵적으로 전역 var 변수로 선언 'use strict'; // 쌍따옴표도 가능 notDeclared = 1; // 오류 발생! - 위와 같이 자바스크립트 문서 최상단에 작성 (문서 전체에 적용) - 아래와 같이, 문서, script 태그별로만 적용 - 여러 .js 파일이 페이지에 사용될 시 각각 작성해야 함 // 1.js 'use strict'; x = 1; console.log(x); // 오류 발생 // 2.js ..

I. var 란? let과 const가 생기기 전 변수 선언에 사용되던 문 - 각종 문제점들을 갖고 있으므로 오늘날에는 사용하지 않을 것을 권장 그렇다면 왜 사용하지 않는 것이 좋은지에 대해 알아보자. 1. 선언 없이도 사용 가능 notDeclared = 1; // 미리 선언한 부분이 없을 시 var로 만들어짐 console.log(notDeclared);// 1 // 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. 블..

I. 에러 핸들링 (error handling) 의 필요성 에러/에러 error 발생에 대비하지 않으면 프로그램이 종료됨 console.log('에러 발생 전');// 여기까지만 실행됨 // ⚠️ 오류를 발생시키는 코드 (3).split(''); // 출력되지 않음 console.log('에러 발생 후'); II. 자바스크립트의 에러 핸들링 1. try ... catch 문 console.log('에러 발생 전'); try { (3).split(''); } catch (e) { console.error('🛑 에러!!', e); } console.log('에러 발생 후'); ✨try 블록 - 에러 발생 여지가 있는 코드 포함 - 이곳에서 발생한 에러는 프로그램을 멈추지 않음 ✨catch 블록 - 에러 발생..

I. 제너레이터 (generator) function* genFunction () { console.log('하나를 반환합니다.'); yield '하나'; console.log('둘을 반환합니다.'); yield '둘'; console.log('셋을 반환합니다.'); yield '셋'; } const genFunc = genFunction(); // 반복 수행해 볼 것 // 💡 아래의 코드가 블록의 코드에 대한 제어권을 가짐 console.log( genFunc.next() ); - 함수 내 코드들을 모두 실행하지 않고 외부 호출자에게 제어권을 양도 ("계속할까요?") - 이터러블과 이터레이터를 보다 간결하게 구현 가능 - 전부 수행하고 나서, done 프로퍼티 값이 true로 바뀌는 것을 볼 수 있음 ..

I. 이터러블 프로토콜 (iterable protocol) - 반복, 순회 기능을 사용하는 주체간의 통일된 규격 - 공통 기능들 : for ... of, 스프레드 문법, 배열 디스트럭쳐링 1. 이터러블 (iterable) - 이터러블 프로토콜을 준수하는 객체 - 배열, 문자열, Set, Map, arguments 등... - 키 Symbol.iterator 의 값으로 이터레이터를 반환하는 메서드를 가짐 console.log( [][Symbol.iterator], ''[Symbol.iterator], new Set()[Symbol.iterator], new Map()[Symbol.iterator] ); // ƒ values() { [native code] } ƒ [Symbol.iterator]() { [n..

I. Map 이란? 키와 값의 쌍으로 이루어진 컬렉션 - 표준 내장 객체 중 하나 ✨객체와의 차이: - 이터러블의 일종(이터러블의 기능 사용 가능) - 메서드와 프로퍼티 등의 기능 차이 - 객체나 배열 등의 참조값을 키로 사용 가능 - 키와 값을 보다 자주 변경하는 경우 적합하도록 설계됨 1. 기본 사용법 // Map 생성 const map1 = new Map(); // set 메서드 - 키와 값의 쌍 추가 map1.set('x', 1); map1.set(123, 'ABC'); map1.set(true, { a: 1, b: 2 }); console.log(map1);// Map(3) {'x' => 1, 123 => 'ABC', true => {…}} - 키의 중복 불허 (해당 키 있을 시 덮어씀) // ..