- template literal
template literal은 문자열을 입력할때 사용한다. 기존의 "나'와 와 마찬가지로(backtik)또한 문자열을 감싸지만 "와'달리 문자열안에 js의 변수를 입력 할수있다.문자열안에 ${js변수}를 넣으면 사용이 가능하다.
-기존 '이나"의 js변수 사용법
let greeting = "안녕하세요";
'진영님'+greeting- template literal
`진영님 ${greeting}`*알아두면 도움되는 문자열 escape code
- destructuring(구조분해할당)
데이터는 객체(object)나 배열(array)로 저장하는것이 일반적이지만 구조분해할당을 통해 전체 객체나 배열에서 원하는 부분만 데이터를 담을수있다.
let zero, one, two; // 새로운 변수 선언
const numbers = [0, 1, 2]; // 숫자들로 이루어진 배열
[zero, one, two] = numbers; // 배열을 인덱스 위치에 맞게 분해하여 할당
console.log(zero); // 0
console.log(one); // 1
console.log(two); // 2위 코드는 구조분해할당 중에서도 배열을 분해하여 사용한 예시이다. (zero,one,two)변수를 선언하고 변수를 배열로 묶어 number안에 담긴 값과 각각 매칭 시켰다. 하지만 만약 선언한변수는 (zero,one,two) 세개인데 number안의 값이 2개라면 two에는 할당 되지 않게되며 two는 undefined가 된다.
- spread연산자
let zero, rest;
[zero, ...rest] = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(zero); // 0
console.log(rest); // [1, 2, 3, 4, 5, 6, 7]destructuring은 한개의 변수에 한개의 값이 담겼지만 spread는 지정된 변수와 매칭된 값 말고 모든 값을 하나의 변수에 담는다.
위 코드를 예시로 들자면 zero는 첫번째 인덱스인 0을 담게 될것이다. 그리고 rest라는 변수는 0을 제외한 모든 값을 담게 된다.
*...rest로 담았다고 이 변수를 다른곳에 사용할때 ...을 붙여서는 안됀다.
*...rest 뒤에 또 다른 변수가 올수없다
ex. [a,...b,c] = [1,2,3,4,5] => 이건 잘못된것 이다. ...b뒤에는 다른 변수가 오면 안됀다.
- 객체 분해
const classmate = {
name: '철수',
age: 8,
school: '꽃샘초등학교'
};
let { age: number } = classmate;
console.log(number); // 8
console.log(age);
// Uncaught ReferenceError: age is not defined위 코드에서 {age:number} = classmate는 classmate.age: number라고 볼수있다.
이때 number는 classmate.age에 미리 할당된 8이라는 값을 담는다.
5.array(배열) 메소드
- array.find(callback함수)
=> find는 array안을 첫번째 index부터 살피며 callback조건에 맞는 가장 첫 요소를 찾아 반환한다
*callback이란 미리 지정한 함수를 필요할때 다시 재사용하는 함수를 뜻한다.
// 숫자로 이루어진 배열을 만들었습니다.
const numbers = [0, 1, 2];
function cbFn(element, index, array) {
return element >= 1;
}
const result = numbers.find(cbFn);
console.log(result); // 1위의 예시는 미리 cbfn이라는 callback함수를 만들고 find(cbfn)에 사용하여 원하는 조건에 맞는 가장 처음 값을 리턴받는 코드이다.
-> cbfn: 1과 같거나 1보다 큰 요소를 return하라는 함수
-> numbers 라는 배열안 요소중 cbfn의 조건에 맞는 가장첫 요소는 numbers의 1번째 인덱스에 있는 1이고 find()는 이 1을 반환한다.
-findIndex()
find()와 비슷하게 callback함수를 이용하여 원하는 값을 찾지만 findIndex는 조건에 맞는 첫 요소가 아닌 조건에 맞는 첫 요소의 index를 반환한다. 이때 조건에 맞는 요소가 없다면 -1을 리턴한다.
- findIndex()와 indexOf()는 비슷하지면 findIndex()는 콜백함수로 원하는 요소의 index자리를 찾고 indexOf()는 콜백함수로 조건을 지정하는 것이 아닌 직접 찾고자 하는 값을 입력한다.
ex -> array.indexOf('진영')
진영이라는 값이 있다면 진영이라는 요소의 index를 리턴하고 아니라면 -1을 리턴한다.
-fill(수정값,start,end)
array.fill(수정값)은 array안에 모든 요소를 수정값으로 바꾼다
// 처음부터 끝까지
[1, 2, 3].fill(4); // [4, 4, 4]
// 1번째 인덱스부터 끝까지
[1, 2, 3].fill(4, 1); // [1, 4, 4]
// 1번째 인덱스부터 2번째 인덱스 전까지
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]-includes(값)
array.includes(값)은 array안에 원하는 값이 있을경우 true를 없다면 false를 리턴한다.
6.Object(객체)
-keys()
const classmate = {
name: '철수',
age: 8,
school: '꽃샘초등학교'
};
const result = Object.keys(classmate);
for (let i = 0; i < result.length; i++) {
console.log(result[i]);
}
// "name"
// "age"
// "school"위 예시는 classmate라는 객체의 key들을 result라는 배열에 담고 for문으로 key들을 하나씩 꺼내오는 코드이다.
-values()
위 keys()와 마찬가지로 value값을 가져오는 메소드이다.
const classmate = {
name: '철수',
age: 8,
school: '꽃샘초등학교'
};
const result = Object.values(classmate);
for (let i = 0; i < result.length; i++) {
console.log(result[i]);
}
// "철수"
// 8
// "꽃샘초등학교"-entries()
keys(), values()의 합체 라고 보면된다.
const obj = { age: 8, name: '철수' };
const result = Object.entries(obj);
console.log(result); // [["age", 8], ["name", "철수"]]위 코드는 obj라는 객체 안에 key와 value매칭 값을 배열화 하여 보여주었다.
*참고로 Object.assing은 배열을 객체화 할때 사용된다
const score = {
easy: 234,
normal: 759,
hard: 677,
nightmare: 46
};
const arr = Object.entries(score);
console.log(arr);
// [
// [ 'easy', 234 ],
// [ 'normal', 759 ],
// [ 'hard', 677 ],
// [ 'nightmare', 46 ]
// ]
let result = [];
// for문을 완성해주세요.
for(let i = 0; i < arr.length; i++){
result.push(Object.assign({},arr[i]))
}
console.log("결과", result);위 코드는 score라는 객체의 key와 value를 매칭시켜 배열화 하였고 result라는 빈배열을 만들고 그안에 key value들을 다시 객체화 하여 result라는 빈배열안에 집어 넣었다.
Object.assing({},배열)
