본문 바로가기

자유

(26)
객체 리터럴 프로퍼티 기능 확장 객체 리터럴 프로퍼티 기능 확장객체 리터럴 프로퍼티 기능 확장에 대해서 알아보도록 하자.#1 프로퍼티 축약 표현 ES5에서 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성된다.프로퍼티의 값은 변수에 할당된 값일 수도 있다. // ES5 var x = 1, y = 2; var obj = { x: x, y: y }; console.log(obj); // { x: 1, y: 2 } ES6에서는 프로퍼티 값으로 변수를 사용하는 경우에는 프로퍼티 이름을 '생략'할 수 있다.이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. // ES6 let x = 1, y = 2; const obj = { x, y }; console.log(obj); // { x: 1, y: 2 }#2 프로퍼티 이름 조합ES5..
Spread 연산자 Spread 연산자Spread 연산자 ...는 연산자의 대상 배열 또는 이터러블을 개별 요소로 분리해주는 역할을 하는 연산자이다.// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다. ( -> 1, 2, 3 ) console.log(...[1, 2, 3]); // 문지열은 이터러블이다. console.log(...'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log(...new Map([['a', '1'], ['b', '2']])); // ['a', '1'], ['b', '2'] console.log(...new Set([1, 2, 3])); // 1 2 3다음은 이 Spread 연산자를 사용하는 경우에 대해서 살펴보도록 하겠다.#1 함수의..
Rest 파라미터 Rest 파라미터#1 기본 문법Rest 파라미터는 Spread 연산자 (...)를 사용하며 파라미터를 정의한 것이다.Rest 파라미터를 사용하면 인수 리스트를 함수 내부에서 '배열'로 전달받을 수 있다.function boo(...rest) { console.log(Array.isArray(rest)); console.log(rest); // [1, 2, 3, 4, 5] } boo(1, 2, 3, 4, 5);인수는 순차적으로 파라미터와 Rest 파라미터에 할당한다.function boo(param, ...rest) { console.log(param); // 1 console.log(rest); // [2, 3, 4, 5] } boo(1, 2, 3, 4, 5);function goo(param1, par..
화살표 함수 (=>) 화살표 함수#1 화살표 함수 문법 (선언) 함수는 기본적으로 function 키워드를 이용해 작성하지만 화살표 함수는 function 키워드 대신 '=>'를 이용해 간단하게 함수를 선언할 수 있다. 그럼 기본 문법을 알아보자. [ 매개변수 지정 ] () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 불가능 [ 함수 몸체 지정 ] x => { return x * x } // 한 줄 블록 x => x * x /* 함수 전체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 변환됨. 위 표현과 동일 */ () => { return { a: 1 }; }..
ES6 템플릿 리터럴 템플릿 리터럴#1 템플릿 리터럴 사용법, '와 "의 혼용 ES6 는 템플릿 리터럴 이라고 불리는 새로운 문자열 표기법을 도입하였다.템플릿 리터럴은 일반 문자열과는 달리 ' 또는 " 같은 따옴표 대신 백틱 문자 ` 를 사용한다.const tempalte = `템플릿 리터럴은 '작은따옴표'와 "큰따옴표"를 혼용할 수 있다.`; console.log(template);또한 ES6 템플릿 리터럴은 여러 줄에 걸쳐 작성할 수 있으며, 템플릿 리터럴 내에 있는 모든 화이트스페이스는 있는 그대로 적용된다. const template = ` Home News Contact About `; console.log(template);#2 문자열 삽입템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을..
let, const 그리고 블록 레벨 스코프 let, const 그리고 블록 레벨 스코프 #1 ES5의 var, ES6의 let, const ES5에서 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 것이었는데, 이 var 키워드로 선언된 변수는 아래와 같은 특징이 있다.이는 주의를 기울이지 않으면 심각한 문제를 일으킨다.1. 함수 레벨 스코프 : 전역 변수의 남발. for 루프의 초기화 식에서 사용한 변수를 for 루프 외부 또는 전역에서 참조 가능2. var 키워드 생략 허용 : 의도하지 않은 변수의 전역화3. 중복 선언 허용 : 의도하지 않은 변숫값 변경4. 변수 호이스팅 : 변수를 선언하기 전에 참조 가능 대부분의 문제는 전역 변수로 인해 발생하는데, 전역 변수는 사용이 편리하다는 장점이 있지만 불가피한 상황을 제외하고는 사용을 자제..
Node.js 실행과 npm Node.js 실행과 npm 저번 포스팅에서는 Node.js에 대해 간단히 알아보았고 설치를 했었는데 이번 포스팅에서는 Node.js를 실행해보고 npm이라는 것도 알아보겠다. #1 Node.js REPLREPL (입력 수행 출력 반복) 은 Node.js는 물론 대부분의 언어 (Java, Python 등)가 제공하는 가상환경으로, 간단한 코드를 직접 실행해 결과를 확인해 볼 수 있다. 터미널에서 다음과 같은 명령어를 실행해보자 그럼 프롬프트가 '>'로 변경될 것이다. 이 때부터 Node.js 코드를 실행해 볼 수 있다.다음과 같이 입력해보자Node.js 파일을 실행하려면 node 명령어 뒤에 파일명을 입력해주는데, 여기서 파일 확장자인 .js는 생략이 가능하다.Node.js 코드를 실행할 수 있는 REP..
Node.js 소개 및 설치 Node.js가 도대체 뭐야? #1 Node.js Node.js는 웹 개발을 하는 사람들이라면 수 없이 들어봤을 것이다. 필자가 읽고 있는 Angular Essentials라는 책에서는 Node.js를 아래와 같이 정의하고 있다. Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로 주로 '서버 사이드' 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 주로 브라우저 외부 환경에서 JS (JavaScript) 애플리케이션 개발에 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.그리고 Node.js는 자바스크립트를 사용해 개발하며, 프론트엔드와 백엔드에서 자바스크립트를 사용할 수 있다는 '동형성'은 별도의 언어 학습 시간을 단축해주는..