Javascript

ES6

• let(변수), const(상수)

• 15년도 이전 => var

• let 재할당 가능, 재선언 불가능

• const 재할달 불가능, 재선언 불가능

함수 선언 방법

• 1)
  function add() { }

• 2)
  var add = function () { }

화살표 함수

var add = () => { return 1 }

• 화살표 함수 중괄호 안에 return 있으면 중괄호도 생략 가능

var add = () => 1;

삼항연산자

• condition ? true인 경우 : false인 경우

console.log(true ? '참' : '거짓')
console.log(1 === 1 ? '참' : '거짓')

---

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

• de = not
• structure = 구조
• 배열[]이나 개체{}의 속성

배열의 경우

let [value1, vlaue2] = [1, 'new']
console.log('1', value1)
console.log('2', value2)

let arr = ['value1', 'value2', 'value3']
let [a, b, c, d] = arr

console.log(a)
console.log(b)
console.log(c)
console.log(d)

객채인 경우

let {name, age} ={
  name: 'Jhon',
  age: 34,
}

구조분해 할당

let {name1, age1} = {
  name: 'Jhon',
  age: 33,
}

console.log(name) //string
console.log(age) //number 타입으로 변경

새로운 이름으로 할당하는 법

let user ={
  name: 'Jhon',
  age: 34,
}

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

console.log('newName =>', newName)
console.log('newAge =>' , newAge)

---

2. 단축 속성명 : property shorthand

const name = 'gray'
const age = '22'

---

3. object = key(이름) - value(실직적 데이터) pair

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

• 간혹 key와 value값이 같은 경우가 있다. 그 경우엔 한 번만 적으면 된다

const obj = {
 name,
  age,
}
= const obj1 = {name: name,age: age};
 -> 배열같지만 객체이다.

---

4. 전개 구문 : spread operator, distructuring과 함께 가장 많이 쓰이는 Es6 문법

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

//기존의 구조를 벗어나 새로운 구조로 덧입혀야 할 때 쓴다

let arr1 = [1, 2, 3]
let newArr = [...arr1,4]

console.log(arr)
console.log(newArr)

// 배열 뿐 아니라 객체에도 적용된다.
// 객체에 적용

let user = {
  name: 'john',
  age: 21,
}

• 예시

let user2 = {...user}

console.log(user)//{ name: 'john', age: 21 }
console.log(user2)//{ name: 'john', age: 21 }
// 기존에 있던 객체를 중괄호를 풀어 완전히 스프레드(퍼지게)
// 중괄호로 다시 묶을 수 있게 퍼지게 한 것.
// 다만 묶지 않아도 많은 활용도가 있다.
// 결론적으로 핵심은 spread 하는 것이다.

// 나머지 매개변수(reset parameter)
function exampleFunc (a, b, c) {
  console.log(a, b, c) //1, 2, 3
} 

exampleFunc(1, 2, 3)

• 매개 변수의 정확한 개수를 모를 때

function exampleFunc (a, b, c, ...args) {
  console.log(a, b, c)// 1, 2, 3
  console.log(...args)// 빈칸
}
exampleFunc(1 ,2 ,3)

• spread 문법 제거

function exampleFunc (a, b, c, ...args) {
  console.log(a, b, c) //1, 2, 3
  console.log(args)//[4, 5, 6, 7, 8, 9] => 배열 형태로 표시된다.
} 

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

• 템플릿 리터럴(Template Literal)

console.log('hello world')
// 백틱(``) -> js코드, 변수, 연산 들어갈 수 있는데 백틱 사이에 ${}를 넣어주면 된다.
console.log(`Hello worold ${4*3}`)// Helloworld 12

const test = '안녕하세요'
console.log(`Helloworld ${test}`)// Helloworld 안녕하세요

//멀티 라인을 지원한다 -> 사용자가 표현할 수 있는 편리성을 제공
console.log(`hello my name is java
 my world
      good to see you again`)

---

5. 일급 객체(first-class Object)로서의 함수

• 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체(중요!)

• 매우 유연하게 사용할 수 있다.

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

• 함수가 마치 값으로 취급된다
• 함수가 나중에 사용될 수 있도록 조치가 됐다.
  const sayHello = function() { console.log('hello') }

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

• 콜백함수 : 매개변수로써 쓰이는 함수
• 고차함수 : 함수를 인자로 받거나 return하는 함수

function call (func) {
  // 매개변수로 받은 변수가 사실, 함수이다
  func();
}

const sayHi = function() {
  console.log('Hi')//Hi
};

call(sayHi);
// func로 sayHi로 저장된 함수가 전달된다.

5-3) 함수를 반환할 수 있다.

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

const add5 = create(5)
// create(5) = function(x) {return x + 5}
console.log(add5(10))//15

• return을 함수로 할 수 있다 = 함수가 일급객체이기 때문

• 일급 객체로써의 함수

  const person = {
    name: "Horn",
    age: 12,
    isMarried: false,
    sayHello: function () {
      console.log("my name is " + this.name);
      // 여기서 this는 person이 된다.
      console.log(`my name is ${this.name}`);
    },