'전체 글'에 해당되는 글 88건

filter() 메서드는 주어진 판별 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환합니다.

forEach() 메소드처럼 배열 내 각 요소에 함수를 적용할 수 있는데, 다른 점은 함수를 통해 반환된 결과를 모아 새로운 배열을 만들어준다는 것이다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
let toDos = [];
 
function deleteToDo(event){
    const btn = event.target; #버튼 태그 지정
    const li = btn.parentNode; #버튼이 포함된 리스트
 
    toDoList.removeChild(li); #리스트 제거
 
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id); #리스트에서 제거된 id와 다른 값들로 새 배열 추가
    });
    toDos = cleanToDos; #새 배열 저장
    saveToDos(); #로컬스토리지에 문자열로 파싱 후 저장
}
cs


toDoList는 html 상에서 작성한 toDo가 출력되는 리스트인데,


그 중 하나의 toDo를 삭제하여, 그 toDo가 가진 id 값과 toDos 변수인 배열 안에 객체들의 id 값을 비교하는데,

배열 안에서 id 값이 다른 것들만 따로 모아 새로운 이름(cleanToDos)의 배열을 만든다는 것이다.


아직 설명하는 방법도 어려울 정도이다.


인강 들으면서 가장 이해 안되었던 부분이다. 이해하는데 정말 오랜 시간이 걸린듯;






출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

블로그 이미지

쵸잇

,

JSON은 JavaScript Object Notation의 준말이다. 자바스크립트 객체 표기로 해석해도 될지 모르겠다.

JSON.parse(text)에서 text는 JSON으로 파싱할 문자열에 해당한다.

다시 말하면, datatype이 현재 문자열인 데이터를 객체형 데이터로 바꾸겠다는 뜻으로 보면 좋다.




웹브라우저에서 폼을 통해 입력 받은 값을 문자열로 저장해야 스크린샷처럼 작성한 text와 id 값을 정확히 알 수 있다


1
localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
cs


JSON.stringify(text)는 text를 문자열로 변환해주는 메소드이다.




그리고 로컬스토리지에 문자열 형태로 저장된 값을 호출하여 웹브라우저 상에서 띄우려면 다시 객체로 파싱해주어야한다. 


1
2
const loadedToDos = localStorage.getItem(TODOS_LS);
const parsedToDos = JSON.parse(loadedToDos);

c



객체로 파싱하여 정의된 변수를 객체(배열) 안에 포함된 요소마다 paintTodo 함수를 적용하기 위해 forEach() 메소드를 사용한다.


1
2
3
parsedToDos.forEach(function(toDo){
    paintToDo(toDo.text);
})
cs


블로그 이미지

쵸잇

,

조건부 삼항 연산자(conditional ternary operator) 는 세 개의 피연산 함수를 취할 수 있는 유일한 자바스크립트 연산자이다. 이 연산자는 if 문의 축약형으로 빈번히 사용된다. 

condition ? expr1 : expr2


condition (or conditions)
true 혹은 false로 평가되는 표현식

expr1, expr2
모든 형식의 값을 지닌 표현식


condition이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환한다.


상황)


현재시각 1시 9분 3초를 웹브라우저에서 출력하면 1:9:3 형태로 출력된다

내가 나타내고 싶은 형태는 01:09:03 이다 


function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}



조건부 삼항 연산자를 적용하여 시간, 분, 초가 10보다 작은 경우 앞에 0을 붙여주는 것이다.



function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockTitle.innerText =
    `${hours < 10 ? `0${hours}` : `${hours}`
    }:${minutes < 10? `0${minutes}` : `${minutes}`
    }:${seconds < 10? `0${seconds}` : `${seconds}`
    }`
}




출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator


'코딩 연습 > Javascript' 카테고리의 다른 글

Array.filter()  (0) 2019.01.01
JSON.parse(), forEach()  (0) 2018.12.31
객체 안에 특정 함수를 속성으로 지정하기  (0) 2018.12.07
함수를 변수에 지정하기  (0) 2018.12.07
문자열 속에 매개변수 넣기  (0) 2018.12.06
블로그 이미지

쵸잇

,