자바 스크립트 기본 문법

이주희·2023년 5월 2일
0

react

목록 보기
4/4

변수 선언

  • var
    변수 덮어쓰기, 재선언이 가능
  • let
    재선언 불가, 덮어쓰기 가능
  • const
    재선언, 덮어쓰기 모두 불가
    변경 가능한 경우가 있다! -> 프리미티브 타입은 불가능하나, 객체나 배열 등 오브젝트 타입

객체 선언 시 const를 이용해야함
리액트 개발시 대부분 const를 사용하고 값을 덮어써야 하는 경우에만 let을 사용한다

템플릿 문자열

문자열과 변수를 결합할 때
const message = "내 이름은" + name +"세 입니다"
에서
const message =(역 따옴표) 내 이름은 &{name}입니다. 나이는 &{age} 입니다(역 따옴표) 로 사용

화살표 함수

const func2 = (value) => {
	return value;
};

() 안에 인수 기입, => 로 함수 작성

처리를 한 행으로 하는 경우 {}와 return 생략

const sum = (v1,v2)=> v1 + v2;

반환값이 여러행일 때는

const sum = (v1,v2)=> (v1 + v2);

()로 감싼 뒤 단일 행과 같이 모아서 반환 가능

분할 대입

객체나 배열로부터 값을 추출하기 위한 방법

객체 분할대입

student 객체를 만들고 값을 추출하려면 student.name, student.number과 같이 student.를 입력하기 번거로워짐

const { name, number} = student;
를 변수 선언부에 이용하면 일치하는 속성 추출 가능

  • 일부 추출, 순서 바꿔 추출 상관없음!
  • 콜론(:)으로 다른 변수명 이용 가능
    const {name:newName, number : newNum} = student;

배열 분할대입

const myProfile = ["이주희", 24];
const [name, age] = myProfile;

로 사용하면 myProfile[0] 대신 name으로 사용 가능하다

스프레드 구문 ...

배열이나 객체에 이용할 수 있는 표기법
배열 내부의 값을 순서대로 전개할 때 사용

const arr1 = [1,2,3];
printf(arr1); // [1,2,3]
printf(...arr1);  // 1 2 3

따라서 const func = (n1,n2,n3) => {} 일 때
func(...arr1)로 사용이 가능하다!

배열 복사할 때도 등호가 아닌 스프레드 구문을 이용한 복사를 해야한다 (완전히 새로운 배열 만들기 위해)

객체 생략 표기법

객체의 속성명과 설정할 변수명이 같으면 생략 가능!

map, filter

map 함수 이용방법

const arr = ["안녕", "하세요"];
const arr2 = arr.map(()=>{}); //이러한 형태로 작성한다!

const arr2 = arr.map((name)=>console.log(name));
// for문을 사용하지 않고 간단한 형태로 작성 가능!

filter 함수 사용 방법

map 함수와 거의 동일하지만 return 뒤에 조건식을 입력해서 일치하는 것만 반환
ex)

const num = [1,2,3,4,5];
const oddnum = num.filter((num)=>{
  return num%2 ===1
});

index 사용하기

map 함수에서 index 만들어 사용하기

const arr = ["안녕", "하세요"];
// 두번째 인수에 index 넣음
arr.map((name,index)=>console.log(`${name} ${index+1}`));

0개의 댓글