본문 바로가기
반응형

Language/JavaScript (Modern)27

[ES6+] 모듈 사용하는 방법 (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 {min.. 2021. 12. 31.
[ES6+] 배열 및 객체의 비구조화 할당- 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] = ['.. 2021. 12. 30.
[ES6+] 기본 함수 매개변수 (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.
[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.
[ES6+] 변수 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'; // 변수 중복선언 가능 js.. 2021. 12. 9.
[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.
[ES6+] includes() - 문자열 및 배열에 특정 요소를 포함하고 있는지 판별/확인 하기 스크립트를 사용하는 중에 배열 또는 문자열에서 어떠한 특정 값이 존재하는지 확인해야하는 경우가 생기는데 ES6에서 추가된 includes() 메서드에 대해 알아보고자 한다. 제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며 각각 String.prototype.includes() 와 Array.prototype.includes()를 의미한다. ▷ 구문 .includes( valueToFind[, fromIndex] ) 첫번째 매개변수에는 찾고자 하는 값을 입력하고 (문자열의 경우 대소문자 구분) 두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다. 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.includes() let st.. 2020. 12. 14.
반응형
TOP