본문 바로가기

JAVASCRIPT

 (18)
모듈 모듈 자바스크립트 코드를 여러 파일과 폴더에 나누어 작성하고 효율적으로 불러올 수 있도록 해주며, script 태그에 type="module" 어트리뷰트를 추가해주면, 이 파일은 모듈로서 동작합니다. 파일 확장자로는 대개 mjs가 사용 Webpack, Parcel 등의 모듈 번들러를 통해 변환과정을 거친 뒤, 브라우저에는 일반적인 JavaScript 파일로서 불러오는 방법이 널리 사용되고 있는 추세 import 혹은 export 구문을 사용할 수 있음 엄격 모드(strict mode)로 동작 모듈이 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됨 같은 모듈을 여러 다른 모듈에 불러와도, 모듈 내부의 코드는 한번만 실행 모듈 스코프 모듈이 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됨. 모듈 ..
예외 처리 예외 처리 코드의 실행 흐름을 복구 할 수 있는 기능 동기식 코드에서의 예외 처리 try...catch...finally 구문을 사용하면 에러가 나더라도 코드의 실행을 지속 에러가 안났을 때 : try - finally 에러가 났을 때 : try - 에러 - catch - finally 실행순서 에러가 났을 때 복구할 코드를 try 블록 내부에 작성 (try 블록 바로 뒤에 finally 블로이 오면 무조건 실행) 코드의 실행 흐름이 try 에서 catch로 옮겨감. try { console.log('try'); new Array(-1); // RangeError: Invalid array length } catch (e) { console.log('catch'); } fin..
비동기 프로그래밍 비동기 프로그래밍 어떤 일이 완료되기를 기다리지 않고 다음 코드를 실행해 나가는 방식을 뜻함 비동기 프로그래밍 방식은 대개 프로그램의 성능과 응답성을 높이는 데에 도움 코드가 실제로 실행되는 순서가 뒤죽박죽이 되므로, 코드의 가독성을 해치고 디버깅을 어려운 단점 타이머 API (Motivation) setTimeout & setInterval 각각 타이머 식별자 반환. 실행 중인 타이머를 취소할 수 있으며, 정확한 지연시간을 보장해 주지 않음 setTimeout(() => { console.log('실행된 지 2초 지남') }); setInterval(() => { console.log('3초마다 출력'); }, 3000);JavaScript 코드 실행 과정 호출 스택(Cal..
큐, 스택, 트리 자료구조 큐, 스택, 트리 자료구조 데이터의 추상적 형태와 그 데이터를 다루는 방법 큐 (Queue) 순서대로 처리해야 하는 작업을 임시로 저장해두는 버퍼(buffer)로서 많이 사용됨 데이터를 집어넣을 수 있는 선형(linear) 자료형 먼저 집어넣은 데이터가 먼저 나옴 데이터를 집어 넣는 enqueue, 데이터를 추출하는 dequeue 등의 작업 가능 스택 (Stack) 이전의 작업 내용을 저장해 둘 필요가 있을 때 사용 데이터를 집어넣을 수 있는 선형(linear) 자료형 나중에 집어넣은 데이터가 먼저 나옴 데이터를 집어넣는 push, 데이터를 추출하는 pop, 나중에 넣은 데이터를 확인하는 peek등의 작업가능 트리(Tree) 여러 데이터가 계층 구조 안에서 서로 연결된 형태를 나타낼 때 사용 노드(nod..
class class 생성자의 기능을 대체 함수로 호출될 수 없음 클래스 선언은 let과 const처럼 블록 스코프에 선언, 호이스티잉 일어나지 않음 클래스의 ㅔ소드 안에서 super 키워드 사용 // 클래스 class Person { // 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의 constructor({name, age}) { this.name = name; this.age = age; } // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면, 메소드가 자동으로 `Person.prototype`에 저장 introduce() { return `안녕하세요, 제 이름은 ${this.name}입니다.`; } } const person = new Person({n..
내장 객체 및 생성자 JSON 직렬화 형식이며, JavaScript 객체와 유사한 표기법을 사용하는 텍스트를 통해 복잡한 자료구조를 나타냄 { "key": "value", "arr": [1,2,3], "nullProp": null } 직렬화(serialization) 보조기억장치에 저장하거나 혹은 네트워크를 통해 전송하기 위해 저장/전송 가능한 형태로 변환하는것 역직렬화(deserialization) 직렬화된 데이터를 프로그래밍 언어에서 다시 사용할 수 있도록 변환해주는 절차 // `JSON.stringify`로 직렬화 가능 JSON.stringify({ key: 'value', arr: [1, 2, 3], nullProp: null, undefinedProp: undefined // 값이 `undefined`인 속성은 직렬..
연산자 연산자 삼항 연산자 (Ternary Operator) 앞의 표현식이 truty 이면 첫번째 조건이, falsy이면 두번재 조건이 반환 console.log(true ? 1 : 2); // 1 console.log(false ? 1 : 2); // 2 증가/감소 연산자 (Increment/Decrement Operator) 1 단위로 정수의 증가/감소 연산을 할 수 있음 ++ 혹은 -- 연산자를 앞에 쓰면, 값을 증가 시키고 뒤의 결과값을 반환 ++ 혹은 -- 연산자를 뒤에 쓰면, 값을 증가시키기 전의 피연산자를 그대로 반환 let num = 10; num++; console.log(num)//11 num--; console.log(num)//9 할당 연산자 (Assignment Operator) 결과값은..
함수형 프로그래밍 함수형 프로그래밍 고차 함수 (Higher-order Function) 함수를 인수로 받는 함수, 함수를 반환하는 함수를 말하며, 다른 함수의 인수로 넘겨지는 함수를 콜백(callback)이라고 부르기도 함 // 함수를 인수로 받는 함수 function func2(f) { f(); } // 함수를 반환하는 함수 function func1() { return function() {}; } 클로저 (Closure) 바깥 스코프에 있는 변수를 가져다 사용하는 함수와 변수가 저장되는 저장소를 클로저라 부름 클로저의 성질은 데이터를 숨기고 정해진 방법을 통해서만 데이터에 접근할 수 있도록 제한을 두는데 활용 const arr = []; for (let i = 0; i < 10; i++) { // 여기서 만들어진 ..

티스토리툴바