JavaScript 문법 종합반 - 2주차

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

ES6 문법

자바스크립트 2015년에 발표됨

let const

변수 선언 let (재할당O)
상수 선언 const (재할당X)

ES6 이전에는 var만 존재했음
var은 재선언과 재할당 가능

화살표함수 =>

function add(){

}

var add = function(){

}

var add = () => {

}

var add = () => 1;

var add = x => 1; //매개 변수가 있으면 () 생략가능

삼항 연산자

condition ? true인경우 : false인경우;
console.log(true ? '참' : '거짓');

구조분해할당destructuring(de + structure + ing)

• 배열이나 객체의 속성을 분해해서 변수에 담을수 있음

1. 배열의 경우

let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

☞ 1을 value1에 new를 value2에 할당한다는 뜻

1-2. 배열에서 서로 짝이 안맞는 경우

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

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

☞ 첫번째는 d가 짝이 안맞는 경우 underfined가 출력되지만 두번째처럼 초기값을 d = 4 를 해주면 4가 출력됨. 만약 arr에 value4가 있다면 4보다 value4가 더 우선으로 출력됨

2. 객체인 경우
   let {name, age} = {name: "nbc", age: 30};
   ☞ 키가 서로 각각 할당된다.

let user = {name: "nbc", age: 30};
let {name: newName, age: newAge} = user;
console.log(newName, newAge) //nbc 30

☞ name이라는 변수를 newName에, age라는 변수를 newAge에 할당해줘서
☞ 출력은 newName, newAge에 해야함.

---

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

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

☞ 이 경우도 배열처럼 초기값 설정도 가능함

단축속성명 property shorthand

객체는 key, value, pair로 구성되어있는데, 종종 key와 value가 같은 경우 생략이 가능함

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

const obj = {
	name: name, // key와 value가 같다면?
	age: newAge
}

const obj = {
	name, // 이렇게 생략이 가능함
	age
}

const obj = {name, age} //이렇게 되어있으면 배열이 아닌 객체임. key와 value가 같아서 생략된 것

전개구문(spread operator)

let arr = [1, 2, 3];

let newArr = [...arr, 4]
console.log(arr); // [1, 2, 3]
console.log(newArr); // [1, 2, 3, 4]
...arr을 사용하면 쉽게 추가 할 수 있다. 

나머지 매개변수 ♣♣♣

function exampleFunc (a, b, c, ...args) {
	console.log(...args)
  
}

exampleFunc(1, 2, 3)
exampleFunc(1, 2, 3, 4, 5, 6, 7)

☞ 이 부분은 조금 어렵다. 2회독할때 다시 들어봐야겠다.

템플릿 리터럴(Template literals)

백틱을 사용할 수 있다.
여러줄 출력이 가능하고(멀티라인), 자바스크립트도 넣을 수 있다.

const 입력 = '안녕하세요!';
console.log(`hello world ${입력}`);

console.log(`
이렇게
      멀티라인을
              지원합니다
                    굉장히 유용함

`);

[출력결과]
hello world 안녕하세요!

이렇게
멀티라인을
지원합니다
굉장히 유용함

---

일급 객체로서의 함수

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

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

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

2. 함수를 인자로 다른 함수에 전달할 수 있다.

function callFunction(func) {
  func();
}

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

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

3. 함수를 반환할 수 있다.

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

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

4. 객체를 함수로 할당

const person = {
  name: 'john',
  age: 31,
  isMarried: true,

  //1번째 방법
  sayHello: function () {
  //여기서 this는 {스코프} 기준으로 person을 뜻함.
  console.log(`Hello, My name is ${this.name}`); // 이렇게 출력해도 되고.
  console.log('Hello, My name is ' + this.name); // 이렇게 출력해도 됨
  
  }

  //2번째 방법. 화살표 함수
  //화살표 함수는 바인딩을 하지 않아서 underfined가 출력됨
  sayHello: () => {
    console.log(`Hello, My name is ${this.name}`);
  },

};

person.sayHello();

5. 배열을 함수로 할당

const myArray = [
  function(a, b) {
    return a + b;
  }, // 0번째 요소
  function(a, b) {
    return a - b;
  } // 1번째 요소
];

//console.log()안에 변수명과 인덱스번호, 
//그리고 대입할 매개변수를 넣어야함

//더하기
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); 
/*
function multiplyBy(num) {
  return function(x) {
    return x * 2; [num 대신 2가 대체된것]
  }
}
*/ 
const multiplyByThree = multiplyBy(3);

console.log(multiplyByTwo(10)); // 매개변수 x에 10이 들어가서 10 * 2가 됨

console.log(multiplyByThree(10)); // 매개변수 x에 10이 들어가서 10 * 3이 됨

const result = add(multiplyByTwo(5), multiplyByThree(10)); 
//Two가 5 * 2 해서 10이 나오고 Three가 10 * 3 해서 30 나온값을 add해서 40이 됨

console.log(`최종 수치는 ${result}임`); //결과 출력

☞ 다양하게 출력이 됨

---

Map

복잡한 현실세계를 프로그래밍으로 해결 하기 위해 최근에 등장한 자료구조임
대량의 데이터를 객체나 배열보다 효율적이게 구성하고 검색, 사용하도록 만들어짐

1. 맵 생성과 추가, 검색

const myMap = new Map;
myMap.set('key', 'value');
console.log(myMap.get('key')); // set과 get은 세트라고 보면됨

☞ new map은 생성, map에 값 추가하려면 set 사용, map에 검색하려면 get 사용

2. 맵 반복문 for of

var iterable = [10, 20, 30];

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

☞ iterator는 반복이란 뜻을 가졌음
☞ for of 반복문은 ES6에 새로 추가됨

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

//keys는 key를 출력해줌
for (const key of myMap.keys()) {
  console.log(key);
}

//values는 value를 출력해줌
for (const value of myMap.values()) {
  console.log(value);
}

//entries는 key와 value를 출력해줌
for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

3. 맵의 크기 확인과 존재하는지 확인하기

• 맵의 크기 확인

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

• 맵에 특정 키가 존재하는지 확인

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

Set

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

1. set 생성과 추가, 검색

const mySet = new Set();

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

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

☞ map과 다른점은 .add를 사용하는 것과 key는 없고 value만 저장함
☞ new Set에서 대소문자 구분함...

2. set의 크기 확인과 존재하는지 확인하기

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

//value1이 있는지 있다면 true 없다면 false
console.log(mySet.has('value1')); 

console.log(mySet.size); // set의 크기

3. 반복문 for of

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

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

☞ key가 없기 때문에 value of만 있음

오늘의 한줄평 : 어려우면서도 쉽고, 이해하면서도 이해가 안가기도 하고... 응용력이 떨어지는 것 같다. 정말 열심히 하고 있는데, 더 열심히 해야겠다고 생각함.