개발 블로그

spread '...이름' 형태로 사용한다. 쉽게 말하면 '객체나 배열의 요소들을 펼쳐보아라'라는 뜻 객체, 배열의 내부, 함수를 호출해주는 인자에서 사용한다. ①객체 예를 들어, student라는 객체에 name을 포함하면서 거기에 새로운 요소를 추가한 새로운 객체를 만들 때 spread를 쓴다. ...안에 student 객체의 요소를 다 펼치게 되는 셈이다. 위의 univStudent에 또 다른 요소를 추가한 객체를 만든다면, 아래와 같이 똑같이 해주면 된다. ②배열에서도 똑같다. ③함수 코드가 길어지고 거추장스럽다. 코드가 간결해진다. 값도 55로 같은 것을 알 수 있다. rest '...rest' 형태로 사용한다. (디스트럭처링을 통해 값을 받아오는) 객체, 배열을 받아오는 변수, (값을 받아오는..

비구조화 할당(구조분해할당)은 배열의 인덱스 혹은 객체의 키를 기준으로 원하는 값만 빼내는 것을 말한다. ①변수를 선언하고 값을 할당하는 것을 한 방에 할 수 있다. 새로운 이름으로 가지고 오고 싶다면, 'key값 : 새로운 이름' 형태로 선언해준다. ②API에 많이 있는 중첩된 객체를 가져 올 수 있다. 중첩된 객체인 total의 경우 중괄호를 만들어 다시 한 번 destructuring 해주면 된다.

JS에서의 배열은 배열이 아니라, 배열(자료형)을 흉내낸 객체 배열 메소드 1. 배열의 길이 알아보기 : .length ex)numarr.length JS에서 배열의 길이와 배열의 요소개수가 같은 말일까? No! ▼요소의 개수를 1개만 넣어줬음에도 불구하고 length는 3이 출력. 이는 초기화 해주지 않은 인덱스도 length에 포함된다는 뜻인데, 초기화 해주지 않은 인덱스는 empty item이 되어 length에 포함된다. 2. 배열에 요소 추가하기 ⓐ배열을 직접 건드리는 방식 : .push(추가요소) 배열이 변화됨 ⓑ배열을 직접 건드리지 않는 방식 : .concat(추가요소) 배열이 변화하지 않음 추가된 7,8을 확인하려면 새로운 변수에 선언을 해주어야 한다. 3. 배열 속 요소 빼내기 : .po..

함수를 좀 더 간결하게 작성하도록 도와주는 방법 화살표 함수 -이름이 없는 익명함수 -표기방법 : (매개변수) => {함수본문 , 리턴값} -매개변수가 하나라면 소괄호 생략 가능 -함수본문이 한 줄이라면 중괄호 생략 가능 -만약 중괄호가 생략되었으면 return은 암묵적으로 이루어지므로 작성하지 않아야 한다. -(중괄호를 생략하지 않았다면 return을 꼭 적어주어야 한다.) -callback 함수의 가독성을 높여줌 함수를 화살표 함수로 변형하는 연습을 꾸준히 하자

템플릿 리터럴 : 백틱(`)으로 문자열을 표기하는 방법 문자열을 더 쉽게 사용하기 위한 목적 기존 문자열의 표기방식의 불편함 사용방법 ①기존 문자열 표기방식 ②템플릿 리터럴 사용 : 전체를 백틱(`)으로 감싸고 변수가 들어가는 자리에 ${}을 사용한다. 기존보다 훨씬 간편하다. 연산을 할 경우 제어문에도 사용 가능

var의 문제점 -함수 스코프 : 블록에서 선언된 변수는 전역변수가 되므로 전역변수가 너무 많아진다. -중복된 이름 선언 가능 : 의도치 않게 값의 변경이 일어날 가능성이 있다. -변수의 불변성이 보장X : 유동적인 값을 담는 변수 vs 너무 중요해서 값이 바뀌면 안되는 변수에 대한 구분이 없다. 이러한 var의 한계점을 보완하기 위해 es6에서 let과 const가 등장한다. let -변수의 중복 선언 X 즉, 동일한 이름으로 변수를 선언할 수 없다. -블록 레벨 스코프 -변수의 값 자체를 재할당하는 것은 가능하다. const -변수의 중복 선언 X 즉, 동일한 이름으로 변수를 선언할 수 없다. -블록 레벨 스코프 -변수의 값을 재할당하는 것은 불가능하다. -값이 변경되면 안될 때 사용 -객체에서도 사..

동기와 비동기 비동기처리 -바로 답을 내놓을 수 없는 상황이라면 계-속 기다리지 않는다. -일단 된 것부터 먼저 실행한다. -실행순서가 보장되지 않는다. cf)동기처리 -실행순서가 확실히 지켜진다. web에서의 동기처리는 비효율적이므로 비동기처리가 된다. 그럼에도 불구하고 실행순서가 보장되어야 하는 경우가 있다. 예를 들면, 결제처리 함수가 완료되면 b함수를 실행한다. 오래 걸리는 함수의 리턴값으로 d함수가 처리된다. 등이 있다. 그 때 쓰게 되는 함수가 callback -부르면 타이밍 맞춰 오는 함수 -함수 안에서 호출함으로써 실행순서를 보장 모든 함수가 순차적으로 실행되어야 될 때는 콜백 지옥을 경험할 수 있다. 이를 해결하는 것이 Promise와 async await이다. +++ 비동기처리는 이벤트..

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 내장함수 ①단일접근 -getElementById : id를 기준으로 DOM Element에 접근 -getElementByName : name을 기준으로 -getElementByClass : class를 기준으로 -getElementByTagName : 태그를 기준으로 .innerHTML : 가지고 온 DOM 객체에 해당하는 날 것 그대로의 HTML 전..