01 var → const & let
- const는 한 번 선언하면 값을 바꿀 수 없는 상수의 개념
같은 스코프{} 내에서 중복된 이름을 가질 수 없다. - let은 선언과 변경이 자유로운 변수
예) 함수 스코프 내에서 var로 변수 선언시 외부에서 접근 및 사용 가능
그러나, let으로 선언된 변수는 외부에서는 접근 불가
02 Array 메소드들
forEach
Array.forEach((element) => { })
배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드-배열 내부를 순회하면서 콜백함수의 body를 실행한다.
array.forEach(콜백함수)에 실행할 콜백함수는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받는다.
- 함수 내에서 따로 return문을 사용하지 않는다.
const arr = [1,2,3,4,5];
arr.forEach((i) => {
console.log(i);
});
// 예상 출력 1 / 2 / 3 / 4 / 5 map
배열의 요소를 이용해 순차적으로 함수를 실행하여 새로운 배열을 반환하는 메서드
array.map에 실행할 콜백함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.
콜백함수 내에서 반드시 새로운 값을 return문으로 작성해야 한다.
const arr = [1,2,3,4,5];
const newArr = arr.map((i) => {
return i*5;
});
console.log(newArr);
//예상출력 [5,10,15,20,25]filter
배열의 요소를 이용해 순차적으로 함수를 실행하여 조건을 통과하는 요소들만 모아 새로운 배열로 반환하는 메서드
array.filter(cb)에 실행할 콜백함수는 현재 값, 인덱스, filter를 호출한 배열을 매개변수로 받는다.
함수 내에서 return을 사용한다. 이 때 return값이 true인 경우에만 새로운 배열에 추가된다.
const arr = [1,2,3,4,5];
const newArr = arr.filter((item) => {
return item 5 && item >1;
});
console.log(newArr);
//예상출력 [2,3,4]reduce
배열의 각 요소를 순회하며 콜백함수의 실행 값을 누적하여 하나의 결과값을 반환한다.
arr.reduce((accumulator, currentValue[, initialValue]) => { });
콜백함수 내부 인수
- accumulator : 콜백함수의 반환값 누적
- currentValue : 순환할 배열의 현재 요소
- 옵션 initialValue : 최초 콜백함수 실행 시 accumulator에 들어가는 값, 초기값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용. 빈 배열이라 초기값이 없으면 에러가 발생한다.
const arr = [1,2,3,4,5];
const sum = arr.reduce((acc, cur) => {
acc + cur;
});
console.log(sum); // 15
//객체 배열에서 원하는 항목의 값만 더할 수도 있다.
const friends = [
{
name: '프로도',
age: 25,
job: '직장인',
},
{
name: '네오',
age: 25,
job: '주부',
},
{
name: '무지',
age: 20,
job: '수의사',
}
];
const ageSum = friends.reduce((accumulator, currentObject) => {
return accumulator + currentObject.age;
}, 0); //필요한 부분만 골라써야 할 때는 초기값 지정이 필수이다.
console.log(ageSum); // 7003 구조분해할당(Destructuring assignment)
객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식
const object = { x: 1, y: 2 };
const x = object.x;
const y = object.y;
console.log(x); // 1
console.log(y); // 2
//기존 객체에 담긴 값을 각각 새로운 변수로 선언하기 위한 작업들
//
const {x, y} = object;
//로 간단하게 새롭게 변수를 선언할 수 있다.
const arr = [0,1,2];
const [a,b,c] = arr;
console.log(a+b+c); // 3
//arr에 선언된 요소 각각을 새로운 변수 a,b,c로 구조분해 할당 표현을 이용하여 선언04 Shorthand Property Names (단축 속성명)
const name = "고메리";
const age = 1;
const animal = "cat";
const guessWho = { name, age, animal};
//
const guess = {
name: name,
age: age,
animal: animal
};// 기존에 선언하던 방식05 Spread Syntax (전개 구문)
배열이나 객체를 전개할 때 사용
...을 붙여 사용한다.
01 함수 호출 시
function sum(x, y, z) {
return x + y + z;
}
const a = [1, 2, 3];
console.log(sum(...a)); // 602 함수 선언 시
// 함수 선언 시 Spread Syntax는 마지막 매개변수에만 사용
function introduce(name, age, ...rest) {
console.log("이름: " + name);
console.log("나이: " + age);
console.log("추가정보: " + rest);
}
introduce("대한민국", 36, "안경 씀", "커피 좋아함", "게임 좋아함");03 배열 선언 시
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];
console.log(c); // [1,2,3,4,5,6]04 객체 선언 시
const a = { x: 1, y: 2, z: 3 };
const b = { v: 4, w: 5, x: 6 };
const c = { ...a, ...b };
console.log(c); // {x: 6, y: 2, z: 3, v: 4, w: 5}주의사항: 두 객체에서 겹치는 key가 있을 경우 나중에 오는 값이 들어간다.
06 Optional Chaining
optional chaining연산자는 객체나 변수에 연결된 다른 속성을 참조할 떄 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 해준다. 만약 유효한 속성이 아닐 경우 에러를 발생시키지 않고 undefined를 리턴한다.
const a = [{x:1,y:2}, {x:3,y:4}];
console.log(a?.[1]?.x); // 3
console.log(a?.[2]?.x); // undefined