JavaScript (16) 썸네일형 리스트형 [Javascirpt] filter 함수 filter 메서드는 해당 조건이 참인 요소들을 모아서 새로운 배열로 반환하는 메서드이다. 배열에서 원하는 데이터만 추출하고 싶을 때 사용하는 메서드인데, 여기서 중요한 부분은 새로운 배열을 반환해준다는 것이다. 또한 filter은 중복값을 제거해주지 않는다. filter() filter 도 map 함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한번씩 돌리면서 콜백함수의 몸체부분에서 true 를 반환하는 원소들만 걸러준다. (filter결과값은 배열) 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수 callback : 함수 element : 현재값 index : 인덱스 1. arr.filter(function(현재값) => .. [Javascript] Array map 사용법 react에서 값을 여러개 가지고 있는 배열의 모든 값을 꺼낼 때 map을 많이 사용한다. 이번 포스팅에서는 이러한 배열에서 값 꺼내는 방법 중 map( )을 다뤄보겠다. map() 배열 내의 모든 요소에 대해 실행한 callback의 결과를 모은 새로운 배열 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) 매개변수 callback : function currentValue : 현재값 index Optional : 인덱스 1. arr.map (함수 (현재값, 인덱스) { }) 2. arr.map (function (변수, 변수) { return 값 }) 3. arr.map ( (변수, 변수) => { return 값 }) => { }을 사.. [Javascript] Array push() vs concat()비교 배열에 새로운 원소를 추가하는데 사용되는 push함수와 concat 함수에 대해 알아보았다. push() 기존 배열에 원소를 추가하여 배열의 총 길이를 리턴함 -> 원본데이터 변경됨 concat() 기존 배열을 복사한 후 원소를 추가하며, 새 배열을 리턴함 const result1 = ["apple", "orange", "banana"] const result2 = result1 result2.push("cat", "dog") console.log(Object.is(result1,result2)) //true const result3 = result1.concat("cat","dog") console.log(Object.is(result1,result3)) //false push mdn Array.pro.. [Javascript] 화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법이 바로 화살표 함수이다. 중괄호 없이 작성: (...args) => expression : 함수는 이 표현식을 평가하고, 평가 결과를 반환함 중괄호와 함께 작성: (...args) => { body } : 본문이 여러 줄로 구성되었다면 중괄호를 사용해야함. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 한다. function ask(question, yes, no) { if (confirm(question)) yes() else no(); } ask( "동의하십니까?", function() { alert("동의하셨습니다."); }, function() { alert("취소 버튼을 누르셨습니다."); } ); co.. [Javascript] 삼항 연산자와 논리 연산자 삼항연산자와 &&연산자 , || 연산자 1. 삼항연산자 조건 ? true : false 2. 논리연산자 일치 === (react에서 엄격한 비교를 수행할 때) 불일치 !== (react에서 엄격한 비교를 수행할 때) true && 결과 -> 참인 결과 ( false , null , undefined ) || 결과 -> 거짓 결과 const done1 = true const done2 = false const done3 = undefined const re1 = done1 === true ? '참':'거짓' console.log( re1 ) // 참 const re2 = done1 === true && '참의결과값' console.log( re2 ) // 참의결과값 const re3 = done1 && '.. [Javascript] 템플릿 리터널(Template Literal) 템플릿 리터럴은 일반 문자열과 비슷해보이지만 백틱(backtick) 문자 `를 사용한다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있다. let a = 20 let b = 30 const result = `a : ${a} b: ${b} 의 합 : ${a+b}` console.log(result) //a: 20 b: 30의 합 : 50 let name = '배수지' let age = 30 let addr = '서울' const result = `${name}의 나이는 ${age}이고, 주소는 ${addr} 입니다.` console.log(result) //배수지의 나이는 30이고, 주소는 서울 입니다. [Javascript] var, let, const의 차이 변수 선언은 var, const, let으로 할 수 있지만, const와 let의 사용을 권장한다. 왜 var보다는 const와 let의 사용을 권장하는 걸까? var의 문제점 - 변수 중복 선언이 가능하여 예기치 못한 값을 반환할 수 있다. - 변수 선언문 이전에 변수를 참조하게 되면 underfined를 반환한다. var (변수 재선언 가능) - 대부분의 프로그래밍 언어들이 블록 레벨 스코프를 사용하고 있지만, var은 함수 레벨 스코프를 갖는다 (위에서 차례대로 읽음) - 변수 선언을 여러번해도 에러없이 다른 값이 출력될 수 있다. 같은 변수명을 남용하는 문제가 있으므로 이를 보완하기 위해서 es6부터는 let, const가 추가되었다. const a = 100 console.log(a) { con.. [Javascript] 엄격모드 자바 스크립트는 기존 기능을 변경하지 않으면서 새로운 기능을 추가해왔기 때문에 호환성 문제가 없었다. 하지만 ES5부터 새로운 기능이 추가되고 기존 기능의 일부가 변경되었다. 기존 기능이 변경되어 호환성에 문제가 생기게 되었고, 이를 방지하기 위한 것이 엄격 모드(strict mode) 이다. 👉 엄격 모드를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 지금의 문법과 맞지 않는 과거의 코드가 작동할 수 있게된다. 👉 엄격 모드를 활성화하면 모던 자바스크립트가 기준이 되어 과거에 짜 놓은 코드가 동작하지 않게될 수도 있다. https://doozi0316.tistory.com/entry/JavaScript-use-strict-%EC%97%84%EA%B2%A9-%EB%AA%A8%EB%93%.. 이전 1 2 다음
