카테고리 없음

자바 스크립트 2주 1~2강 - Es6문법

8나지 2024. 4. 23. 02:40

es6 ; 2015에 나온 버젼 ; 대규모로 쉽고 효율적으로 나옴

 

let(변수;선언할 때;재할당o, 선언x), const(상수;선언할때;재할당x, 선언x)

     - 둘 차이 : 한 번 선언하고 재할당 할 때 가능한가, 아닌가

var : 2015이전 (선언o, 재할당o)

 

화살표 함수 - 함수 선언하는 방법이 2가지

;1.함수선언문                               /         2.함수 표현식

function add () {                        /         var add = function () {

                                                                  return 1;

}                                                    /        }

                                                               ; 화살표함수(에로우펑션)로 쓴다면

                                                                   var add = (x) => {

                                                                  return 1;

                                                                  } 인데, 리턴1줄 이면 var add = x => 1; 로 가능

 

삼항연산자 - condition ? true인 경우 : false인 경우 

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

console.log(false ? '참' : '거짓');                 거짓

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

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

조건

 

구조분해할당 : de(=not) + structure(=구조) + ing ; destructuring

구조를 반대로 찢어서 각각에 할당함 ; 배열(대괄호안에 있는)이나 객체(중괄호안에 있는)의 속성 

ex) 1. 배열의 경우 ; 순서 중요

let [value1, value2] = [1, "new"]            오른쪽에 있는 스트럭쳐인 1과 new를 분해,

let 변수                     = 배열                        0번째 1은 value1에, 1번째 new는 value2에

console.log("1", value1);                          각각 할당해줘

console.log("2", value2);                         결과값 : 1 1 /다음줄에는 2 new

 

let arr = ["value1", "value2", "value3"];

let [a, b, c] = arr;                                           이면 value1에는 a, 2에는 b 이렇게 들어가는데

let [a, b, c, d] = arr;                                       가 들어온다면? defined (null은 개발자가 없다고 표현할때만)

let [a, b, c, d = 4] = arr;                                기본 값을 4로 준다면, defined대신 4가 뜨고 

 

let arr = ["value1", "value2", "value3", "value4"];

let [a, b, c, d = 4] = arr;                                라면, 기본값이 있음에도 결과는 value값이 나옴

확인은 console.log(a);

console.log(b);               해보기

 

ex) 2. 객체인 경우 ; 키 중요 (배열은 순서중요)

// let user = {

//   name: "nbc",

//   age: 30,

// };

 

let {name, age} = {                                             라면 왼쪽 name이 nbc를

let user = {                                                           age가 30 가짐

   name: "nbc",                                                    ; 구조분해할당에 걸맞음 

   age: 30,                                                           - 오른쪽에 있는 name:"nbc", age:30를 분해해서

};                                                                             왼쪽에 있는 변수에 할당해줌

}

console.log("name => ", name); // string                             nbc

console.log("age => ", age); // number                                30

;name age는ㄴ 더이상 객체가 아니라 일반 string과 number 타입으로 나옴

 

새로운 이름으로 할당

let user = {

  name: "nbc",

  age: 30,

};    

 

let {

     name: newname,

     age: newage

} = user                             user에 위의 객체가 들어옴

-------

즉 

let user = {

  name: "nbc",

  age: 30,

};    

let { name: newname, age: newage} = user   

 

원래는 name에 nbc, age에 30인데 왼쪽처럼 구조분해할당을 이렇게 잡는다면

name으로 가져온 값은 newname에 넣으라는 것 ; 값을 가져오려면

console.log("newname =>", newname);        nbc

console.log("newage =>", age);                      30

 

이것도 객체가 없으면 초기값 잡아주기


단축속성명 : property shorthand ; 이거 이해 못하면 나중에 다른사람이 짠거 해석힘듬

const name = "nbc";

const newage = "30";

 

const obj = {                                        자바스크립트에서 obj는 키벨류        

(키➡️)  name: name,(⬅️벨류)                name은 name이다 라고 변수 세팅  

            age: newage                            벨류 : 실질적 데이터 / 키 그냥 이름 => 오른쪽을 변수로도 사용가능

}                                                             즉, 가끔가다 키, 벨류 이름 겹치면 생략 가능

 

const obj = {

    name,                                                 이렇게

    age: newage   (만약 age:age라면?)   

 

const obj = {name, age};                   이렇게 가능. 배열같지만 객체다 ; 단축속성명 사용

 

전개구문 = spread operator (destructuring 과 함께 가장 많이 사용되는 es6 중 하나)

let arr = [1, 2, 3];       배열을 말그대로 전개

console.log(arr);                       [1, 2, 3]

console.log(...arr); ...                 1, 2, 3. 

='...'이게 전개구문 문법;spread operator ; [1,2,3]을 전개해달라

; 전개구문 문법 언제쓰나? 구조를 벗고 새로운 구조로 덧입힐때

만약 let arr = [1, 2, 3]; 에 4를 더해서 new arr 만들고 싶을 때

let newarr = [...arr] ; 원래있던 arr를 풀러서 다시 배열로 묶어줌

let newarr = [...arr] ;       [1, 2, 3]

 

let arr = [1, 2, 3];

let newarr = [...arr, 4];        이면 [1, 2, 3, 4] 로 됨

 

객체도 가능

let user = {

  name: "nbc",

  age: 30,

};    

 

let user2 = {...user};         {name: 'nbc', age:30}

console.log(user2);          {name: 'nbc', age:30}

 

나머지 매개변수 ; 매개변수의 갯수를 정확히 모를 때 

function examplefunc(a, b, c, ...args) {  추가적으로 더 들어올 수 있음을 명시해줌

  console.log(a, b, c);                            1, 2, 3

  console.log(...args);                            4, 5, 6, 7 (...⬅️스프레드 빼주고 args만 있으면 [4, 5, 6, 7] 배열형태로 나옴

}

examplefunc(1, 2, 3, 4, 5, 6, 7);

 

... 이걸로 명시해줘야만 나머지 매개변수 인식할 수 있음

 

템프릴 리터럴 ; template literal ; 멀티라인 지원 ; 활용범위 넓음

console.log(`hello world`);                ``입력해주면 안에 자바스크립트 내용(변수,연산등) 들어갈 수 있음

예시

console.log(`hello world ${3 + 3}`);      hello world 6

 

const test = "안녕";

console.log(`hello world ${test}`);        hello world 안녕

 

 tip) 기본적 따옴표 기반의 문자열은 멀티라인 지원안함, ``으로는 가능