[항해99]JS 문법정리 - 3

[[[각종 ES6 문법 소개]]]

let, const

var와 다르게 재선언 불가.

let : 재할당 가능

const: 재할당도 불가능

 

arrow function

function, return, 괄호, 중괄호 생략 가능.

// 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 ? "참" : "거짓") // 거짓

 

구조분해할당 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,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4
//여기서 4는 초기값이고, value4가 존재하는 경우 4는 없어지고 value4가 들어감.



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

 

{객체}의 구조분해할당 (새로운 이름으로 할당 까지)

// 객체의 경우 키가 중요.


let user = {name: "nbc", age: 30};

let {name, age} = user;

let{name, age} = {name: "nbc", age: 30}

console.log(name); // "nbc" 👈  (string)
console.log(age); // 30 👈    (number)


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

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





// 새로운 이름으로 할당😱😱😱😱😱😱😱

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

//⭐️⭐️⭐️현재 변수 이름 : 변경할 이름 = parameter 
let {name: newName, age: newAge} = {name: "nbc", age: 30};




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~

해당 키값을 이미 변수로 선언을 했다면, 간단하게 변수명만으로 정의하고, 해당 변수의 값을 value값으로 할당할 수 있다.🥲

 

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

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

const name = 'mike';
const age = 21;
console.log({name,age})
// result
{name : 'mike', age:21}

 

전개구문          🟢 🟢 🟢            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

const copy = {...object} 이런식으로 객체의 1단계 깊은복사 가능.

 

 

나머지 매개변수      , 🔴🔴🔴 args            rest parameter

, ...args

갯수 모를때 이렇게 써서 지정 기능함!

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`

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)

 

 

[[[일급 객체로서의 함수]]]

일급객체로서의 함수는 매개변수로 전달, return으로 출력이 될수 있다.

매우 유연하게 사용이 가능하다.

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

const sayHello = function(){
	console.log('hello~');
};
    
sayHello();

2) 함수를 인자로 다른 함수에 전달 가능

2-1) 콜백함수: 함수의 매개변수로 쓰이는 함수.

2-2) 고차함수: 함수를 인자로 받거나 return하는 함수

 

function callFunction(func) {    // 고차함수 선언
  func();
}

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

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

3) 함수를 반환

note

함수는 다른 함수에서 반환될 수 있습니다.

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

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

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

const addFive = createAdder(5); 
// const addFive = function (X) { return x + 5 };


console.log(addFive(10));

//addFive(10) = function(10) {return 10 + 5};
//15

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

const person = {
    name: 'john',
    age: 12,
    isMarried: false,
    sayHello: function () {
        console.log(`Hello! my name is ${this.name}!!`)
    }   //여기서 this 는 person
}

person.sayHello();  //Hello! my name is john!!

 

화살표 함수는 this를 바인딩하지 않는다!!!!! 주의! 3주차에 다룰 예정임.

const person = {
    name: 'john',
    age: 12,
    isMarried: false,
    sayHello: () => {
        console.log(`Hello! my name is ${this.name}!!`);
    }   //여기서 this 는 person
}

person.sayHello();   //Hello! my name is undefined!!

 

5) 배열의 요소로 함수를 할당

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);
// 2로 곱해주는 함수가 됨.  


const multiplyByThree = multiplyBy(3);
//3으로 곱해주는 함수가 됨.


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

 

 

[[[[Map 과 Set]]]]

다소 부족했던 객체와 배열의 문제점을 보완하기 위해 추가됨.

 

Map

Key-value 페어를 저장. 객체는 key에 문자만 가능했는데, map은 key에 어떤 값도 들어올 수 있다.

이건 key가 정렬된 순서로 저장되기 때문에 가능하다.

• 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 – 요소의 개수를 반환합니다.

 

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

console.log(myMap.keys());	//{ 'one', 'two', 'three' }
console.log(myMap.values());	//{ 1, 2, 3 }
console.log(myMap.entries());	//{ [ 'one', 1 ], [ 'two', 2 ], [ '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


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

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

 

Set

value만 저장. 값 중복이 없음.

 

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

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

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

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

for(const value of mySet){
colsole.log(value)
}​

 

 

 

 

 

 

 

 

 

 

 

 

작성중

 

 

 

 

 

 

/