Javascript 48

함수: 함수 선언문, 함수 표현식, 화살표 함수

핵심은 입력 출력 함수의 구성요소 매개변수 parameter: 함수 내부로 입력을 전달 받는 변수 인수 argument: 입력 반환값 return value: 출력 함수 정의 - 함수 호출 함수는 객체 타입이기 때문에 이름을 붙일 수 있음. 또한 함수 리터럴로 생성할 수 있음 함수 정의 방법 //함수 선언문 function add(x,y){ return x+y; } //함수 표현식 var add = function(x,y){ return x+y; } //화살표 함수(ES6) var add = (x,y) => x+y; //Function 생성자 함수 var add = new Function('x','y','return x+y') 화살표 함수 화살표 함수는 '함수 표현식'의 간략한 버젼. function키워..

Javascript 2022.08.17

옵셔널 체이닝 연산자 (.?)

Javascript Info | 옵셔널 체이닝 MDN | 옵셔널 체이닝 옵셔널 체이닝 연산자란? ?.은 ?.'앞’의 평가 대상이 undefined나 null이면, 평가를 멈추고 undefined를 반환. 그렇지 않으면 뒤의 프로퍼티 참조를 이어감 let user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. 옵셔널 체이닝이 필요한 이유 사례1 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(use..

Javascript 2022.08.10

ES modules: import, export

출처 노마드 코더 | Export Default 과연 제대로 알고계십니까? 모듈 덕분에 import, export가 가능 모듈 module 어플리케이션을 구성하는 개별적 요소. 재사용 가능한 코드조각. Dynamic modules를 이용하면 앱을 더 빠르게 구동할 수 있음 코드를 import, export를 하는데는 다양한 방법이 존재 Named exports 파일내부의 많은 코드를 import, export할 때 사용 import하려는 함수의 이름과 export 함수의 이름이 동일해야함. 아니면 작동하지 않음 중괄호{} 내부에 동일한 이름으로 import export const plus = (a, b) => a+b; export const minus = (a, b) => a-b; export const..

Javascript 2022.08.01

자바스크립트에서 흔히 하는 실수

1. 오타 2. for반복문의 조건에 세미콜론;대신 쉼표,쓰기 for (1.초기화; 2.반복조건; 3.반복갱신) for문 뒤에오는 3가지 요소를 구분할때는 쉼표가 아닌 세미콜론;을 사용하여 구분 let str = ''; for (let i = 0; i < 9; i++) { str = str + i; } console.log(str); // expected output: "012345678" 3. 일치연산자(===)대신 대입연산자(=) 사용 변수에 값을 대입 할때는 대입연산자(=), 비교를 통해 true, false를 나눌때는 일치연산자(===) 4. DB를 연결할 때 .env폴더에 있는 내용은 '' 및 ;를 모두 제거

Javascript 2022.07.31

데이터 호출하기 fetch 함수, AJAX, JSON

백앤드로부터 데이터 받아오는 방법 1. Web API fetch()함수 2. axios 라이브러리 fetch()함수 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 프로미스를 지원함 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환 response 객체는 HTTP 응답을 나타내는 다양한 프로퍼티 제공 fetch('api주소') .then(res => res.json()) .then(res => { //데이터 응답 받은 후의 로직 }); //ES6의 함수 선언식 fetch('api주소') .then(function(res) { return re..

Javascript 2022.06.23

구조분해 할당(Destructuring assignment)이란?

구조분해할당 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 1개 이상의 변수에 개별적으로 할당하는 것 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용함 배열 할당 연산자 왼쪽에, 값을 할당받을 변수를 선언해야함. 이때 변수를 배열 리터럴 형태로 선언. 할당 기준: 배열의 인덱스, 즉 순서 var arr = [1,2,3]; //구조분해 전 var one = arr[0]; var two = arr[1]; var three = arr[2]; //구조분해 후 const [one, two, three] = arr; console.log(one, two, three) 객체 비구조화하기위해 프로퍼티 키를 사용해야함 객체*의 각 프로퍼티(키, 값)를 객체로부터 추출하여..

Javascript 2022.06.16

콜백함수

//각각의 원소를 보여주는 콜백함수 만들기 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; function callback(element){ console.log(element) } words.filter(callback); 콜백함수란? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 함수를 합성하여 변하지 않는 공통로직은 미리 정의해두고, 변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달 자바스크립트는 함수의 일급 객체이므로 함수의 매개변수를 통해 함수를 전달 할 수 있음 용도 : 순차적으로 실행하고 싶을 때 특징 DB에서 데이터를 가져올 때 많이 사용 다른데서 만든 함수도 콜백함수로 ..

Javascript 2022.06.14

동기와 비동기, 이벤트 기반, 프로미스 promise, async, await

노드 비동기(Asynchronous) 이벤트-기반(event-driven) JavaScript 런타임 환경 비동기 프로그램의 다른 부분(기능 또는 함수)들이 서로 방해(blocking)하지 않고 '동시에' 일어날 수 있음 (언제 실행될지 예측 불가능) 프로그램이 비동기로 돌고있다는 건? 프로세스/스레드가 여럿이 돌고 있다는 것 (멀티태스킹) ref) 동기 : 코드가 작성된 순서 그래도 '순서대로' 실행됨. 자바스크립트는 '동기'적임. 호이스팅이 된 후부터 하나하나씩 실행됨 호이스팅Hoisting: var 변수와 함수 선언들이 자동으로 제일 위로 올라가는 것 즉, 이전 작업의 마무리 여부에 상관없이 그 다음 일을 처리하는 작업 방식입니다. 비동기를 동기적으로 처리하기 위해 Promise가 사용된다 이벤트 ..

Javascript 2022.06.14

용어정리: 함수, 클래스, 객체, 인스턴스, 모듈, 컴포넌트

기술노트with 알렉 님의 아래 동영상 내용을 정리하였습니다. 차이점 바로 말씀드립니다~ 함수 클래스 객체 인스턴스 모듈 컴포넌트 API OpenAPI CBD 함수 특정 기능을 하는 가장 기본적인 단위 f(x) = ax+b sum(a,b) -> 클래스 변수와 함수들을 포함하는 특정 기능들의 집합 사람이라는 클래스: 변수 - 키, 몸무게, 함수 - 먹는다, 입는다, 클래스를 선언하면 -> 객체 클래스는 정의하고 객체는 선언을 함 객체 정의된 클래스명으로 선언하면 만들어 지는 것 사람을 a로 선언, a = 사람 프로그램이 실행되는 순간에 객체는 실제 메모리에 올라오게됨 -> 인스턴스화 됐다 (메모리에 올라왔다) 인스턴스 객체가 메모리에 올라올때 인스턴트화 모듈 함수+클래스: 특별한 기능들을 하는 집합 패키지..

Javascript 2022.06.14

돔(DOM), 누구냐 넌..!

DOM(Document Object Model)은.. '문서 객체 모델'의 약어이다. 문서 객체 모델이란, HTML, XML 문서의 프로그래밍 interface이다. (DOM은 브라우저에서 제공하는 기능이다. 프로그래밍 언어는 아니다) Javascript가 무엇이었던가! 동적인 HTML을 정적으로, 즉 사용자와 상호 작용하기 위해 (우리가 클릭하면 버튼이 눌린다던가 하는) 만들어진 프로그래밍 언어이다. 이를 구현하기 위하여, HTML-Javascript-웹브라우저가 삼박자로 연결이 되어야 한다. DOM은 웹브라우저에서 Javascript가(Javascript의 관점에서, 즉 객체화 되어) HTML를 사용할 수 있도록 둘을 연결한다. 즉, 저 셋을 연결을 가능하기 하는 다리와 같은 역할인 것이다. 가장 중..

Javascript 2022.05.22