2021/02/26 검색 결과

해당 글 8건

해체할당(구조분해할당, 디스트럭쳐링)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. destructuring assignment는 한 마디로 정의하기 어렵다고 합니다. 이 용어에 대한 번역이 여전히 뜨거운 감자로 의견이 분분한 가운데 구조분해 할당란 용어에 무게가 실리고 있지만 책마다 제각기 다른 용어들을 사용하고 있기 때문에 유사한 용어들로 쓰이고 있다라는 정도만 숙지하고 의사소통하는 데에 유사한 용어를 사용하면 크게 문제될 것은 없을 것입니다. destructuring assignment 여기서는 위에서 언급한 여러 용어들 중에 혼동을 줄이고자 해체할당이란 용어를 사용해 이 문법에 대해 살펴보도록 하겠습니다. 해체 할당이란? 해체 할당이란 말 그대로 해체하였다가 해체..
JavaScript/ES6+ 2021. 2. 26. 18:46

name property of function

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. 이번 장에서는 함수의 name 프로퍼티와 new.target 이라는 함수의 부가적인 내용들에 대해 알아보도록 하겠습니다. name property of function 함수의 name 프로퍼티는 주로 디버깅하는 경우에 사용하지만 name 프로퍼티를 가지고 디버깅을 할 사항이 거의 없기 때문에 간단히 알아보고 넘아가 보겠습니다. 아래의 다양한 함수 리터럴 표기법에 따른 name 프로퍼티가 어떻게 달라지는지 알아보자. js // 함수 선언문 function a () { } console.log(a.name); // 함수 표현식(변수 b 에 익명함수를 할당) const b = function ..
JavaScript/ES6+ 2021. 2. 26. 18:45

화살표 함수(Arrow function)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. Arrow Function(화살표 함수) 다음의 ES5 의 함수 표현식과 es2015 의 화살표 함수를 비교해 보도록 하자. ES5 js var a = function () { return new Date() }; var b = function (a) { return a * a }; var c = function (a, b) { return a + b }; var d = function (a, b) { console.log( a * b ) } ES6(es2015) JS let a = () => { return new Date() }; let aa = () => new Date(); let..
JavaScript/ES6+ 2021. 2. 26. 18:41

enhanced object functionality

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. 계산된 프로퍼티명, 고정된 프로퍼티 열거 순서 먼저 계산된 프로퍼티명에 대한 내용을 알아보도록 하자. computed property name (계산된 프로퍼티명) 다음의 계산된 프로퍼티명에 대한 예제를 살펴보면서 알아보자. js var className = ' Class'; var obj = {}; obj.'ab cd' = 'AB CD'; // 잘못된 문법 obj['ab cd'] = 'AB CD'; // 올바른 문법 console.log( obj ); obj = { 'ab cd' : 'AB CD' }; // 규칙이 혼동스러운 부분 var obj2 = { 'A' + className : ..
JavaScript/ES6+ 2021. 2. 26. 18:39

shorthand property, concise method

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. es2015 로 넘어오면서 객체를 사용함에 있어 편리성, 간결성과 더불어 다양하게 향상된 기능들을 제공해 주고 있어 이에 대해 알아보고자 합니다. 프로퍼티 축약, 간결한 메소드 먼저 객체의 프로퍼티를 간결하게 작성할 수 있는 방법에 대해 알아보겠습니다. shorthand properties (프로퍼티 축약) 먼저 다음의 ES5 vs ES6 코드를 비교하며 살펴보자. ES5 JS var x = 10; var y = 20; var obj = { x: x, y: y }; ES6(es2015) JS var x = 10; var y = 20; var obj = { x, y }; 위 예제는 각각 똑..
JavaScript/ES6+ 2021. 2. 26. 18:36

default parameter, rest parameter, spread operator

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. es2015 이후 새로운 매개 변수와 함수 그리고 그에 따른 기타 관련 내용에 대한 문법을 알아보도록 하겠습니다. 매개변수 기본값, 나머지 매개변수, 펼치기(전개) 연산자 우선 새로운 매개 변수와 연산자에 대해 알아보고 이후 새로운 함수에 대해 살펴보도록 하겠습니다. default parameter(매개변수 기본값) default parameter 는 함수의 인자로 넘어오는 것에 기본값을 정의해 줄 수 있는 것입니다. 아래의 기존 ES5 와 ES6 가 어떻게 달라졌는지 예제를 통해 살펴보도록 하자. js [ES5] const f = function (x, y, z) { x = x ? x ..
JavaScript/ES6+ 2021. 2. 26. 18:19

template literal & 번외편(배열 메소드)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. ES5 에서는 홑따옴표, 쌍따옴표로 문자열을 표기(var a = 'abc';)하였으나 ES6 에서 또 하나의 템플릿 문자열이 생겼습니다. 이번 장에서는 이 템플릿 문자열에 대해 알아보겠습니다. 템플릿 리터럴(Template Literal) 다음의 코드를 살펴보도록 합니다. js // ES5 var a = 'abc'; var b = "abc"; // ES6(es2015) var c = `abc`; console.log( a === b ); console.log( a === c ); console.log( b === c ); console.log( a === b && b === c ); 위 ..
JavaScript/ES6+ 2021. 2. 26. 18:12

ES6 block-scope & let, const

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. ES6 에서 추가된 블록 스코프(block-scope)와 let, const 에 대해 살펴보도록 하겠습니다. Block Scope ES5 까지는 "자바스크립트에는 블록 스코프가 없다"고 알려져 있었으나 이제는 그렇지 않습니다. ES5 에서는 함수 스코프가 함수에 의해서 생기는 변수의 유효범위였다면 블록 스코프(block-scope)는 무엇일까요? 블록 스코프의 스코프도 알다시피 유효범위를 의미하는데 그렇다면 블록이란? 바로 코드 문단인 { } 즉, 중괄호를 가리킵니다. 다시 말해, { } 에 의해서 생기는 변수의 유효범위, { } 에 의해서 변수의 유효범위가 결정된다고 할 수 있습니다. ..
JavaScript/ES6+ 2021. 2. 26. 16:30