1. 향상된 for문
배열이나 객체의 모든 요소를 차례대로 접근하여 반복할 수 있다
아래 예시로 간단한 구조를 알아보자
기본 입력방식
- for ( 조건; 실행; 다음스텝 ) { }
for(let i = 0; i < arr.length; i++){ console.log(arr[i]); }
배열은
of를 사용한다
- for ( const 값 of 배열) { } : 배열의 값을 불러온다
for(const value of arr){ console.log(value); }
객체는
in을 사용한다
- for(const key in 변수명){ } : 객체의 key를 불러온다
for(const key in obj){ console.log(key); }
key의 value를 가져오는 입력문
- 입력방법 : 변수 [ key ];
for(const key in obj){ console.log(obj[key]); }
2. 객체를 사용하는 다양한 방법
기준 : const age = 12; / 변수 : obj 통일
const obj1 = { "key": value };
const obj2 = { key : value };
const obj4 = {}; obj4['age'] = age;
const obj5 = {}; obj5.age = age;
const obj6 = { ...obj5, };
전개연산자인 ' ... ' 은 배열, 객체, 함수 등에서 사용할 수 있으며, 기존의 배열 또는 객체를 확장하거나 병합하는데 사용한다배열에서의 예시코드 --! const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] ---- 객체에서의 예시 코드 --! const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const combined = { ...obj1, ...obj2 }; console.log(combined); // { a: 1, b: 2, c: 3, d: 4 }
3. 삼항연산자
if문을 대신해 자주 사용된다
입력방법 :조건 ? “true” : “false”;
기존 if문 --!
var age = 20;
var status;
if (age >= 18) {
status = "성인입니다.";
} else {
status = "미성년자입니다.";
}
console.log(status); // "성인입니다."
삼항연산자 코드 --!
var age = 20;
var status = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(status); // "성인입니다."4. 템플릿 리터럴 (Template Literal)
리터럴(literal)은 코드 상에서 직접 변수의 값을 표현하는 표기법이다
- 입력방법 : (`)백틱 안에 ${변수}
구구단 8단 예시코드 --! let dan : 8; for(i=0; i<10; i++){ console.log( `${ dan } * ${ i } =` + dan * i) ;
5. falsy와 truthy
5-1. falsy : boolean타입의 false로 평가되는 값을 의미
falsy를 나타내는 6가지 값
- 0: 숫자 0
- -0: 숫자 -0
- "": 빈 문자열
null: 값이 없음을 나타내는 특수한 값undefined: 값이 할당되지 않은 변수를 나타내는 특수한 값NaN: Not a Number를 의미하는 값
5-2. truthy : boolean타입의 true로 평가되는 값을 의미
truthy로 나타내는 값
- 모든 숫자(0을 제외한): 양수, 음수, 소수점 등 모든 숫자 값
- 모든 문자열: "hello", "0", "false" 등
- 모든 객체: 빈 객체({}), 배열([]), 함수 등 모든 객체
- Symbol(): 심볼 값
6. 함수 => (arrow)
function 대신 화살표 => 를 사용하여 함수를 선언한다
입력방식 :
const 변수 = 인자값 => { return ;}// 기존 함수 입력방식 --! const sum = function(x, y) { return x + y; } sum(3, 4); //7 // => 애로우 방식1 --! const sum = (x, y) => { // 인자값이 2개면 (,)필수 return : x + y; } sum(3, 4); //7 // => 애로우 방식2 --! // 함수 안에 식이 간단하며 return을 생략할 수 있다 const sum = x => x+1; // 하나면 (,) 없어도 된다 sum(3, 4); //7
7. indexof
문자열 또는 배열에서 특정 요소의 index 번호를 찾는 함수
입력방법 :
indexof();const fruits = ['apple', 'banana', 'orange', 'grape']; const index = fruits.indexOf('orange'); console.log(index); // 출력값 : 2
8. map과 filter
map : 배열의 모든 값을 가져오고, 함수를 거쳐 새로운 값을 가진 배열을 생성한다
입력방식 :
map(배열의 값, index);// map 예제 코드 --! const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(number => number * 2); console.log(doubledNumbers); // [2, 4, 6, 8, 10]
- 가져올 값이 두 개면 괄호를 넣어준다
const arr = [10, 20, 30]; const arr2 = arr.map((arr, index) => index == 1? 150 : arr); // arr,index를 가져와서 index가 1인 곳에 150을 넣어줄거야 // 만약 index가 1이 없어서 false면 기존 값을 그대로 쓸게 console.log(arr2); // 출력값 : [10,150,30]
filter : 주어진 함수를 사용하여 배열에서 조건에 맞는 요소만을 추출한 새로운 배열을 생성한다
입력방식 :
filter(배열의 값, index);const numbers = [1, 2, 3, 4, 5]; const filteredNumbers = numbers.filter((num, index) => index % 2 === 0); // number의 모든 값들 중 index를 2로 나누었을때 0인 index의 값만 가져와 // 즉 짝수 index 값만 가져와 console.log(filteredNumbers); // [1, 3, 5]
위 예시들 처럼 원본을 백업해 놓고 복사 후 수정한 새로운 버전을 만드는 것을 ' 불변성 '이라 한다
박상은