반응형 javascript92 [JavaScript] 기본 함수 매개변수 (default function parameter) 자바스크립트에서 함수의 매개변수는 기본값이 undefined 였지만ES6에서 이 함수의 매개변수 기본값을 설정해 줄 수 있다. 구문은 다음과 같다. ▷구문function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } 예제를 통해 더 쉽게 접근해보자. 1. 일반적인 함수 매개변수의 기본값function mine(a){ return a;}console.log(mine()); // undefined 위 예제를 보면 함수의 매개변수는 기본적으로 undefined값을 가진다.그래서 매개변수를 넣지 않고 함수를 그냥 실행해 버리면 undefined를 그대로 반환하는것이다. 그래서 이를 방지하기 위해 매개변수에 기본값을 사용하여 미리 방지할 .. 2021. 12. 28. [JavaScript] 템플릿 리터럴(Template Literal) - 백틱(back-tick) ` ES6에서 도입된 템플릿 리터럴(Template Literal)인 문자열 표기법에 대해 알아보자. 템플릿 리터럴은 지금까지 문자열 표현에 흔히 사용해왔던 이중 따음표("") 나 작은 따음표('') 대신 백틱(``)을 사용한다. 템플릿 리터럴을 통해 다양한 기능을 제공하는데, ES5에서의 기존 방식과 백틱을 사용한 비교 예제 코드를 통해 하나씩 알아가보자.1. 백틱(back-tick) 기본 사용법let blog = `mine-it-record`; 우선 기본 사용법에 대해 알아봤는데, 일단 기본적으로 더블쿼터와 싱글쿼터를 이용해 문자열을 선언하는 방식과 동일하다. 2. 줄바꿈 선언 (Multi-line strings)//ES5var str1 = 'string line 1\n' + "string line 2".. 2021. 12. 22. [JavaScript] 화살표 함수(Arrow function)에 대하여 - 2 (this) [ES6] 화살표 함수(Arrow function)에 대하여 - 1 (표현식))를 사용하여 보다 간략한 방법으로 함수 선언을 도와주는 역할" data-og-host="mine-it-record.tistory.com" data-og-source-url="https://mine-it-record.tistory.com/462" data-og-url="https://mine-it-record.tistory.com/462" data-og-image="https://blog.kakaocdn.net/dna/sYGSt/hyMJDJHBkz/AAAAAAAAAAAAAAAAAAAAAAWSNdF5ervY0SXNo3AAmbTQ1LBpS2Uxc1h3TKeF0Ek6/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=40HIsSue50VFyvIOTiNjkOzz%2FBQ%3D 2021. 12. 18. [JavaScript] 화살표 함수(Arrow function)에 대하여 - 1 (표현식) 화살표 함수(Arrow function)는 ES6(ECMAScript6)에서 등장한 개념으로 기존에 함수를 선언할 때 사용하던 function 키워드 대신에 화살표(=>)를 사용하여 보다 간략한 방법으로 함수 선언을 도와주는 역할을 한다. 코드를 통해 사용방법에 대해 하나씩 알아가보자.1. 화살표 함수(Arrow function) 기본 문법// es5var plus = function(a, b) { return a + b; }// es6let 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. [JavaScript] 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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
