오늘은 todo list 에서 나오는 메소드 밑 함수들을 새로운 js 파일로 불러와 어떤 기능들을 하는지 배우고 익숙해 지기 위해서 실험을 했습니다.
Facts
화살표 함수
자바스크립트에서 함수를 생성하기 위해서는 주로 function 키워드를 사용합니다.
function 키워드는 2가지 방법으로 함수를 생성할 수 있는데요,
함수 선언(Function Declaration)
function sayHi(){
console.log("hi!");
}
함수 표현(Function Expression) //무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식입니다.
var sayHi2 = function(){
console.log("hi!");
};
var sayHi2 = () => console.log("hi!");
화살표 함수는 무명 함수를 생성하는 방법 중의 하나로 기본 형태는 (파라메터1, 파라메터2,…) => { 함수내용 }입니다.
- 함수 내용이 한줄인 경우 함수내용을 감싸는 {}를 사용하지 않아도 됩니다.
- {}가 없는 경우 해당 함수의 실행결과를 자동으로 이천 합니다.
- 함수 내용이 한줄 이상인 경우 return을 사용해서 결과를 리턴합니다.
- 파라메터가 한개인 경우 파라메터를 감싸는 ()를 생략할 수 있습니다. (파라메터가 없는 경우에는 위의 sayHi2의 경우 처럼 파라메터 없이 빈 ()를 표시하여야 합니다.)
함수 표현
filteredArray = myArray.filter(function(element){
return element > 2;
});
화살표 함수
filteredArray = myArray.filter(element => element > 2);
일반적인 자바스크립트 함수(ES5)
function (인자) {
함수 로직
}
화살표 함수(ES6)
(인자) => {
함수 로직
}
input 태그
input : 평범하게 글자나 텍스트칸을 넣을 수있는 공간이 생기죠.
input type="" : 기존의 input에다가 type를 지정하여 type의 옵션을 넣으면,
다양한 모양이 됩니다. 단 입력이나 기타 등등의 모양 꼴로 변하죠.
input type="checkbox" : 이건 체크박스로 나타납니다.
커스텀 데이터 data-x
Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page.
[dom.value]
dom.value 불러 오는 형식이
let tagnamevalue =document.write(Number(tagnamevalue[0].value));
let ElementIdValue = document.getElementById("num1").value;
let ClassIdValue = document.getElementsByClassName('numbers')[2].value;
이런 식으로 해야한다.
targetname 과 ClassName 은 고유 데이터가 아니고 shared 이므로 array 이고 그러므로 [] 를 써야지 제대로 작성이 된다.
findIndex()
findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
Feelings: 많이 배워 갑니다.
Findings: 그냥 보는것 보단 치는게 낫네요
Future Action Plan: 좀더 많이 치고 봅시다. 주말에 TIL 고치겠습니다.
Feedback: 우와 목요일이다.