반응형 javascript91 [ES6+] 템플릿 리터럴(Template Literal) - 백틱(back-tick) ` ES6에서 도입된 템플릿 리터럴(Template Literal)인 문자열 표기법에 대해 알아보자. 템플릿 리터럴은 지금까지 문자열 표현에 흔히 사용해왔던 이중 따음표("") 나 작은 따음표('') 대신 백틱(``)을 사용한다. 템플릿 리터럴을 통해 다양한 기능을 제공하는데, ES5에서의 기존 방식과 백틱을 사용한 비교 예제 코드를 통해 하나씩 알아가보자. 1. 백틱(back-tick) 기본 사용법 let blog = `mine-it-record`; 우선 기본 사용법에 대해 알아봤는데, 일단 기본적으로 더블쿼터와 싱글쿼터를 이용해 문자열을 선언하는 방식과 동일하다. 2. 줄바꿈 선언 (Multi-line strings) //ES5 var str1 = 'string line 1\n' + "string lin.. 2021. 12. 22. [ES6+] 화살표 함수(Arrow function)에 대하여 - 2 (this) [ES6] 화살표 함수(Arrow function)에 대하여 - 1 (표현식) [ES6] 화살표 함수(Arrow function)에 대하여 - 1 (표현식) 화살표 함수(Arrow function)는 ES6(ECMAScript6)에서 등장한 개념으로 기존에 함수를 선언할 때 사용하던 function 키워드 대신에 화살표(=>)를 사용하여 보다 간략한 방법으로 함수 선언을 도와주는 역할 mine-it-record.tistory.com 위 게시글에 이어서 화살표 함수(Arrow function)에 대해 배워보자. 이번에 다룰 내용은 화살표 함수와 항상 같이 따라다니는 this에 대해서 알아보고자 한다. ES5 문법에서 사용하던 일반함수의 this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this.. 2021. 12. 18. [ES6+] 화살표 함수(Arrow function)에 대하여 - 1 (표현식) 화살표 함수(Arrow function)는 ES6(ECMAScript6)에서 등장한 개념으로 기존에 함수를 선언할 때 사용하던 function 키워드 대신에 화살표(=>)를 사용하여 보다 간략한 방법으로 함수 선언을 도와주는 역할을 한다. 코드를 통해 사용방법에 대해 하나씩 알아가보자. 1. 화살표 함수(Arrow function) 기본 문법 // es5 var plus = function(a, b) { return a + b; } // es6 let minus = (a, b) => { return a - b; }; 기본 문법은 본문 첫 문단에서 설명한것처럼 function 키워드 대신 화살표를 사용하여 간략하게 사용하였다. 이 방식에는 여러가지 특징들이 존재하는데, 매개변수의 개수와 블럭안의 line .. 2021. 12. 13. [JavaScript] 배열(arr) 중복 제거하기 script에서 사용하는 배열의 중복을 제거하는 방법에 대해 알아보자. 구글에 검색해봐도 대부분 비슷한 방법만이 존재해서 나 역시 그냥 기록해두고자 한다. ▷ 예제1) 배열 함수인 forEach() 와 includes() 활용 (ft. indexOf() 사용) var arr = [1, 2, 3, 4, 2, 4, 5, 1]; //중복 제거 [1, 2, 3, 4, 5] - includes() var removeOverLapArr1 = []; arr.forEach(function(item, index){ if(!removeOverLapArr1.includes(item)){ removeOverLapArr1.push(item); } }); //중복 제거 [1, 2, 3, 4, 5] - indexOf() var r.. 2021. 10. 23. [JavaScript] Object.is() - 두 개의 값이 같은지 확인 (ft. 이중등호(==), 삼중등호(===)) Object.is() 메서드에 대해 알아보자. ▷ 구문 Object.is(value1, value2); 이중등호(==)와 삼중등호(===) 처럼 두개의 값을 비교해주는 메서드이다. 우선 Object.is() 메서드는 IE에서는 사용이 불가능하다는 점을 알아두고 예제를 통해 접해보자. ▷ 예제1) Object.is() 기본 사용법 Object.is('mine', 'mine'); // true Object.is(window, window); // true Object.is(undefined, undefined); // true Object.is(null, null); // true Object.is('mine', 'it'); // false Object.is([], []); // false Object.is.. 2021. 10. 8. [ES6+] arr.find() - 특정 조건에 맞는 배열 요소 값 가져오기 (ft. Array.prototype.find()) 특정 조건에 맞는 배열 요소 값의 위치를 찾아내는 Array.prototype.findIndex() 말고도 ES6에서 추가된 특정 조건에 맞는 배열 요소 값을 그대로 반환해주는 Array.prototype.find() 메서드 역시 존재한다. findIndex() 메서드에 대해서는 아래 링크를 통해 접해보자. [JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex()) [JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex()) 배열에서 특정 값의 위치(인덱스)를 찾아주는 indexOf 가 존재하는데, 아무래.. 2021. 9. 1. [JavaScript] history.pushState() - 페이지 갱신없이 주소URL 변경하기 스크립트로 페이지를 갱신하지 않고 페이지 주소만 변경하는 방법에 대해 알아보자. 생각외로 url을 이동하지 않은 상태에서 주소창의 url만 변경해야 하는 경우가 생길 수 있다. ▷ 구문 history.pushState(state, title[, url]); state : 세션 히스토리에 넣을 상태 객체 (잘 모르겠으니 null을 넣어주자.) title : 브라우저의 제목 (필요 없을 시 null 사용) url : 변경할 브라우저 URL 예제를 통해 접근해보자. ▷ 예제1) history.pushState() history.pushState(null, null, 'record') ▷ 결과 세번째 매개변수에 넣어준 url로 변경된 것을 확인할 수 있다. 사용하기에 앞서 알아둬야할 것은 HTML5에서 적용된 .. 2021. 8. 25. [JavaScript] obj.hasOwnProperty() - 객체가 특정 프로퍼티를 가지고 있는지 확인하기 (ft. Object.prototype.hasOwnProperty()) 객체가 특정 키를 가지고 있는지 확인하는 Object.prototype.hasOwnProperty() 메서드에 대해 알아보자. ▷ 구문 obj.hasOwnProperty(prop) prop: 확인 하고자 하는 프로퍼티 명 예제를 통해 접근해보자. ▷ 예제1) Object.prototype.hasOwnProperty() var obj = {}; obj.mine = 42; console.log(obj.hasOwnProperty('mine')); // true console.log(obj.hasOwnProperty('it')); // false 예제에서 보는것 처럼 해당 객체의 프로퍼티의 존재 유무를 판단하는 것이다, 프로퍼티의 값이 무엇이든 프로퍼티가 존재하기만 하면 true를 반환하고 존재하지 않을경우 f.. 2021. 8. 18. [JavaScript] slice() - 배열 및 문자열 자르기 (ft. 얕은 복사) 스크립트를 사용하는 중에 배열 또는 문자열을 잘라서 사용하는 경우가 많은데 배열 과 문자열을 자르는데 사용하는 동일한 메서드 slice()에 대해 알아보자. 내부적으로는 각각 String.prototype.slice() 와 Array.prototype.slice()로 서로 다르지만 직접 사용을 함에는 같은 방식을 사용한다. ▷ 구문 .slice(beginIndex [, endIndex]) 문자열과 배열 둘다 인덱스를 가지는데 그 인덱스를 가지고 잘라서 사용이 가능하다. 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.slice() var str = 'it is mine-it-record tistory blog'; console.log(str.slice(21)); // "tisto.. 2021. 8. 7. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
