오늘도 삽질중

DOM이란? HTML에 JavaScript 적용하기 DOM구조를 조회 돔 메소드 연습 CRUD(create , read ,update, delete) (ex 간단 투두리스트, 유효성검사) DOM (Document Object Model) -HTML요소를 Object처럼 조작할 수 있는 모델이다. 즉 자바스크립트를 이용하면 DOM으로 HTML을 조작할 수 있다. (HTML을 조작한다? DOM을 위해 웹 개발자들이 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었다. 이렇게 만들어진 구조를 이용해 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들수 있다.) -자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜기간 사용되었다. HTML에 JavaScript 적용하..

구조 분해할당(Destructing) - 배열과 객체의 속성을 해체하여 그 값을 개별 변수로 받는방법 예시 const arr = [1,2,3] const [first, second, third] = arr let x,y,z [x,y,z] = arr; 예시 let x, y, z; [x, y] = [1, 2]; console.log(x, y); // 1 2 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(x, y); // 1 2 [x, , z] = [1, 2, 3]; console.log(x, z); // 1 3 // default value [x, y, z = 3] = [1, 2]; console.log(x, y..

Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때에 사용한다. function sum (x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers)//6 Spread 연산자는 ...을 통해 사용할 수 있다. MDN을 통해 Spread 연산자 설명을 보면 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0 개 이상인 인수 (함수로 호출할 경우)또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다. 라고 되어있는데 아래 콘솔로그를 보는것이 더 이해하기 쉬울것이다. 위처럼 arr를 Spread 연산자로 콘솔로그를 찍어보면 배열이 아닌 ..

객체와 배열의 반복 공통점 객체의 반복(for ...in) 배열의 반복(for ...of) 객체와 배열의 반복 공통점 - 순회 할 객체의 길이만큼 반복을 한다. 객체 반복문(for ...in) ---> 뽀잉뽀잉(for in for in) - 객체의 속성들을 반복하여 작업을 수행한다. - for ... in 구문은 객체의 key값에 접근이 가능하지만, value 값에는 접근 불가능하다. (따라서 value 값에 접근하려면 key값을 이용해야함) const obj = { a: 1, b: 2, c: 3, }; for (let key in obj){ // 여기서 선언된 key는 임의의 변수로 이름 아무거나 지어도 된다. console.log(key, obj[key]); } < for..in 좀 더 들여다 보기 ..

객체 key-value pair Dot notation, Bracket notation key값이 정해져 있을때와 정해지지 않을때 표현법 delete in 연산자 객체 : 하나의 변수에 여러가지의 정보(속성)가 담겨있는 데이터 타입 배열을 사용해주면 되지 않을까? - 각 값이 하나의 변수로 묶여있긴 하지만, 각각의 index가 어떤 정보를 갖고 있는지 알기 어렵다. let user = { firstName: 'Soyoung', lastName: 'Park', email: 'soso@codestates.com', city:'Seoul' }; 👊 객체는 키와 값 쌍(key-value pair)으로 이루어져 있다. 키(key) 값(value) firstName 'Soyoung' lastName 'Park' e..

자바스크립트에는 기본적으로 내장된 고차함수가 있다. 배열 매소드들 중 일부가 대표적이다. forEach, find, filter, map, reduce, sort, some, every... map filter reduce map: 하나의 데이터를 다른 데이터로 맵핑(mapping)할 때 사용 모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환한다. 행동은 내가 직접 작성해야하고, 함수로 작성하여 인자로 넣는다. 기존 배열을 수정하지 않는다. 원하는 행동에 따라 결과가 달라진다. let arr = [1, 2, 3]; let result = arr.map(function(el) { return el * 2 }); return result; 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(m..

특별대우를 받는 함수 고차함수란? 특별대우를 받는 함수 자바스크립에서도 특별 대우를 받는 객체들이 있는데, 그 중의 하나가 함수이다. 어떤 특별 대우를 받을까? 변수에 할당(assignment) 가능, 자료구조(객체,배열 등에)저장 가능 다른 함수의 인자(argument)로 전달 가능 다른 함수의 결과로서 리턴 가능(함수의 반환값 사용가능) 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. (함수의 데이터를 string, number, boolean, array, object)를 다루듯이 다룬다. 1. 변수에 함수 할당경우 // square 변수에 함수를 할당 const square = function(num){ return num*num; } // squa..

반복문: 같거나 비슷한 코드를 반복적으로 실행시켜야 할 경우에 사용 for구문 -반복할 내용을 중괄호 block에 넣는다. -반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다. 아래 예시에서는 for( let i = 0 ; i < word.length ; i++ ) let word = "hello" for( let i = 0 ; i < word.length ; i++){ 반복할 내용 } while 구문 -반복할 조건 중, 초기화, 증감문은 따로, 조건식만 괄호 안에 넣어준다. let i = 0 ; while( i < word.length){ 반복할 내용 i++ }