개발일지 22일차

ES6 문법

- ES6 문법은 자바스크립트 문법중 하나로 2015년에 발표됐다

condition ? expr1 : expr2

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

- 새로운 문법과 기능을 도입하여 효율적으로 코드를 작성할 수 있도록 개선되었다.

화살표함수

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

// ES5
function func() {
	return true
}


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

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

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

삼항연산자

- 조건이 참일때와 거짓일때 각각 출력하는 값을 한줄로 정리 할 수 있다.

condition ? expr1 : expr2

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

구조분해할당

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

// 배열의 경우
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

단축 속성명

 

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

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

전개 구문

- 배열이나 객체를 전개하는 문법, 구조분해할당과 사용한다.

// 배열
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

나머지 매개변수

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

템플릿 리터럴

 - 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식 백틱(```) 과 ${}로 표현한다.

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

`string text`

`string text 
string text line2`

`string text ${value} text`
console.log(`string text ${value} text`)

default export vs named 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)라고한다.

- 함수를 객체처럼 여러가지 방식으로 다를수 있다.

변수에 함수를 할당

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

재사용 가능

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

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

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

- 함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에 다른 함수의 인자로 전달 할 수 있다.

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

- 콜백함수는 어떠한 함수의 매개변수로 쓰이는 함수를 말한다 (함수안의 함수)

function callFunction(func) {
  func();
}

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

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

함수를 반환

- 함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환 할 수 있다. 이것은 함수 팩토리나 클로저를 작성한는데 사용된다.

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)); // 35 출력

이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.

Map과 Set

- map과 set은 배열과 객체로 다루기 힘든 부분들을 극복하기 위해 비교적 최근 등장한 자료구조이다.

- 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있다.

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 생성

const myMap = new Map();

- map에 값 추가

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 반복문은 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); //one, two ,three
}

for (const value of myMap.values()) {
    console.log(value); //1, 2, 3
}

for (const entry of myMap.entries()) {
    console.log(`${entry[0]}: ${entry[1]}`); //one:1 two:2 three:3
}

Map의 크기 및 존재 여부 확인

- map의 크기를 확인하려면 size 속성을 사용한다.

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

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

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

Set

- Set은 고유한 값을 저장하는 자료 구조입니다. Set은 값만 저장하며, 키를 저장하지 않습니다. Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다. 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에서는 valuses() 메소드를 사용하여 값을 반복할 수 있다.

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

for (const value of mySet.values()) {
  console.log(value); // value1 value2 value3
}

set의 크기 및 존재 여부 확인

- set의 크기를 확인하려면 size 속성을 사용한다.

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

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

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

avaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조입니다. Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조입니다. Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다. Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.

 

리뷰: 자바스크립트 기초강의 보다 더 심화된 내용의 강의들을 수강하다보니 이해하는데 어려운 부분도 조금있다고 느껴진다. 하지만 계속 반복하고 손으로 코드를 쳐보고 이해하다보면 어느새 뚫을 거라고 생각한다. 그리고 야구게임도 혼자서 풀지 못했기때문에 프로그래머스 문제들을 반복해서 풀면서 반복문과 조건문에 대한 이해를 조금더 높여야겠다 +함수도.