반응형 Language/JavaScript94 [JavaScript] 모듈 사용하는 방법 (ft. 내보내기(export)/가져오기(import)) ES6에서 새롭게 지원하는 컴포넌트 정의를 위한 모듈 형태를 사용하기 위해 모듈을 내보내고(export) 가져오는(import) 방법에 대해 알아보자. 우선 모듈을 사용하기 위해서는 script 태그에 type="module" 속성을 추가해 줘야한다.그렇게 되면 해당 자바스크립트 하일은 모듈로서 동작한다. 이 상태로 이제 export 와 import 방법에 대해 예제로 하나하나 알아가보자.1. export (내보내기)1-1. 기본 사용법 (named exports)// common.js// 1) 하나씩 내보내기export function plus (a, b) { return a + b;}// 2) 목록으로 내보내기const minus = (a, b) => a - b;export {minus};con.. 2021. 12. 31. [JavaScript] 배열 및 객체의 비구조화 할당- Destructuring Assignment (ft. 나머지 매개 변수 및 확산 연산자 - Rest parameter and Spread operator) ES6에서 새롭게 추가된 비구조화 할당(Destructuring Assignment)에 대해 알아보자. 비구조화 할당이란? 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다. 각 배열과 객체의 비구조화 할당에 대해 하나씩 알아가보자.1. 배열 비구조화 (Array Destructuring)1-1. 기본 사용법// 기본 문법(비구조화 할당 x)const colorList = ['red', 'yellow', 'green'];const red = colorList[0];const yellow = colorList[1];const green = colorList[2];// 비구조화 할당 문법const [red, yellow, green] = ['red', 'ye.. 2021. 12. 30. [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://scrap.kakaocdn.net/dn/sYGSt/hyMJDJHBkz/DCS902mXJo3Zte9PurDnwk/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaocdn.net/dn/qH6.. 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] 변수 let, const 그리고 var 에 대하여 (ft. scope, hoisting) 자바스크립트의 변수 선언 방식 var 와 ES6(ECMAScript6)에서 등장한 let 과 const에 대해 알아보자. 위에서 언급한 세가지의 변수 선언 방식의 차이점에 대해 알기위해서는 변수의 유효범위(scope) 와 호이스팅(hoisting)이라는 녀석들에 대해서도 같이 알아둘 필요가 있다. 그럼 변수선언부터 유효범위 그리고 호이스팅 이라는 녀석까지 하나하나 알아가보도록 하자.1. 변수 선언 방법 (중복 선언, 재할당, 초기화 여부)각 변수(var, let, const) 별로 중복 선언, 재할당, 초기화 여부에 대해 알아보자. 1-1) 중복 선언과 재할당//////// 1. var ////////var jsvar = 'mine';var jsvar = 'it'; // 변수 중복선언 가능jsvar = .. 2021. 12. 9. [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
