반응형 Language/JavaScript (Modern)29 [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래스 선언 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 우선 클래스를 선언하는 방식은 매우 간단한데, 위 예제처럼 [ Class 클래스명 ] 구조로 선언해주면 된다. 위에서 클래스를 함수라고 설명했지만 예외가 있는게, 클래스는 호이스팅(Hoisting)이 불가능하기 때문에 반드시 먼저 선언하고 인스턴스를 생성하거나 호출해야한다. 1-2. 클래스 표현식 // unnamed .. 2022. 1. 7. [ES6+] 향상된 객체 리터럴(Enhanced Object property) ES6에서 객체 리터럴 프로퍼티 기능이 향상되었는데, 향상된 객체 릴터럴에 대해 알아보자. 1. 객체 프로퍼티 축약 표현 //ES5 var mine = 'Mine'; var it_record = 'ItRecord' var fn = function(){return 'fn'}; var obj = { mine : mine, it_record : it_record, fn : fn } console.log(obj); // {mine: 'Mine', it_record: 'ItRecord', fn: ƒ} //ES6 let mine = 'Mine'; let it_record = 'ItRecord' let fn = () => 'fn'; const obj = {mine, it_record, fn} console.log(o.. 2022. 1. 3. [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. 이전 1 2 3 4 다음 반응형
