ES6 문법 정리

cleanUrl: /ES6-문법-정리
floatFirstTOC: left

목차

2.1. ES6

2.1.1. const, let ⭐⭐

if (true) {
	var x = 3;
}
console.log(x); // 3

if (true) {
	const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

2.1.1.1 호이스팅 ⭐

console.log(a); // undefined
var a = 10;
console.log(a); // 10

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

2.1.1.2 일시적 사각지대(Temporal Dead Zone, TDZ) ⭐

console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
const a = 10;
console.log(a); // 10

let age = 28;

function showAge() {
	console.log(age); // // Uncaught ReferenceError: Cannot access 'age' before initialization
	let age = 20; // ReferenceError
}

showAge();

2.1.1.3 const와 let의 차이

const a = 0;
a = 1; // Uncaught TypeError: Assignment to constant variable

let b = 0;
b = 1; // 1

const c; // Uncaught SyntaxError: Missing initializer in const declaration

2.1.2. 템플릿 문자열

var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 + ' 더하기 '  + num2 + '는 \'' + result + '\'';
console.log(string1); // 1 더하기 2는 '3'

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 ' ${result2}'`;
console.log(string2); // 1 더하기 2는 '3'

2.1.3 객체 리터럴 ⭐⭐

2.1.3.1 객체

2.1.3.2 객체 생성 방법

객체 리터럴

Object 생성자 함수

생성자 함수

Object.create 메서드

클래스(ES6)

2.1.3.3 객체 리터럴

let myObject = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

let person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old`);
  },
  greeting: function() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

2.1.3.4 프로퍼티 접근

• 마침표 표기법
• 마침표(.)를 통해 접근하는 방법으로, person.name, person.age 와 같이 접근할 수 있다.

• 대괄호 표기법
• 대괄호([])를 통해 접근하는 방식으로, persone['name'], persone['age'] 와 같이 접근한다.
• 대괄호를 써서 접근할 경우 따옴표로 감싸주지 않으면 name이란 변수의 값으로 인식하기 때문에 꼭 감싸주어야 한다.

2.1.3.5 프로퍼티 값 갱신 & 생성 & 삭제

• 갱신
• 이미 존재하는 property의 값을 수정하면 갱신된다.
• person.name = 'Brown'과 같이 값을 갱신할 수 있다.

• 생성
• 존재하지 않는 property의 값을 할당하면 프로퍼티가 동적으로 생성된다.
• person.address = 'Seoul'처럼 새로운 property를 할당할 수 있다.

• 삭제
• 삭제하고자 하는 property를 delete 키워드를 붙여 사용한다.
• 없는 property에 접근했을 시에 에러없이 무시된다.
• delete person.age와 같이 삭제 가능하다.

2.1.3.6 ES6 객체 리터럴

var sayNode = function() {
  console.log('Node');
};
var es = 'ES';


var oldObject = {
  sayJS: function() {
    console.log('JS');
  },
  sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';
oldObject.sayNode(); // Node
oldObject.sayJS(); // JS
console.log(oldObject.ES6); // Fantastic

const newObject = {
  sayJS() {
    console.log('JS');
  },
  sayNode,
  [es + 6]: 'Fantastic',
};
newObject.sayNode(); // Node
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic

{ name: name, age: age } // ES5
{ name, age } // ES2015

2.1.4 화살표 함수

function add1(x, y) {
  return x + y;
}

const add2 = (x, y) => {
  return x + y;
};

const add3 = (x, y) => x + y;

const add4 = (x, y) => (x + y);

function not1(x) {
  return !x;
}

const not2 = x => !x;

var relationship1 = {
  name: 'zero',
  friends: ['nero', 'hero', 'xero'],
  logFriends: function () {
    var that = this; // relationship1을 가리키는 this를 that에 저장
    this.friends.forEach(function (friend) {
      console.log(that.name, friend);
    });
  },
};
relationship1.logFriends();

const relationship2 = {
  name: 'zero',
  friends: ['nero', 'hero', 'xero'],
  logFriends() {
    this.friends.forEach(friend => {
      console.log(this.name, friend);
    });
  },
};
relationship2.logFriends();

2.1.5. 구조 분해 할당

2.1.5.1 배열 구조 분해

const fruits = ["apple", "banana", "cherry"];

// 구조 분해 할당
const [first, second, third] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(third);  // "cherry"

const [first, , third] = fruits;
console.log(first);  // "apple"
console.log(third);  // "cherry"

const [a, b, c = "default"] = ["x", "y"];
console.log(c); // "default"

2.1.5.2 객체 구조 분해

const user = { name: "John", age: 25, country: "USA" };

// 구조 분해 할당
const { name, age, country } = user;

console.log(name);    // "John"
console.log(age);     // 25
console.log(country); // "USA"

const { name: userName, age: userAge } = user;
console.log(userName); // "John"
console.log(userAge);  // 25

const { name, gender = "unknown" } = user;
console.log(gender); // "unknown"

2.1.5.3 실제 사용 사례

1. API 응답 처리

const response = { data: { user: { id: 1, name: "John" } } };
const { data: { user: { name } } } = response;
console.log(name); // "John"

2. React의 props 처리

function UserProfile({ name, age }) {
  return <div>{name} is {age} years old.</div>;
}

3. 옵션 기본값 설정

function setup({ host = "localhost", port = 8080 } = {}) {
  console.log(`Connecting to ${host}:${port}`);
}

setup({ host: "example.com" }); // "Connecting to example.com:8080"

 

2.1.6 클래스

2.1.6.1 프로토타입 객체

const Hello = function(name) {
  this.name = name;
}

Hello['name'] = 'hello'

// Hello에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다.
console.log(Hello.hasOwnProperty('name')); // true

console.dir(Hello);

hello.toString(); // [Object object]

2.1.6.2 프로토타입 접근하기

function Hello(name) {
  this.name = name;
}
const hello = new Hello('hello');
Object.getPrototypeOf(hello) === Hello.prototype; // true

2.1.6.3 네이티브 객체 프로토타입

const arr = [1,2,3,4,5];
console.log(Object.getPrototypeOf(arr))  //Array prototype
const str = "Hello world!";
console.log(Object.getPrototypeOf(str)) //String prototype
const date = new Date();
console.log(Object.getPrototypeOf(date)) //Date prototype

2.1.6.4 프로토타입 체인

const obj = {hello: 'world'};
const str = 'hello'
Object.prototype.hi = function() {console.log('hi')};
obj.hi(); // hi
str.hi(); // hi

const num = 55;
num.push // undefined;
num.push() // Uncaught TypeError: num.push is not a function
Object.prototype.push = function() {return this + 1};
num.push() // 56;

2.1.6.5 프로토타입의 이점

• 메모리 효율성
• 자바스크립트에서 모든 객체는 프로토타입을 공유한다.
• 객체 자체가 스스로 메소드와 속성을 모두 가지는 대신 여러 객체가 동일한 프로토타입을 공유하도록하고 이를 사용하면 메모리를 효율적으로 사용할 수 있다.

• 객체지향 (스러움)
• 프로토타입을 통해 클래스에서 상속해 사용하는 것 처럼 다른 객체로부터의 속성과 메소드를 사용할 수 있다.
• 프로토타입 체인을 통해 가능한 것이며 이를 통해 코드 재사용이 가능해진다.

• 생산성
• 프로토타입을 통해 동일한 속성, 동작이 필요한 여러 객체들마다 이를 직접 선언하고 개발할 필요 없이 프로토타입을 이용해 관리할 수 있다.

Reference

Node.js — Run JavaScript Everywhere

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

더북(TheBook)Node.js 교과서 개정 3판

Node.js 교과서 개정 3판

더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.

더북(TheBook)

호이스팅(hoisting)_var의 문제점

호이스팅(hoisting)_var의 문제점

호이스팅 정의, var의 문제점, const와 let의 호이스팅

📖 객체 리터럴

📖 객체 리터럴

객체 생성 방법중 하나인 객체리터럴에 대해 알아보자!

MDN Web DocsJavaScript 객체 기본 - Web 개발 학습하기 | MDN

JavaScript 객체 기본 - Web 개발 학습하기 | MDN

이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 사실을 다시 한번 복습할 것입니다.

MDN Web Docs

NextreesoftJavaScript : 프로토타입(prototype) 이해

JavaScript : 프로토타입(prototype) 이해

JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 크게 두 가지로

Nextreesoft

PoiemaWebPoiemaWeb

PoiemaWeb

웹 프로그래밍 튜토리얼

PoiemaWeb

[Javascript] Prototype 기본 이해하기

[Javascript] Prototype 기본 이해하기

Javascript 프로토타입? 클래스 기반 언어에서는 클래스 내부에 모든 속성과 메소드가 정의되어있다. 해당 클래스를 기반으로한 객체가 인스턴스로 생성되면 이 객체는 클래스 내부에 정의되어있는 속성과 메소드에 접근하여 사용할 수 있는 형태이다. 프로토타입은 이런

이전 글

노드의 핵심 개념과 이벤트 루프 이해하기

다음 글