JavaScript 문법 종합반 2주차

[ 각종 es6 문법 ]

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었음

ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여

JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선

 

▶ let, const

기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드

• 선언: 변수명을 자바스크립트 엔진에 알리는 것
• 할당: 변수에 값을 저장하는 것(= 할당연산자)

let과 const의 특징

• let: 재할당은 가능하고, 재선언은 불가능
• const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능
• var: 재할당, 재선언, 호이스팅이 됨

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

재할당은 가능하지만 재선언을 하면 오류가 발생

 

 

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

재할당과 재선언 모두 오류가 발생

 

▶ 화살표 함수(Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

 

- this

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해짐

 

▶ 삼항 연산자(ternary operator)

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

 

▶ 구조 분해 할당(Destructuring)

배열[ ]이나 객체{ }의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

▶ 단축 속성명(property shorthand)

객체의 key와 value 값이 같다면, 생략 가능

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

 

▶ 전개 구문(Spread)

배열이나 객체를 전개하는 문법. 구조분해할당과 함께 정말 많이 사용됨

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

 

▶ 나머지 매개변수(rest parameter)

function func (a, b, ...args) {
	console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

 

▶ 템플릿 리터럴(Template literals)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식

백틱(`) 과 ${ }로 표현

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

 

▶ named export vs default export 

default Export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

 

named export

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

 

[ 일급 객체로서의 함수 ]

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 함

그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있음. 일반 객체와 달리 함수는 특별한 능력을 가지고 있음

함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있음

일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
[위키백과]

 

▶ 변수에 함수를 할당

함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있음

변수에 할당된 함수는 나중에 사용할 수 있음

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

.

▶ 함수를 인자로 다른 함수에 전달

함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있음

이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용됨

 

콜백 함수. 그리고, 고차 함수(Higher-Order Function)란?

• 콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수
• 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수(함수를 다루는 함수라고도 함)
  • 정리하면 콜백함수는 고차함수라고도 할 수 있음

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

▶ 함수를 반환

함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있음

이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됨

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

▶ 객체의 프로퍼티로 함수를 할당

함수는 객체의 프로퍼티로 할당될 수 있음. 객체의 메소드로 함수를 호출할 수 있음

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

 

▶ 배열의 요소로 함수를 할당

함수는 배열의 요소로 할당될 수 있음. 이것은 함수를 배열에서 사용할 수 있게 함

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

 

함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있음

이것은 등 다양한 프로그래밍 패턴에서 사용됨

함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줌

 

함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미

새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있음

이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워짐

 

function multiplyBy(num) {
  return function(x) {
    return x * num;
  }
}

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

const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력

 

함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줌

함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에

코드를 더 간결하고 모듈화된 형태로 작성할 수 있음

 

[ Map과 Set ]

Map과 Set 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다

효율적으로 처리할 수 있기 때문에 많이 각광받고 있음

 

▶ Map

Map은 키(key) - 값(value) 쌍을 저장하는 객체와 비슷함

Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있있음

Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없음

 

Map을 사용하여 할 수 있는 작업수행

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

Map에 주요 메서드와 프로퍼티

• new Map() – 맵을 만듬
• map.set(key, value) – key를 이용해 value를 저장
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key) – key에 해당하는 값을 삭제
• map.clear() – 맵 안의 모든 요소를 제거
• map.size – 요소의 개수를 반환

 

· Map 생성 및 사용

새로운 Map을 만들려면 Map() 생성자를 사용

const myMap = new Map();

 

Map에 값을 추가하려면 set() 메소드를 사용

myMap.set('key', 'value');

 

Map에서 값을 검색하려면 get() 메소드를 사용

console.log(myMap.get('key')); // 'value' 출력

 

· Map의 반복

Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있음

 

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

- for ...of 반복문

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문

 for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 함(직접 명시 가능)

 

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

iterator는 반복자라는 말

요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해하면 됨

아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문

 

· Map의 크기 및 존재 여부 확인

Map의 크기를 확인하려면 size 속성을 사용

console.log(myMap.size); // 3 출력

 

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용

console.log(myMap.has('two')); // true 출력

 

▶ Set

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조

Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조

Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있음

Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있음

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

· Set 생성 및 사용

새로운 Set을 만들려면 Set()생성자를 사용

const mySet = new Set();

 

이제 Set에 값을 추가하려면 add() 메소드를 사용

mySet.add('value1');
mySet.add('value2');

 

Set에서 값을 검색하려면 has() 메소드를 사용

console.log(mySet.has('value1')); // true 출력

 

· Set의 반복

Set에서는 values() 메소드를 사용하여 값을 반복할 수 있음

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

 

· Set의 크기 및 존재 여부 확인

Set의 크기를 확인하려면 size 속성을 사용

console.log(mySet.size); // 3 출력

 

특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용

console.log(mySet.has('value2')); // true 출력

 

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조

Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조

Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있음

Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있음