javascript

- promise 객체는 비동기 작업 실행, 상태 관리 및 결과 저장 등 다양한 역할을 해줌   Promise의 3가지 상태  - 대기 : 아직 작업이 완료되지 않은 상태- 성공 : 비동기 작업이 성공적으로 마무리 된 상태- 실패 : 비동기 작업이 실패한 상태(네트워크에러, 코드에러 등)  - 해결(resolve) : 대기 -> 성공- 거부(reject) : 대기 -> 실패   유튜브 예시 - 대기 : 영상 로딩- 해결 : 영상 로딩 완료 - 성공 : 영상 시청이 가능한 상태 - 거부 : 영상 로딩 실패- 실패 : 시청 불가능한 상태     promise 객체 생성하기   - 생성자의 인수로 비동기작업을 실제로 진행할 콜백함수를 넣어줌- 생성과 동시에 자동으로 콜백함수를 호출해 안에 있는 비동기 작업을 ..

Node.js- JavaScript 실행 환경(Run Time) = 구동기- 게임기 같은 역할    패키지 - Node.js에서 사용하는 프로그램의 단위      node 실행하기 1. npm init2. node 실행하려는 파일의 경로/파일명    경로 간단히하기(scripts)  - script 안에 명령어와 경로를 적어두면 터미널에 "npm run 명령어" 만 입력해도 실행할 수 있음    모듈 시스템 - 모듈을 생성하고 불러오고 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템    CJS(Common JS 모듈 시스템)    - 별도의 파일 설치 필요 없음  외부로 모듈 내보내기module.exports = { name : name,} - 이름이 같으면 name, 이런식으로 적을 수 ..

콜백함수를 활용한 비동기 작업 처리    sum의 값을 add 함수 밖에서도 이용할 수 있게 하는 방법 - 비동기 처리의 결과 값을 사용하고자 하는 콜백함수를 전달해주면 됨     실행 순서 1.  add 함수 호출2. setTimeout 함수 호출3. 3초 뒤 callback 함수 호출4. sum 값 계산5. 매개변수로 받은 콜백함수를 sum 값으로 호출6. console.log에 출력   function add(a,b,callback) { setTimeout(()=> { const sum = a+b callback(sum) }, 3000)}add(1,2,(value) => { console.log(value)})      예제 - 비동기 작업의 결과를 또다른 ..

async- 어떤 함수를 비동기 함수로 만들어주는 키워드- 함수가 프로미스를 반환하도록 변환해주는 그런 키워드   - 객체를 그대로 반환하는 함수가 아닌,- 객체를 결과값으로 갖는 새로운  프로미스를 반환하는 함수로 변환됨    - 결과로 Promise 반환  - 애초에 promise를 반환하고 있는 비동기 함수라면- async 키워드가 별다른 일을 하지 않고 그냥 프로미스가 반환되도록 둠- 즉, 변화 없음    - 시간 설정을 두고 싶다면 setTimeout을 사용할 수 있음     - id와 name 값이 잘 전달됐음- 완료 상태임      await - async 함수 내부에서만 사용이 가능한 키워드- async가 없는 함수에서 사용하면 에러 발생 - 비동기 함수가 다 처리되기를 기다리는 역할을 함..

동기    - 동기 : 여러개의 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 것- 쓰레드 : 작업을 직접 실행하고 처리해주는 역할을 하는 것- 자바스크립트는 기본적으로 모든 코드가 동기적으로 실행됨     - 혹시라도 중간에 오래 걸리는 작업이 섞여있을 경우 전체 프로그램의 성능이 저하될 수 있다는 치명적인 단점이 있다     - 자바나 C언어는 여러개의 스레드를 동시에 사용하는 멀티스레드 기법을 사용하여 이러한 문제를 해결함- 하지만 자바스크립트 엔진에는 쓰레드가 1개밖에 없음-> 이를 해결하기 위해 비동기 방식을 사용함     비동기  - 비동기 : 작업을 순서대로 처리하지 않음- 앞선 작업을 기다리지 않고 다른 작업을 동시에 진행시킬 수 있음     - 결과값을 활용해야 할 때는 ..

1. forEach- 모든 요소를 순회하면서 각각의 요소에 특정 동작을 수행시키는 메서드   - 매개변수로 현재 요소(item), 반복 카운트(idx), 원본 배열(arr)을 전달 받음- 요소를 원하는 방식으로 변형할 수 있음    - 빈 배열을 만들고 그 곳에 원하는 처리를 한 요소를 push해 새로운 배열을 만들 수 있음     2. includes - 배열에 특정 요소가 있는지 확인하는 메서드   - 값이 있으면 true,  없으면 false 반환     3. indexOf   - 특정 요소의 인덱스(위치)를 찾아서 반환- 같은 값이 있을 경우 앞에서부터 탐색하기 때문에 가장 처음으로 일치하는 숫자의 인덱스 반환- 값이 없을 경우엔 -1 반환    4. findIndex- 모든 요소를 순회하면서 콜..

1. push- 배열의 맨 뒤에 새로운 요소를 추가함    - 배열.push(요소)- 여러개의 요소도 한 번에 추가 가능- 요소가 추가된 이후 배열의 길이를 반환함    2. pop - 배열의 맨 뒤에 있는 요소를 제거하고, 그 요소를 반환함       - 빈 배열에 pop을 사용해도 error가 발생하지 않음  3. shift - 배열의 맨 앞에 있는 요소를 제거 후 반환- pop처럼 요소를 제거하는 것은 같지만 "맨 앞"의 요소를 제거한다는 차이점   - pop과 같이 빈 배열에 사용해도 에러가 발생하지 않음   4. unshift - 배열의 맨 앞에 새로운 요소를 추가   shift 연산 주의사항- push, pop 보다 느림- 이유 : 맨 앞의 값을 변경하기 때문에 인덱스를 새로 붙여줘야 해서 느..

배열 순회  1. 인덱스 활용- 배열의 인덱스 값을 활용하기 때문에 추후에도 인덱스 값을 활용해 이것저것 응용이 가능함  2. for of 반복문 사용- 인덱스를 따로 저장하지 않기 때문에 인덱스 활용 불가능    객체 순회  1. Object.keys 내장함수 활용- 객체에서 key 값들만 뽑아서 새로운 배열로 반환   - 내장함수를 이용해 추출한 key 값 배열을 인덱스를 사용해 하나씩 출력할 수 있음   - for of 반복문을 사용해서 출력도 가능함  - 객체의 value 값을 추출하고 싶다면 인덱스를 사용해 추출할 수 있음   - 조금 더 고급스럽게, 가시성 있게 표현하는 방식- value 값에 person[key]를 저장하여 key, value로 출력해도 같은 결과가 나옴  2. Object...

원시타입과 객체타입     - p2 값을 수정해도 실제 메모리 안의 값을 수정하지 않고- 새로운 메모리 공간에 수정된 새로운 값을 넣기 때문에 p1의 값은 변함이 없음- 즉, 원본은 변하지 않는 불변값임      - 객체는 동적으로 값을 할당받기 때문에 별도의 공간에 저장하고 그 공간을 가르키는 참조값을 사용함- 위와 같이 `let o2 = o1`으로 선언하면 o2와 o1은 같은 참조값을 바라보게 되고,- o2의 값만 수정해도 원본 배열이 수정되어 o1의 값도 함께 수정됨- 즉, 원본의 값이 수정됨(가변값)   객체 타입 주의사항1. 의도치 않은 값의 수정  해결 방법- 그러므로 객체의 값을 사용할때는 단순히 대입연산자를 사용하기보단,- 새로운 객체를 생성한 뒤 스프레드 연산자 등을 사용하여 내부 속성을..

Spread 연산자- 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할  배열  - 하나하나 넣을 필요 없이 spread 연산을 사용하면 간편하게 표현할 수 있음- arr1 에 저장된 값들을 하나씩 출력해줌 - 인덱스로 하나하나 지정해줄때와 달리, 배열이 수정되도 영향받지 않음   객체  - 객체도 배열과 사용법은 비슷함    함수   - 함수의 인자를 전달할 때에도 spread 연산을 사용할 수 있음      - 빈 값은 undefined가 출력됨     Rest 매개변수   - 매개변수 값을 배열로 저장- 매개변수를 저장하는 공간인 ( ) 소괄호 안에 사용되었으므로 매개변수이며, spread 연산자와는 엄연히 다르다 - ...arr1 은 spread 연산- ...rest는 rest 매개변수 ..

배열의 구조 분해 할당   - 인덱스로 값을 하나하나 지정해서 넣어 줄 필요 없음- 만약 없는 값을 구조 분해 할당 할 경우 undefined가 출력됨    - 배열에 없는 값일 경우 " undefined"가 아닌 기본값을 출력하도록 할 수 있음- "four = 4" 이런식으로 구조분해할당할 때 기본값을 설정할 수 있음     객체의 구조 분해 할당  - 객체도 마찬가지로 {name : name} 이런식으로 하나하나 지정해줄 필요 없이- key 값을 활용해 구조분해할당을 할 수 있음- 단 key 값이 아닌 value 값이 구조분해할당되는 것을 주의하자     - 객체에 없는 값을 구조 분해 할당 하는 것도 가능함- 배열과 같이 기본값 설정도 가능함- 기본값 설정을 안하면 undefined가 콘솔에 출력됨..

단락 평가- 첫번째 피연산자 값 만으로도 논리 연산식의 결과를 확정지을 수 있기 때문에 두번째 피연산자의 값에는 접근조차 하지 않는 것을 단락평가라고 함   - AND의 경우 varA가 false이기 떄문에 varB를 확인하지 않고 단락평가가 발생해 false를 출력함- OR의 경우 varB가 true이기 때문에 varA를 확인하지 않고 단락 평가가 발생해 true를 출력함    실제 코드에서 살펴보기  - AND 연산의 상황에서 첫 피연산자인 returnFalse가 false이기 때문에- `console.log("False 함수")` 만 시행된 뒤 "false" 값이 반환됨 - returnTrue 는 아예 실행되지 않음     - AND 연산의 상황에서 첫 피연산자인 returnTrue가 true이기 ..