[패스트캠퍼스] 국비지원 javascript data

1. Preview

• 전역 객체 : 전체 영역에서 사용할 수 있는 객체
• 생성자 : new를 이용하여 하나의 문자 데이터 생성 가능하다.
• 그러나, 쉽게 생성하는 방법 권장한다. 리터럴 방식을 통하여 쉽게 만들 수 있다. (예) 문자열 데이터는 " "를 통하여 만들 수 있다.

 

문서를 참고할 때, properties와 methods를 참고하면 된다. methods에 매개변수와 반환값에 대한 내용들이 있다.

 

js data

// 1. String : "", '', ``
// 2. Number
// 3. Boolean : true, false
// 4. undefined
// 5. null
// 6. Array : []
// 7. Object : {}

 

2. String

리터럴 방식을 이용하여 문자열 데이터를 만드는 것을 권장한다. 

리터럴 자체가 new String() 이라는 인스턴스 제작 가능하기에 편리하고, 직접적으로 메소드 이용 가능하다. (객체는 안됨.)

 

• .length : 공백 포함하면서 길이 세어준다.
• .match() : 정규표현식과 함께 쓰인다. 정규표현식과 매치되는 부분 찾아준다. 정규표현식 배우고 다시 찾아보기.
• .trim() : 모든 공백 및 개행 제거해준다.
• .slice() : Indexing, 시작 인덱스부터 종료 인덱스 직전까지 출력한다. 뒤에서부터 인덱스 시작하면 -1부터 시작한다.
• .replace() : 어떤 문자열을 다른 문자열로 변경한다. 다른 문자열을 빈 공백으로 지정하면 제거도 가능하다.
• .indexOf() : 주어진 값과 일치하는 첫번째 인덱스 반환한다. 없는 경우 -1를 반환한다. Boolean data를 반환하고 싶은 경우에 비교 연산자를 이용하면 된다.

 

 

3. Number and Math

• .toFixed() : 고정 소수점 표기법을 이용하여 나타낸 수를 문자열로 변환한 값, Number To String, 반올림
• parseInt() : 정수로 변환, To Number
• parseFloat() : 소수점으로 변환, To Number

 

parseInt와 parseFloat는 전역 함수이다. (global)

 

• Math.abs() : 절댓값
• Math.min() : 최소값
• Math.max() : 최대값
• Math.ceil() : 올림
• Math.floor() : 내림
• Math.round() : 반올림
• Math.random() : 0 이상 1 미만의 랜덤한 값 

0 ~ 9 사이의 랜덤한 값 출력하는 코드

 

console.log(Math.floor(Math.random()*10))

 

 

 

3. Array

- Zero-Based Numbering

- 배열 안에 있는 각각의 요소들을 element 또는 item 이라고 부른다.

- map과 filter 모두 새로운 데이터를 만들어서 반환한다.

 

• .length : 길이를 반환한다.
• .concat() : 2개의 배열을 합쳐준다. 원본은 수정되지 않는다.
• .forEach() : 각각의 요소들을 출력해준다. 반환 X
• .map() : 각각의 요소 + 주어진 함수 → 새로운 배열 반환해준다. 반환 O
• .map() + 조건 : Boolean Data를 반환하고, 원본 데이터의 크기와 동일하다.
• .filter() :  특정 기준에 따라 필터링된 값만 반환된다. 원본 데이터의 크기와 다를 수도 있다.
• .find() : 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 반환되는 순간, 메소드는 종료된다. 그리고 없으면 undefined를 반환한다.
• .findIndex() : 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 반환되는 순간, 메소드는 종료된다. 그리고 없으면 -1를 반환한다.
• .includes() :  배열이 특정 요소를 포함하고 있는지 판단한다. 있다고 판단하는 순간에 true를 반환하면서 메소드는 종료된다.
• .push() : 배열 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. 원본 데이터가 수정된다.
• .unshift() : 배열 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. 원본 데이터가 수정된다.
• .reverse() : 배열의 순서를 반전시킨다. 원본 데이터가 수정된다.
• .splice() : 삭제 또는 교체 또는 추가한다. 원본 데이터가 수정된다. index, 해당 index에서 제거하고자 하는 횟수, 추가하고자 하는 값의 순서의 인수를 넣어주면 된다.

 

- splice는 지우는 용도도 가능하고, 추가하는 용도도 가능하다. (앞에서 본 replace도 변경하는 용도도 가능했지만, 제거도 가능했었다.)

 

원본 데이터 변형	원본 데이터 유지
.push() .unshift() .reverse() .splice()	.map() .filter() .map() + 조건

 

 

// forEach를 통하여 인덱스와 값 출력하기.

const array1 = ['a', 'b', 'c'];

array1.forEach((value, index) => console.log(index, value));

// Expected output: 0 "a"
// Expected output: 1 "b"
// Expected output: 2 "c"

 

 

const b = fruits.map((fruit, index) => {

  // 객체로 반환하는 방법

  // * 많이 사용되는 방법);

  ({

    id: index,

    name: fruit,

  });

  // 반환되는 값이 있다. (forEach와 가장 큰 차이점)

});

console.log(b); // 반환된 값은 배열로 반환된다.

 

 

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(2, 3)
console.log(months)
// Expected output: Array ["Jan", "Feb"]

months.splice(months.length, 0, "ADD")
console.log(months)
// Expected output: Array ["Jan", "Feb", "ADD"]

 

 

 

4. Object 

- Object는 정적(Statics) 메소드이다. ( ↔ 배열은 정적 메소드와 반대이다. ) 그래서 리터럴에 바로 메소드를 사용할 수가 없다. 

• Object.assign(target, source) : source에서 복사하여 target에 붙여 넣는다. 원본 데이터인 target을 손상시킨다. (반환된 값 === target 처리하면 true 뜬다.)
• Object.Keys() : 

 

• 원본 데이터 유지하면서 복사하는 방법 : target에 빈 배열 또는 빈 객체를 부여하고, source 부분에 복사하고 싶은 모든 데이터를 적어준다. (메모리 주소가 다르다.)
• Keys 이용하여 객체의 값 찾아오는 방법 : 인덱싱 방법 이용하기, 객체[키 값], map 또는 forEach로 가져오면 되는데, 반환값이 있는 map이 더 좋다.

 

 

// 원본 데이터 유지하며, 데이터 복사하는 방법

const newTarget = Object.assign({}, userAge, userEmail);

console.log(newTarget);

console.log(userAge); // 원본 데이터를 유지하며 새로운 객체 만들 수 있다.

// (메모리 주소 다르기 때문에, 생김새 같아도 false가 뜬다.)

 

// Keys

const user = {

  name: "Amy",

  age: 26,

  email: "xudegloss@gmail.com",

};

const keys = Object.keys(user);

console.log(keys);

// const values = Object.values(user);

// console.log(values);

// forEach는 반환되는 값이 없기 때문에 map 이용하기.

const values = keys.map((key) => user[key]); // 인덱싱 방법 : 객체[키], 배열은 배열[인덱스] 이용하기.

console.log(values);

 

 

6. 구조 분해 할당 Destructuring Assignment

- 비구조화 할당이라고도 불린다.

• 값 불러오기.
• 값 새로 지정하기. = 이용하기.
• 변수 이름 변경하기. : 이용하기.

 

// 구조 분해 할당 = 비구조화 할당

const user = {

  name: "Anne",

  age: 26,

  email: "xudegloss@gmail.com",

};

// 필요한 부분만 가져와도 된다.

const { name: anne, age, email, address = "Korea" } = user; // user의 내용을 구조 분해하여 원하는 속성들만 꺼내서 사용하기.

 

 

• 객체에서 가져오고 싶은 경우는 { } 라고 지정하고, 배열에서 가져오고 싶은 경우는 [ ] 라고 지정한다.
• 객체는 구조 분해 할당 말고도, 키 값을 이용하는 인덱싱 방법을 통하여 값을 가져올 수 있다.
• 구조 분해 할당에서 가져오고 싶은 값만 변수 지정하고 싶은 경우에는 콤마를 이용하여 위치를 표시한다.

 

// (배열) 구조 분해 할당 가능하다.

const fruits = ["Apple", "Banana", "Cherry"];

// const [a, b, c, d = "Grape"] = fruits; // 데이터 종류에 맞게 기호 이용하기.

// console.log(a, b, c, d);

const [, b] = fruits; // 순서대로 출력되기 때문에, 쉼표로 순서를 꼭 표기해야 한다.

console.log(b);

 

 

7. 전개 연산자 Spread

• 쉼표로 구분된 각각의 아이템으로 구분된다.
• 나머지 연산자 Rest Parameter : 나머지 배열로 받아낼 수 있다.

 

아래의 코드를 보자.

 

// 전개 연산자 Spread

const fruits = ["Apple", "Banana", "Cherry", "Watermelon"];
// console.log(...fruits)

const toObject = (a, b, ...c) => {
  // 나머지 아이템 전부 c로 들어가는 개념으로 이용한다. (나머지 매개 변수 = rest parameter)
  // c에는 배열 데이터로 받는다.
  return {a, b, c}
};


console.log(toObject(...fruits)); // 인수가 많을 때 유리하다.
// Object { a: "Apple", b: "Banana", c: Array ["Cherry", "Watermelon"] }

 

• 위의 코드는 구분과 나머지 연산자 모두 보여주고 있다.
• fruits는 4개의 아이템으로 구성된 배열이다.
• toObject는 매개 변수를 반환하는 함수이다. 이 때, ...c 라고 되어있는데 앞에서부터 a와 b를 채우고 남은 매개 변수를 반환한다.
• toObject 함수를 실행할 때, toObject(fruits) 라고 해버리면 fruits 전체가 a에 들어가서 반환되게 된다. 따라서, ...fruits를 사용하여 인자를 구분해야 한다.

 

 

// 전개 연산자 Spread

const fruits = ["Apple", "Banana", "Cherry", "Watermelon"];
// console.log(...fruits)

const toObject = (a, b, ...c) => {
  // 나머지 아이템 전부 c로 들어가는 개념으로 이용한다. (나머지 매개 변수 = rest parameter)
  // c에는 배열 데이터로 받는다.
  return {a, b, c}
};


console.log(toObject(fruits)); // 인수가 많을 때 유리하다.
// Object { a: Array ["Apple", "Banana", "Cherry", "Watermelon"], b: undefined, c: Array [] }

 

 

정리하자면,

배열은 전개를 의미하고, 매개변수는 나머지를 전개하는 것이다.

 

 

8. 데이터 불변성 Immutability

 

원시 데이터	참조형 데이터
String Number Boolean undefined null 생김새가 같으면 같은 데이터라고 보고, 생김새가 다르면 다른 데이터라고 보면 된다. 같은 메모리 주소를 바라보고 있으면 같은 데이터이고, 다른 메모리 주소를 바라보고 있으면 다른 데이터이다. 따라서 불변성을 가진다. (한 번 만들어지면 변하지 않는다.)	Object Array Function : 왜 함수가 참조형 데이터인가? 왜냐하면 콜백이 있기 때문이다. 콜백은 함수의 인자로 쓰이기 때문에, 데이터라고 봐도 무방하다. 생김새가 같아도 다른 데이터일 수도 있다.  생김새 같더라도 다른 메모리 주소를 바라보면 다른 데이터이다. 따라서 가변성을 가진다. (메모리 주소만 참조하기 때문에) [주의] 같은 메모리를 바라보는 여러 개의 변수가 있으면, 의도치 않게 값이 변경될 수도 있다.

 

[주의] 같은 메모리를 바라보는 여러 개의 변수가 있으면, 의도치 않게 값이 변경될 수도 있다.

위와 같은 문제를 해결하기 위하여 복사라는 개념을 이용할 수 있다.

 

 

 

 

 

 

9. 복사 Copy

참조형 데이터는 같은 메모리를 바라보는 여러 개의 변수가 있으면 의도치 않게 값이 변경될 수 있다. 그런 경우를 방지하기 위하여, 복사를 이용하여 각각의 값을 완전히 분리할 수 있다.

 

 

얕은 복사	깊은 복사
assign, spread를 이용한다. 참조형 데이터 안에 원시 데이터만 있는 경우에 이용한다.	lodash package를 이용하여 깊은 복사를 진행한다. 재귀적 값 복사를 통하여 반복 실행한다. 내부에 또 다른 참조 데이터가 있는 경우에 이용한다.