javascript, framework/javascript (50) 썸네일형 리스트형 Step03_array(map, filter, find 함수) ecma6 map() 함수 배열의 특징으로 map() 함수를 원래 가지고 있다.아래 코드는 map() 함수를 활용해 원하는 값을 출력한 예시이다. let [a, b, c]=names; 정의하고자 하는 변수들을 배열로 작성해서 특정 배열 변수의 내용을 한번에 복사해서 정의하는 방법도 있다. let arr=[...names, "주뎅이", "덩어리"]; 배열 변수 앞에 ...을 사용해서 배열의 값을 모두 대입하는 방법이 있다. 밑에 두 코드의 차이는 arrow function 표현식만 사용한 것과 람다함수 표현식까지 활용한 것의 차이다. filter() 함수 filter() 함수를 활용해서 원하는 조건에 맞는 새로운 배열을 얻어낼 수 있다. 해당 조건식은 짝수만 담긴 배열을 얻을 수 있게 작성하였다. result와 re.. Step02_arrowFunction(arrow function, 람다함수) ecma6 표현식 차이 (기존 함수 표현식, arrow function 표현식, 람다함수 표현식) 기존 함수 (function) 표현식, arrow function 표현식, 람다함수 표현식의 예시이다. arrow function 표현식과 this 예시에서 보여지듯이 기존 함수 표현식으로 코드를 작성하면 this가 정상작동하는 것을 console로 확인할 수 있다. 반면에 arrow function 표현식에 this를 사용하면 정상작동하지 않는다. Step01_varaible(var, let, const 차이) ecma6 var, let, const 차이 var은 여러 단점으로 인해 최근에는 잘 사용되지 않는다.(지역변수로 활용할 수 없다.) 따라서 let과 const를 많이 사용하는데 const는 값이 결정되면 상수화 시키기 때문에 재선언, 재할당을 할 수 없다. 하지만 안에 있는 내용은 변경 가능하다(mem.name="park" 부분 참고). 객체를 재선언, 재할당하는 경우는 생각보다 흔치 않고 의도치 않은 재할당을 방지해주기 때문에 const를 적극적으로 활용할만 하다. loop_test2(배열 응용 반복문 복습) array type(배열)을 사용하는 반복문의 가장 기본적인 형태이다. loop_test (함수의 형태와 반복문 복습) 함수의 형태와 반복문에 대한 예시를 간단하게 작성하였다. 첫번째 버튼과 두번째 버튼은 보이는 기능은 같지만 분명한 차이가 있다. 첫번째와 다르게 두번째 버튼의 코드는 global area에 작성되는 전역 함수를 강제하게 된다. 아래 for 문은 기존에 쓰던 반복문의 기본적인 형태로 증감연산자가 쓰였다. console의 breakpoint를 활용하여 thread(읽히는 순서)를 확인해보면 구조를 이해하기 수월하다. Step07_operator(연산자)스터디 1. 산술 연산자 산술 연산자는 +, -, , /, % 등을 의미한다. 숫자 뿐만 아니라 문자열 데이터 타입도 산술 연산자를 사용할 수 있다. 익숙한 연산자들은 설명을 생략하겠다. % 연산자는 나머지를 구하는 연산자이다. ex) console.log(10 + 5); // 15 console.log(10 - 5); // 10 console.log(10*5); // 50 console.log(10 / 5); // 2 console.log(10 % 5); // 0 // %는 나머지를 구하는 연산자 console.log("10" + "5"); // 105 // 문자열 더하기 2. 논리 연산자 논리 연산자는 앞뒤 두 조건을 비교할 때 사용되는 연산자이다. && AND 연산자로 두 조건 모두 참인 경우에만 true.. Step06_example2(creatElement, append 응용)스터디 creatElement 와 append를 사용해서 일정 정보가 html table 형식으로 입력되는 기능을 만들었다. 2022.07.10 - [javascript] - Step04_createElement(createElement, append, this, remove)스터디 Step06_example(beforeend)스터디 이름과 주소를 동적으로 추가하는 문서객체를 만드는 연습을 할 계획이다. 추가하는 방식을 3가지로 작성하여 버튼이 3개다. 2022.07.10 - [javascript] - Step04_createElement(createElement, append, this, remove)스터디 2022.07.10 - [javascript] - Step06_innerHTML(innerHTML, insertAdjacentText, insertAdjacentHTML, beforeend)스터디 위의 학습이 필요하다 1번 방법 연결연산과 insertAdjacentHTML를 활용하여 tbody 의 beforeend 위치에 삽입해주는 방법이다. 2번 방법 1번 방법과 유사하다. 연결연산을 하지 않고 전체를 텍스트 처리하고 이름과 .. 이전 1 2 3 4 5 ··· 7 다음
