Extended Parameter Handling(함수 파라미터 확장)

먼저 용어에 대해 알아보자
인수, 실행인자(argument) - 함수를 호출하는 입장에서 “넘겨주는 값”
인자, 매개변수(parameter) - “인자를 받은 값”
즉 함수를 선언할 때 “매개변수”를 입력해주고 “인수”로 호출한다!

1. 기본 파라미터 초기값

기존 ES5에서는 함수 내에서 파라미터 체크와 초기화를 했다.

//ES5
function plus(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}
console.log(plus()); //0

위에 보는것과 같이 초기값을 || 뒤에 넣어 함수 내에서 설정을 함

//ES6
function plus(x = 0, y = 0) {
    return x + y;
}
console.log(plus()); //0

ES6는 직접 파라미터에 초기값을 담아, ES5보다 직관적으로 코드를 이해할 수 있다.

2. Spread 연산자(Spread Operator)

Spread 연산자는 ...로 작성하며 배열을 다른 배열의 내부에 삽입할 때 사용한다.

//ES5
var arr = [1, 2];
console.log(arr.concat([3, 4])); // [1, 2, 3, 4]
//ES6
let arr = [1, 2];
console.log([...arr, 3, 4]); //[1, 2, 3, 4]

3. Rest 파라미터

우선 ES5와 ES6을 비교하기 전에 먼저 알아야 하는 내용들을 알아보자.

ES5에서는 인자의 개수를 알 수 없을 때 arguments 객체로 인자값을 확인한다.
이는 호출시 전달된 인수들의 정보를 배열의 형태로 담고있는 객체로 함수 내부에서 지역변수처럼 사용됨.

function check() {
    console.log(arguments)
}
check("a", "b", "c"); // { "0": "a", "1": "b", "2": "c"}

이러한 유사배열객체(array-like object)를 배열로 바꾸기 위해 call 메서드를 사용한다.

function check() {
    var arr = Array.prototype.slice.call(arguments);
    console.log(arr);
}
check(1, 2, 3); //[1, 2, 3]

위의 코드를 분석해보면 call로 내용을 받아 하나하나 잘라서(slice) 배열로 만들겠다는 코드이다.

이제 위에서 익힌 내용을 기반으로 ES5와 ES6를 비교해보자.

// ES5
function sum() {
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur) {
    return pre + cur;
  });
}
console.log(sum(1, 2, 3, 4, 5));
// ES6
function sum(...args) {
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5));

참고: Rest parameter


내용이 부족함 / 추가 예정


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
  1. 2017.04.30 19:12

    비밀댓글입니다

Class(클래스)

Class란?

객체지향 언어에서 핵심이 되는 Class! 우리는 왜 클래스를 사용해야 할까?

우선 클래스를 알기 전에 객체지향에 대해 알아야 하는데 짧게 설명하긴 어렵겠지만, 얕은 지식을 뽐내보자면
말그대로 객체지향이란것은 “데이터 하나하나의 고유한 특성들을 각각의 객체로 구분해 놓고, 내용을 구성함에있어 필요한 내용 즉, 각각의 객체를 연결함으로써 구현하는 패턴” 이라고 표현할 수 있을 것 같다.
객체지향에서 코드를 조금더 효율적으로 작성하기 위해서 나온 개념인 클래스는 각각의 객체를 생성하기 이전에 반복되거나 비슷한 코드를 그룹화 할 때 사용을 한다.

이제 JavaScript에 대해 알아보자.
JavaScript는 프로토타입 기반 객체지향 언어이다.
보통 객체지향 언어라 하면 위에서 설명한 클래스 기반인 경우가 많아 다른 언어를 공부했던 사람들은 JavaScript가 낯설게 느껴질 수 있지만,
ES6에 클래스를 생성하는 방법을 추가해 기존에 알던 개념으로 보다 빠르게 이해하고 쉽게 사용할 수 있을 것이다.
(물론 나는 다른 언어를 해본적이 없는 비전공자라 이것도 어렵다ㅋㅎ)
ES6에서도 이전에 없던 새로운 방법으로 클래스를 구현하는 것이 아닌 기존에 알고 있던 함수로 구현을하며,
이는 prototype 기반 패턴의 Syntatic sugar이다.
여기서 Syntatic sugar란 컴퓨터 언어를 사람이 이해하고 쉽게 사용할 수 있도록 구성해 놓은 것이다.

사용 방법

먼저 용어에 대해 알아보면
Class(클래스) - 객체의 특성을 정의
Object(객체) - 클래스의 인스턴스
Instance(인스턴스) - 객체의 실체화
쉽게 자동차에 비유해 이해해 보면
클래스가 자동차이면, 자동차의 종류인 페라리, 람보르기니 등을 객체라 표현하고 즉, 클래스의 인스턴스를 객체라 부르는 것이다.
부디 이해가 되셨으면 좋겠다..

이제 클래스 선언 방법에 대해 알아보자

기존 ES5로 클래스를 선언할 때는 prototype을 이용해 구현을 했음

//ES5
function Box(length, width) {
    this.length = length;
    this.width = width;
}
Box.prototype.calculateArea = function() {
    return this.length * this.width;
}
var box = new Box(2, 2);
box.calculateArea(); //4

과정을 살펴보면 함수를 선언할 때 첫 글자를 대문자로 설정하는데 이를 생성자(constructor) 함수라 하며,
new 키워드로 새로운 객체를 생성할 수 있고, this를 사용해 생성자 함수로 생성될 객체의 속성을 지정한다.

그 후에 prototype 메소드를 사용해 선언한 클래스(Box)에서 새로운 객체로 확장하는데 이런 방식 때문에 자바스크립트를 프로토타입 기반 프로그래밍 언어라 부른다.
프로토타입 사용의 장점은 객체에 같은 메소드로인해 메모리를 낭비하지 않도록 해주는 것이다. 즉 자바스크립트에서 클래스와 같은 의미로 사용을 하는 것이다.
따라서 효율적으로 코드를 짜기 위해서는 새로 만드는 모든 메소드(예제 코드에서는 calculateArea)는 프로토타입 안에 넣어야 한다.

위의 코드에서 calculateArea 메소드를 생성 한 뒤에 box에 원형 객체 Box에 인자를 넣은 값을 담고
box.calculateArea()로 프로토타입에 선언한 메소드를 호출하면 정의한 연산을 거쳐 값이 출력된다.

이제 ES6에서 새로 생긴 클래스를 정의하는 방법을 알아보자

//ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}
let box = new Box(2, 2);
box.calculateArea(); // 4

다른 언어에서 클래스를 생성할 때와 비슷하게 생성을 한다.
class로 새로운 클래스를 선언을 해주고 동시에 속성과 메소드까지 정의를 해주고
호출을 할때는 마찬가지로 new키워드로 새로운 객체를 생성해 메소드를 호출해 결과값을 출력한다.

객체지향에서 핵심 내용인 클래스를 설명했는데 포스팅으로 다시 정리해보려니 까다롭다.
쓰다보니 길어졌는데 아마 완독을 한다면 충분히 도움될 내용임!

작성한 부분중 이해가 안되거나 틀린 내용이 있다면 꼭! 댓글 남겨주시면 감사하겠습니다.


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

Modules(모듈)

모듈이란?

어플리케이션을 구성하는 개별적 요소를 모듈이라 부르며 (.js 확장자의 개별 파일)
기능별로 쪼개져 있어 필요한 기능을 불러다가 프로젝트에 삽입해 사용할 수 있음
이전까지는 없던 모듈을 ES6에서 추가했지만 대부분 브라우저에서 지원하지 않으므로,
Babel이나 TypeScript를 사용해 ES5로 변환해 사용하도록 한다.

ES6 모듈을 내보내고 가져올 때 export, import를 사용한다

export와 import

한가지의 모듈 내에서 선언한 내용을 다른 모듈에서 사용할 수 있게 할 때 export로 내용을 내보낸다.
export는 다음과 같이 사용한다

//num.js
export const random = Math.random();

export function double(x) {
    return 2 * x;
}

위와같이 상수, 함수, 클래스 등 원하는 내용을 export로 내보내며 일일이 써주지 않고 묶어서 내보낼 수도 있다.

const random = Math.random();

function double(x) {
    return 2 * x;
}

export { random, double };

위에서 export로 내보낸 내용을 다른 모듈에서 import로 다음과 같이 불러온다

//main.js
import { random, double } from './num.js';

만약 불러올 모듈이 많다면 한번에 불러올 수도 있다

//main.js
import * as num from './num.js';

이름을 바꿔서 import할 수도 있다.

import { random as ran, double as db } from './num.js';

모듈의 장점은 위의 방법으로 기능마다 모듈로 쪼개놓으면 유지보수의 용이함, 성능 향상 등 보다 편하게 개발할 수 있는 환경을 만들 수 있다.

'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

Template String(템플릿 문자열)

아주 효율적이고 새로운 방법이며 사용하기 쉬움

사용 방법

예제로 설명하는 방법이 이해가 빨라 적어 봄

  1. 변수에 템플릿 문자열 삽입 후 사용 가능

    let story = `Hello, World! I'm "24"`
    console.log(story) // Hello, World! I'm "24" 출력
    

    위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음

  2. 템플릿 문자열 안에 변수 삽입 가능

    const a = "takeU";
    const b = 24;
    

    ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다.

    console.log("Hello " + a + " I'm " + b + " year's old")
    

    보는것과 같이 띄어쓰기도 일일이 해야하고 +로 이어줘야 하므로 번거롭다.
    하지만 ES6는 아주 편하게 할 수 있음.

    console.log(`Hello ${a} I'm ${b} year's old`)
    

    이처럼 `에 넣어주고 변수는 ${}사이에 넣어주면 위와 같은 결과를 얻을 수 있다.
    1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있다!


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

Arrow function(화살표 함수)

이름 그대로 익명함수를 화살표 형태로 간략하게 쓸 수 있는 새로운 방법

사용 방법

  1. 매개변수가 없을 때

    //ES5
    function() {...}
    
    //ES6
    () => {...}
    
  2. 매개변수가 한 개일 때

    //ES5
    function(x) {
     return x * x
    }
    
    //ES6
    x => x * x
    x => { return x * x}
    
  3. 매개변수가 두 개 이상일 때

    //ES5
    function (x, y) {
     return x + y
    }
    
    //ES6
    (x, y) => x + y
    (x, y) => { return x + y }
    

원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라지는데
Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다.
Arrow function을 사용하면 this를 보다 직관적으로 사용할 수 있다.
(this는 언제봐도 정말 헷갈리는데 나중에 제대로 포스팅 해보려 함)

그냥 함수 표기법으로 this를 바인딩하는 방법이 있지만 따로 작성하지 않고 Arrow function을 쓰는걸로..


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

ES6 let,const 알아보기


let과 const

ES5까지는 var 키워드로 변수를 선언했었는데 이는 중복 선언이 가능하며 Function-level scope를 가짐.
ES6에서는 Block-level scope를 갖는 변수 let과 상수 const를 지원한다

let이란

간단한 예로let의 특징을 알아보자

  1. block-level scope

    let a = 111;
    {
     let a = 222;
     let b = 222;
    }
    console.log(a); // 111
    console.log(b); // b is not defined
    

    위에 설명한 것과 같이 let은 블록 레벨 스코프이므로 a는 블록 밖에서 먼저 선언된 111이란 값이 나오고,
    b는 블록 밖에서는 정의 되지 않은 변수라는 결과가 나옴.

  2. 변수 중복 선언 불가

    var a = 111;
    var a = 222;
    console.log(a); // 222
    
    let a = 111;
    let a = 222; // Error
    

    같은 레벨에서 var은 재설정이 가능하지만, let은 같은 변수를 다시 선언하면 에러가 반환

  3. 호이스팅 불가

    console.log(a); // undefined
    var a;
    
    console.log(b); // error
    let b;
    

    위의 코드와 같이 var로 변수를 선언하기 전에 참조를하면 error가 뜨지 않고 undefined가 출력된다.
    이렇게 변수 선언전에 호출을 했을때 변수가 상단으로 이동하는 것을 호이스팅(hoisting)이라고 함.
    let으로 var과 같이 호이스팅을 기대하고 코드를 작성하면 error가 뜨게된다.

const란

const는 상수를 만드는데 사용함.(이전까지 상수는 그냥 숫자인줄만 알았는데 변하지 않는 값을 상수라 한다고 함..)
const의 특징을 알아보자

  1. block-level scope
    let과 마찬가지로 constblock-level scope이다.

    {
     const a = 11;
     console.log(a); // 11
    }
    console.log(a); // error
    
  2. 재할당 불가능
    let은 변수의 재할당이 가능하지만(재선언 x), const는 불가함

    let a = 111;
    a = 222; // 222가 출력
    const b = 111;
    b = 222; // error
    
  3. 객체의 내용 변경 가능
    객체의 속성이 보호되지 않음. 즉 객체의 내용이 변경 가능함

    const a = {
     name: 'Jung',
     info: {
         phone: 123123
     }
    };
    a.name = 'Lee'; //가능
    console.log(a); // { name: 'Lee', info: { phone: 123123 }}
    

    이때 객체의 내용을 보호하고 싶다면 객체를 선언한 아래에 Object.freeze(a) 메소드를 사용하면 속성이 변하지 않고, console.log(Object.isFrozen(a))로 해당 객체에 freeze 메소드를 선언했는지 알 수 있다.
    하지만 객체안의 객체 즉 뎁스가 2인곳은 바꿀 수 있는데 이마저도 막으려면 Deep freeze를 위한 함수를 만들어야 한다.

  4. 가독성, 유지보수를 위해 사용

    if (x > 3) {
    }
    const MINBUY = 10;
    if (x > MINBUY) {
    }
    

    위의 코드와 같이 쓴다면 코드를 작성하고 나중에 보면 3이 어떤 의미로 사용했나 잊어버리거나 파악하기 힘들 수도 있기 때문에 의미를 부여해 const로 대체한다면 나중에 보고도 쉽게 파악이 가능하다.


잘못된 정보가 있다면 지적해주시면 감사하겠습니다.

앞으로 작성하는 모든 포스팅은 아래 링크를 메인으로 참고해 작성했습니다.
참고 사이트 링크


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

ECMAScript, ES6

자바스크립트란?

자바스크립트(Javascript)는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. 그 후 많은 다른 웹 브라우져들 또한 이 언어를 탑재하기 시작했고, 그 결과로 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어이다. 이 언어로 인해 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침 또는 페이지를 새로 불러오지 않고도 웹과 직접적인 연결이 가능하게 되었다.

ECMAScript가 생긴 이유?

자바스크립트(Javascript)가 넷스케이프(Netscape) 브라우져만이 아니라 다른 웹 브라우져들의 지원까지 받기 시작하면서 다양한 웹 브라우져에서 자바스크립트(Javascript)가 공통되게 잘 작동하기 위해서 표준 규격이 필요해졌는데, 이 때문에, ECMA 국제 기구에서 “ECMAScript Standard”라 불리는 스크립트 표준이 만들어지게 된다. 자바스크립트와 비슷한 뜻으로 많이 들어본 사람들이 있을텐데, Javascript는 ECMAScript와 BOM(Browser Object Model) 와 DOM(Document Object Model)이라는 1개의 코어와, 2개의 모델로 이루어져 있다. ECMAScript 와 Javascript 는 비슷한 뜻으로 자주 쓰이나 작은 차이를 가지고 있다는 걸 알아두자.

ECMAScript란?

ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어로, 웹 환경에서만 호스트 되는 언어가 아니다. 웹 환경은 ECMA 스크립트가 호스트되는 환경들 중 하나일 뿐이다. ECMA 스크립트 호스트 환경은 ECMA 스크립트 실행 환경이 구현되있고, 각각 그 환경에 알맞는 확장성을 가지고 있다. 예를들어 웹 브라우져 환경에서는 BOM(Browser Object Model)과 DOM(Document Object Model)이 그 확장성이 되겠다. 이러한 확장성들은 ECMA 스크립트의 문법과 기능에 맞춰 기능의 확장을 가능게 한다. 자바스크립트의 document 객체가 좋은 예이다.

ES6를 포스팅하는 이유

ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다.
현재 대부분의 자바스크립트의 기준은 ES5로 이루어져있지만 ES6에서 새로운 기술들이 도입되면서 보다 효율적인 코드작성을 위해 개발자들은 공부를 하며 나도 그중 하나가 되기위해 공부하면서 포스팅 해보려한다.


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

+ Recent posts