[0617] 자바 웹 개발 과정🌞

Set

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.

let set = new Set();
set.add(5);
set.add(5);
set.add(5);
set.add(6);

console.log(set.size); // 2, 중복값 제거

let arr = [2, 3, 4, 2, 1, 2, 4, 3, 5, 6, 12];
let lotto = new Set(arr);
console.log(lotto.size); // 7, 중복값 제거

Set 객체 값 나열하기

1. forEach, for-in

let arr = [2, 3, 4, 2, 1, 2, 4, 3, 5, 6, 12];
let lotto = new Set(arr);
console.log(lotto.size); // 7

// 전체를 나열하는 서비스
// 1. foreach: 원래 지원되던 과거의 방법
// -> for-in: 키를 뽑아주는 제어 구조
lotto.forEach(function(v, k, s) { // s: lotto, 키와 값을 뽑아낸 원본
    console.log(`k:${k}, v:${v}`);
})

for(let key in set) {
    console.log(key);
} // 결과 출력 안됨 - ES6에 추가된 for-of 반복문을 통해서 set의 키와 값을 뽑아낼 수 있음

2. for-of

// 2. iterator: es6에서부터 지원하는 새로운 방법
// -> for-of: 값을 뽑아주는 제어 구조
for(let v of arr) {
    console.log(v);
}

Map

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있다.

값의 열거 방법

1. Map.prototype.values()

let exam = new Map();
exam.set("kor", 10);
exam.set("eng", 20);
exam.set("math", 30);

for(let v of exam.values()) {// key 뽑아내기
    console.log(v); // key를 가지고 값 꺼내기
}

2. Map.prototype.keys()

// iterator는 for in문 사용 불가
// for of문으로 iterator 반복하기
for(let k of exam.keys()) { // key 뽑아내기
    console.log(exam.get(k)); // key를 가지고 값 꺼내기
} // 결과: 10, 20, 30

3. Map.prototype.entries()

for(let [k, v] of exam.entries()) {
    console.log(`key: ${k}, values: ${v}`); 
} 

Default Parameters

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

function print(x, y=10) {
    console.log("1번: " + arguments.length); // arguments에는 default 값이 아닌 함수로 전달한 값만 들어간다!
    console.log(`2번: x: ${x}, y:${y}`);
}

print(10); // 1번: 1 / 2번: 10, y:10
print(10,30); // 1번: 2 / 2번: 10, y:30
print(undefined); // 1번: 1 / 2번: undefined, y:10

Arrow Function

기본 구문

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

예제

let arr = [34, 2, 3, 44, 6, 23, 12, 2, 7, 5];
arr.sort((a, b) => a - b); // 순차정렬
console.log(arr); // [2, 2, 3, 5, 6, 7, 12, 23, 34, 44]

let arr1 = [34, 2, 3, 44, 6, 23, 12, 2, 7, 5];
arr1.sort((a, b) => b - a); // 역정렬
console.log(arr1); // [44, 34, 23, 12, 7, 6, 5, 3, 2, 2]

캡슐화

객체를 초기화하는 생성자를 만들어보자!

function Exam(kor, eng, math) {
    this.kor = kor;
    this.eng = eng;
    this.math = math;
}

var exam = new Exam(10, 20, 30);
console.log(exam); // {kor: 10, eng: 20, math: 30}

this

다음 예제는 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조한다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다.

function Exam(kor, eng, math) { 
    // console.log(this); // Exam 객체(아래에서 new Exam()을 통해 객체를 생성해줬기 때문)
    this.kor = kor; 
    this.eng = eng;
    this.math = math;

    this.total() = function() {
        return this.kor+this.eng+this.math;
    }
}

let exam = new Exam(10, 20, 30);
console.log(exam.total()); // 60

Function vs Instance Method

Prototype을 이용한 캡슐화

function Exam() { 
    // console.log(this); // Exam 객체
    this.kor = 0; 
    this.eng = 10;
    this.math = 20;
}

// prototype 정의
Exam.prototype.aa = [1,2,3]; 
Exam.prototype.total = function() {
    return this.kor+this.eng+this.math;    
}

let exam1 = new Exam();
let exam2 = new Exam();
console.log(exam1.total === exam2.total); // true
console.log(exam1.aa === exam2.aa); // true

클래스 정의

예제

클래스 정의 시 생성자를 통해 객체를 초기화해주고 메소드를 통해 모든 Exam 객체에 동일하게 적용되는 Prototype을 정의해줄 수 있다.

class Exam { // Exam 클래스 정의
    constructor(kor, eng, math) { // 생성자
        this.kor = kor;
        this.eng = eng;
        this.math = math;
    }

    total() { // Prototype
        return this.kor+this.eng+this.math;
    }
}

let exam = new Exam(10, 20, 30);
let exam1 = new Exam(1, 2, 3);
console.log(exam.total()); // 60
console.log(exam1.total()); // 6

참고 사이트

MDN