ES6 공부 정리 1

1.shorthand Property names

 

js에서 obj는 항상 key:value로 구성되어있다.

key와 value값이 같다면 아래와 같이 정의할 수 있다.

{
	const ccamang1 = {
    name : "ccamang",
    age : "28"
    };


	const name = "ccamang";
	const age = "28"

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


	const ccamang3 = {
    name,
    age,
    }

}

출력시 ccamang1, ccamang2, ccamang3 은 동일한 내용이 나옴

 

2.Destructuring Assignment

const student = {
  name : 'Lee',
  level : '1'
};

{
  const name = student.name;
  const level = student.level;
  console.log(name, level)
}

{
  const {name, level} = student;
  console.log(name, level);
  
}

{
  const {name:studentName, level:studentLevel} = student;
  console.log(studentName, studentLevel);

}

const animals = ['🐶','🐱'];

{
  const first = animals[0];
  const second = animals[1];
  console.log(first, second);
}

{
  const [first, second] = animals;
  console.log(first, second);
}

// obj {}
// array []

3. Spread Syntax

{
  const obj1 = {key : 'key1'};
  const obj2 = {key : 'key2'};
  const array = [obj1, obj2];
  
  //array copy
  const arrayCopy = [...array];
  //하나를 각각 낱개로 들고온것임
  //이렇게 배열을 복사해옴
  
  console.log(array, arrayCopy);
  //동일한 결과물이 추출됨
  
  
  const arrayCopy2 = [...array, {key:'key3'}]
  
  console.log(array, arrayCopy, arrayCopy2)
  
  // 오브젝트를 가리키고 있는 변수는, 실제로 담고있는것이 아닌 메모리 주소를 가지고 있는것
  // 복사되어 온 애들은 주소값만 들고 오기 때문에, 실제로는 동일한 오브젝트를 들고 있어서
  // 만약 obj1의 값을 변경하면 전체값들이 바뀌게 된다
  // Spread연산자는 모두다 하나씩 복사해오는것이 아니라,
  // 주소의 참조값만 들고오기 때문에, 복사해온다고 해도 원래 OBJ변경하면 전체가 변경되니 주의
  
  
  // 배열과 오브젝트 둘다 사용 가능
  
  //obj copy
  const obj3 = {...obj1};
  console.log(obj3);

  //array concatenation 
  const fruits1 = ['🍎','🍌'];
  const fruits2 = ['🥝','🍉'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);
  
  //object merge
  const dog1 = {dog1 : '🐕'};
  const dog2 = {dog2 : '🐶'};
  const dog = {...dog1, ...dog2};
  console.log(dog);
  
  // 주의할 점은 키가 동일한 연산자를 들고오면 뒤에 오는 애가 앞의 애를 겹쳐버린다
  // 마지막에 오는 key값으로 설정된다
}

 

3.Default parameters

{
  function printmessage(message){
    console.log(message);
    
  }
  
  printMessage('hello');
  printMessage();
  //undifined출력

  
  // default값을 주기 위해서 원래는 아래와 같이 사용했었음.
  
  {
  function printmessage(message){
      if(message == null){
        message = 'default message'
      }
      
    console.log(message);
    
  }
  
  printMessage('hello');
  printMessage();
  //default message 출력
    
    
// 이제 이럴 필요 없다.
    
 {
  function printMessage(message = 'default message'){
    console.log(message);
  }
   printMessage('hello');
   printMessage();
   //default message 출력
 }

 

4.Ternary Operator

{
  const isCat = true;
  
  {
    let component;
    if(isCat){
      component = '🐱';
    } else {
      component = '🐶';
    }
    console.log(component);
  }
}

{
  const component = isCat ? '🐱' : '🐶';
  console.log(component);
  console.log(isCat ? '🐱' : '🐶');
}

5. Template Literals

{
  const weather = '🌞';
  const temparature = '16F';
  
  console.log(
  'Today is ' + weather + 'and temp is ' + temparature
  );
  
  console.log(`Today is ${weather} and temp is ${temparature}`)
}

-- ES6

ES11 부터 보고 나머지 정리하기

참고자료: https://www.youtube.com/watch?v=36HrZHzPeuY