항해99 2일차 TIL

항해99 2일차 TIL

• ES6 (2015년)
• let
• const
• Arrow function
• 삼항 연산자
• 구조 분해 할당
• 일급객체
• Map
• Set

ES6

ECMAScript 2015라고도 하는 ES6(ECMAScript 6)은 JavaScript 언어 사양의 주요 업데이트입니다. 블록 범위 변수(let, const), 화살표 함수, 템플릿 리터럴, 클래스 등을 포함하여 JavaScript에 대한 몇 가지 새로운 기능과 구문 개선 사항을 도입했습니다.

let

let은 자바스크립트에서 변수를 선언하는 키워드입니다. 이전에는 var를 사용했지만, let은 블록 단위 유효 범위(block scope)를 가지기 때문에 코드의 가독성과 유지보수성을 향상시킵니다.

• var키워드와 달리 재사용 할수 없습니다.

let a = 2
let a = 3 // x

const

JavaScript에서 const는 변수를 상수 값으로 선언하는 데 사용되는 키워드입니다. 즉, 값이 변수에 할당되면 다시 할당할 수 없습니다.

const a = 2
a = 2 // 재 할당 x

Arrow function

화살표 함수는 ES6(ECMAScript 2015)에 도입된 JavaScript로 함수를 작성입니다. 기존의 함수 표현식보다 더 간결한 구문을 허용하고 주변 컨텍스트에 대한 암시적 바인딩도 제공합니다.

const add = (a,b) => {
    return a+b
}

삼항 연산자

삼항 연산자(ternary operator)는 세 개의 피연산자를 이용하여 조건식을 평가한 후, 참인 경우와 거짓인 경우에 따라 각기 다른 값을 반환하는 연산자입니다. 일반적으로 if문보다 간결하게 코드를 작성할 수 있습니다.

let x = 12;
result = x === 12 ? "x의 값은 12가 맞습니다" : "x의 값은 12가 아닙니다.";
console.log(result); // x의 값은 12가 맞습니다

구조분해할당

구조 분해 할당(destructuring assignment)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 이를 사용하면 배열이나 객체의 값을 쉽게 추출하여 변수에 할당할 수 있습니다.

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

let arr = ["val1", "val2", "val3"];
let [a, b, c] = arr;

console.log(a); // val1 
console.log(b); // val2
console.log(c); // val3

// 초기값 세팅 가능 ( 세팅 안 할시 undifined 반환 )
let arr = ["val1", "val2"];
let [a, b, c = 4] = arr;

console.log(a); // val1 
console.log(b); // val2
console.log(c); // 4

// 2. 객체일 경우
let user = {
  name: "jeon",
  age: 22,
};

let { name, age } = {
  name: "hong",
  age: 30,
};

console.log(user, typeof user); // { name: 'jeon', age: 22 }
console.log(name, typeof name); // hong string
console.log(age, typeof age); // 30 number

// 새 이름으로 할당
let user = {
  name: "hong",
  age: 30,
};

let { name: newName, age: newAge } = user;

console.log(newName);
console.log(newAge);

단축 속성명

변수명과 속성명이 같은 경우, 변수명을 속성명으로 사용할 수 있는 기능입니다.

// 변환 전
const name = 'John';
const age = 30;

const person = {
  name: name,
  age: age
}

// 변환 후
const name = 'John';
const age = 30;

const person = {
  name,
  age
}

전개 구문 (Spread operator)

배열이나 객체를 다른 배열이나 객체로 확장하거나 병합할 때 유용하게 사용할 수 있는 문법입니다. 전개 구문은 ... 연산자를 사용하여 표현하며, 배열 또는 객체의 요소나 속성을 개별적으로 추출하여 다른 배열이나 객체에 포함시킬 수 있습니다.

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

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 배열 복사하기
const arr4 = [1, 2, 3];
const arr5 = [...arr1]; // [1, 2, 3]

// 다른객체에 추가하기
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

나머지 매개변수 (rest parameter)

함수 정의에서 사용되는 선언으로서, 함수 호출 시 전달된 인수를 배열로 나타낼 수 있게 합니다. 나머지 매개변수는 함수의 마지막 매개변수로 선언되어야 하며, 선언 시 매개변수 이름 앞에 ...를 붙입니다.

// 나머지 매개변수
function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1, 2, 3
  console.log(...args); // 4, 5
  console.log(args); // [4, 5]
}

exampleFunc(1, 2, 3, 4, 5);

템플릿 리터럴 (Temlate Literal)

ES6(ES2015)에서 도입된 문자열 표기법 중 하나로, 기존의 문자열 표기 방식인 따옴표('')나 쌍따옴표("") 대신에 백틱(``)을 이용하여 문자열을 표기하는 방식입니다.

let abc = "Hi";
console.log(`hello world ${abc}`); // hello world Hi!

일급 객체로서의 함수

JavaScript에서 함수는 객체처럼 취급되며 일반적인 값과 같이 변수에 할당되고, 매개변수나 반환값으로 사용될 수 있습니다. 함수를 이용해 추상화를 구현하거나, 함수를 다른 함수의 인자로 전달하여 동적으로 동작을 결정하는 등 유연한 프로그래밍을 가능하게 합니다.

• 변수나 데이터 구조안에 저장할 수 있음
• 매개변수로 전달할 수 있음
• 반환값으로 사용할 수 있음
• 런타임에서 생성 가능함

🔥 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다.

변수에 함수를 할당할 수 있다.

• 함수가 값으로 취급된다.
• 함수가 나중에 사용될 수 있도록 조치

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

함수가 인자로 다른 함수에 전달할 수가 있다. ( 콜백함수 )

function callFunc(func) {
  // 매개변수로 받은 변수가 사실 함수다.
  // 콜백함수: 매개변수로서 쓰이는 함수.
  // 고차함수: 함수를 인자로 받거나 리턴하는 함수.
  func();
}

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

callFunc(sayHello);

함수를 반환할수 있다.

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

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

Map

map()은 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 만듭니다. 기존 배열과는 다른 배열을 반환하며, 반환되는 배열의 요소 개수는 원래 배열과 같습니다.

• 데이터의 구성, 검색. 사용을 효율적으로 정리 → 기존의 객체 또는 배열보다
• Key / Value
• Key에는 어떤 데이터탑입도 다 들어올수 있다.
• Map은 키가 정렬된 순서로 저장되기 때문이다.
• 기능
  • 검색, 삭제, 제거 여부 확인
• Map에서는 Key(), values(), entries() 메서드를 사용하여 키, 값 키-값 쌍을 반복합니다.

// 기본적인 사용
const myMap = new Map();
myMap.set("key", "value");

myMap.get("key");

• iterator가 있어 for of 를 쓸수있다.

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
}

• JavaScript의 Map객체의 entries()메서드는 Map객체 내의 각 요소의 [key, value] 쌍을 담은 새로운 Iterator객체를 반환합니다.

const entries = myMap.entries();

for (const entry of entries) {
  console.log(entry); // 출력: ["key1", "value1"], ["key2", "value2"]
}

• 다양한 프로퍼티들이 존재한다.

console.log(myMap.size); // map의 사이즈를 확인
console.log(myMap.has('two')); // two라는 키가 있는지 검사

Set

• 고유한 값을 저장하는 자료구조다
• 값만 저장한다
• 키를 저장하지 않는다
• 값이 중복되지 않는 유일한 요소로만 구성된다.
• 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set();
mySet.add("val1");
mySet.add("val2");
mySet.add("val3");

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