JS 기초문법 공부 1주차(3)

김종화·2023년 5월 24일

JavaScript

목록 보기
3/18

**ES6 문법

(1) let(변수), const(상수) 둘의 차이점 => 한번 선언하고 할당한 값에 다시 재할당을 할 수 있느냐?!
2015년 이전 ==> var 만 사용되었다.

(2) arrow function (화살표 함수)

# function add() {};
var add = function() {};

var add = () => {   
    return 1; 
}
var add = x => 1;

화살표 함수는 ES6 이후 새로운 함수 표현 방법이지만, 기존의 함수 사용이 충분히 익숙해 진 후에 사용해보자

(3) 삼항 연산자
condition ? true인 경우 : false인 경우 // 맨 앞 조건 condition이 true 면 true false면 false 반환

# console.log(true ? '참' : '거짓'); // true가 출력되면 참을 반환
console.log(false ? '참' : '거짓'); // false가 출렫되면 거짓을 반환
console.log(1===1 ? '참' : '거짓');
console.log(1==!1 ? '참' : '거짓');

**구조분배할당 : destructureing(de + structure + ing) => 구조를 찢어서 다시 할당한다.

de = not
structure = 구조
배열이나, 객체의 속성(각각 대괄호, 중괄호 안에 있는 요소 하나하나)을
하나하나 각각 떼어내서 그 값을 변수에 담을 수 있게 해주는 문법

(1) 배열의 경우
let [value1, value2] = [1, 'new']
console.log('1', value1); 1 => value1에 할당
console.log('2', value2)  new => value2에 할당됨

let arr = ['value1', 'value2', 'value3', 'value4']
let [a, b, c, d = 4] = arr; // a,b,c 각각 value 1,2,3에 할당
console.log(a) value 1 출력
console.log(b) value 2 출력
console.log(c) value 3 출력

console.log(d) d는 할당된 value가 없는데 무엇을 출력할까?
아무것도 값이 들어오지 않았다고 인식 JS엔진이 없다라는 것을 표현할 때 1.null 2.undefined
null은 명시적으로 없다라는 것을 표현할 때 사용. d는 undefined 출력
만약 d 값을 세팅해준다면? d = 4, 4를 출력한다. 만약 4를 세팅해주고 value 4를 할당해준다면?
d = value4를 출력 => d = 4 초기값(initial value)이라는 것을 기억하자!

(2) 객체인 경우

let user = {
    name: 'abc',
    age: 30,
};

구조분배할당 오른쪽에 있는 객체의 구조를 분해해서 왼쪽에 있는 name, age라는 각각의 변수에 할당

let {name, age} = {
    name: 'abc',
    age: 30,
}; 
console.log('name =>', name) // 'abc' 출력 객체가 아닌 string 타입으로 구조분해
console.log('age =>', age) // 30 출력 객체가 아닌 number 타입으로 구조분해

새로운 이름으로 할당

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

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

let {name, age, birthday} = user;
console.log(name);
console.log(age);
console.log(birthday);

birthday는 값이 지정되지 않았기 때문에 undefined 출력
배열과 마찬가지로 초기값을 설정해 줄 수 있다

Map
JS -> 객체, 배열을 사용해서 다양하고 복잡한 프로그램을 만들어 왔다
그럼에도, 현실세계를 반영하기는 많이 어려웠다
이를 극복하기 위해 Map, Set 같은 자료구조가 등장했다.

Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리-> 기존의 객체나 배열보다

(1) Map

  • Key / Value
  • Key에 모든 유형의 데이터타입도 다 들어올 수 있다.
  • Map은 키가 정렬된 순서로 저장되기 때문이다.
  • 기능 : 검색, 삭제, 제거, 여부 확인
const myMap = new Map();
myMap.set('key', 'value'); 

myMap.get('key') // myMap.get(key) 값을 호출해서 value 값을 찾는다 get 과 set은 세트메뉴로 묶인다.

console.log(myMap.get('key')) => 로그에 value가 찍힌다

Map을 쓰는 이유 대량데이터를 처리하기 위함. 반복적인 부분이 상당히 중요
반복 method : keys(), values(), entries()
반복 method 들은 iterator(반복자) 속성을 가지고 있다
=> JS 상에서 for ~~ of ~ 를 사용 할수 있다 => 속성을 하나씩 돌면서 데이터를 처리할 수 있다.

0개의 댓글