JS let, const, var / 화살표함수 / 구조분해할당

1. let, const

이전에는  var 라는 키워드로만 변수를 선언할 수 있었다. 

다른점이 무었일까?

var	재선언 O 재할당 O	var a = 10; var a = 12; -------------- var a = 10;  a = 12;
let	재할당 O 한번 선언하고 할당한 그 변수에 다시 할당 할 수 있는 변수를 선언할 때 많이 쓴다.	var a = 10;  a = 12;
const	재할당 X 한번 선언하고 할당한 그 변수에 다시 할당 할 수 없는 상수를 선언할 때에 많이 쓴다.

 

 

2. arrow function (화살표 함수)

1) 기본 함수 선언문

function add ( ) {

 

}

 

2) 기본함수 표현식

let add = function ( ) {

 

} 

 

3)화살표 함수

let add = ( x ) => {

     retrun 1;

}

이때 저 중괄호 안에 내용이 1줄이라면, 

let add = ( x ) => 1;

이렇게 줄일 수 있고, 

 

또 여기서 괄호 안에 내용이 한개라면,

let add = x => 1; 

이렇게 까지 줄일 수 있었다. 

 

 

3. 삼항연산자. 

 

조건 ? true인 경우에 이것 : false인 경우에 이것

 

let y = 20;

let result2 = y < 10 ? "작다" : "크다";

console.log(result2);

 

결과값은 

크다 !! 

왜냐면 지금 저 조건은 false이니까 맨 마지막 거에 해당한다. 

 

4. 구조분해할당 (destructuring) : 배열이나 객체의 속성 하나하나를 떼어서 보여주는 

 

de = not

structuring = 구조

 

1) 배열의 경우

//let [변수이름, 변수이름] = [배열, 배열]

let [value1, value2] = [1, "new"]

 

console.log(value1);   <---- 1

console.log(value2);  <---- new

 

이처럼 각 변수에 분해된 배열의 요소들이 순서대로 할당된 것을 확인 할 수 있다. 

-----------------------------------------

다른 예를 살펴보자.

 

let arr = ["v1", "v2", "v3"];    <------  요건 항목을 3개 가지고 있는 배열

let [a, b, c] = arr;   <------ 요건 항목을 3개 가지고 있는 변수.

 

여기에 arr을 같다고 했으니, 이 말은 아래와 같다. 

let [a, b, c] = ["v1", "v2", "v3"];

 

그래서 console.log(a); 부터 (c) 까지 찍어보면,

결과값은 각각

v1

v2

v3

 

 

 

그런데 만약에 변수의 개수와, 할당할 배열의 개수가 다르다면 ???

 

let arr = ["v1", "v2", "v3"]; 

let [a, b, c, d] = arr; 

 

이렇게 되면, d의 값은  undefined 으로 출력된다. 

 

그래서 우리는 설정값을 쥐어줄 수 있는데,

 

let arr = ["v1", "v2", "v3"];

let [a, b, c, d = 4] = arr; 

 

이렇게 하면, 만약에 d의 값은  undefined 일 경우에, 4로 출력 해주라는 명령어 이다.  

 

 

 

2) 객체인 경우 

배열인 경우 순서가 중요했듯이, 객체인 경우에서는 key 가 중요하다. 

 

let user = {

     name : "nbc",

     age: 30,

};

 

이런 객체가 있는데, 구조분해할당 하고싶다면,

아래처럼 객체모양으로 변수를  적어준 후에, 구조분해할당 하고싶은 객체의 이름을  = 하고 적어주면,

 

let {name, age} = user;

 

요런 모양새가 된다.

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

그럼

console.log(name)

console.log(age)해보면,

"nbc"   <----  string 타입

30  <--- number 타입

 

이렇게 해당 변수로 할당되어 값이 나온다. 

 

 

만약 새로운 이름으로 객체를 구조분해할당 하고 싶다면,

아래처럼 해주면 된다. 

 

let user = {

     name: "nbc"

     age: 30

};

 

let {

     name : newName,

     age : newAge

} = user

 

그럼 콘솔로 출력해 보면

console.log(newName);

console.log(newAge);

 

결과값은 

nbc

30

 

이 말은 newName 이라는 변수 값에 nbc 가 할당되었고,

newAge 라는 변수 값에 30이 할당되었다는 말이다. 

 

 

그런데 만약에 변수의 개수와, 할당할 배열의 개수가 다르다면 ???

 

아까 배열에서 구조분해할당 한 경우와 같이 값은 undefined 로 출력되며,

초기값을 설정할 수 있다. 

 

let user = {

     name: "nbc"

     age: 30

};

 

let {name , age, birthday = "today" } = user;

 

초기값은 말그대로 초기값이기 때문에

undefined일 때에만 작용하고, 

값이 주어지면 그 값이 적용된다.