5/10 TIL

Hwi·2024년 5월 10일
TIL

TIL

목록 보기
22/96

조별과제를 끝나고 본격 React를 배우기 전 다시 한 번 js의 기초를 정리해봤다.

1. let, const, var = 변수

  • 웬만하면 const로 사용하고 let은 재할당이 필요한 값에만 사용
    var를 사용하면 안되는 이유 : 논리적인 흐름에서 벗어나게 하기 때문에
    오류가 잦음, 코드 가독성 저하

  • const와 let도 호이스팅이 되지만 var처럼 초기값을 미리 할당하지 않는다는 점에서 가독성, 코드의 유지보수 측면에서 유리함

2. 객체 {}

const user = {key: 1, name: 2}

keys, values, entries, assign

const a = Object.keys(user) // 객체에서 key만 가져옴
const a = Object.values(user) // 객체에서 value만 가져옴
const entries = Object.entries(user) 
//객체의 key,value를 쌍으로 묶어서 가져옴 
ex = [ [ 'key', 1], ['name', 2] ]
// 이런 식으로 큰 배열 안에 작은 배열로 감싸는 형태를 띔

const detail = {age:24}
	Object.assign(user, detail) 
// 기존에 있던 user에 detail을 추가해줌 
//원본 객체에다가 추가적인 객체의 속성을 복사해준다 생각하면 됨

3. 배열 []

const arr = [1,2,3,4,5]

라는 배열을 예시로 써놓음

push, pop, shift, unshift

  • push : 배열의 마지막 요소에 추가
arr.push(6)
console.log(arr) = [1,2,3,4,5,6]
  • pop : 배열의 마지막 요소를 삭제
const a = arr.pop()
console.log(a) = [1,2,3,4,5]

  • shift : 배열의 첫 번째 요소 삭제

  • unshift : 배열의 첫 번째 요소에 추가

map, filter, reduce, sort

  • map : 원본 배열에서 각 요소를 가공한 새로운 배열로 반환
  • filter : 배열의 요소를 순회하면서 콜백 함수를 사용하여
    원하는 조건에 따라 필터링

  • reduce : 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환

  • sort
    sort의 예시 코드

const a = [1,2,9,8,5]

라는 배열이 있다 하면

a.sort((a,b) => a - b) // 배열의 요소를 오름차순으로 정렬
console.log(a) //  [1,2,5,8,9]
a.sort((a,b) => b - a) // 배열의 요소를 내림차순으로 정렬
console.log(a) // [9,8,5,2,1]

4. Template Literals

  • 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
    템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식 화, 문자열 태깅 등 다양한 기능을 제공

사용 예시

예를 들어서 "안녕하세요 반갑습니다 제 이름은 ??입니다"를
console.log로 출력하고 싶다면 

const a= {age:24, name:hj] ;
const b = "안녕하세요 반갑습니다 제 이름은" ;

console.log(`${b} + ${a.name} + 입니다.`);
// 안녕하세요 반갑습니다 제 이름은 hj입니다

이런 식으로 백틱(``)을 사용하여 쉽게 코드를 작성할 수 있다.
백틱을 사용할 땐 문자에 따옴표("")를 써주지 않는다

5. Spread Operator(전개구문)

  • ... 연산자를 사용하여 배열이나 문자열을 개별 요소로 분해하여 결합, 복사해 새로운 배열로 복사할 수 있다.
    ex) 
const arr = [1,2,3]
const newArr = [...arr]; 
console.log(newArr); = [1,2,3]

배열이라면 [...], 객체라면 {...}

  • 같은 배열 혹은 같은 객체끼리 더하고 싶을 때는
const a = [1,2,3]
const b = [4,5,6]
const c = [...a,...b]; // [1,2,3,4,5,6]

이거에 대한 간략한 설명이라면 const c에 [...a,...b]를 담는다면 배열 안의 값은
[1,2,3,4,5,6] 이렇게 나열되게 된다.

  • 같은 이름의 키를 가진다면 뒤에 들어오는 키가 우선시 된다.
    ex)
const a = [id:1, job:백수]
const b = [id:2, age:30]
const c = [...a, ...b]
console.log(c) = [id:2, job:백수, age:30]

6. Rest Operator(나머지 매개변수)

  • 위에 적어둔 Spread Operator와 비슷하게 느껴질 수 있으나 엄연히 다르다. 얘는 괄호 안 이름으로도 알 수 있듯이 함수에서 사용하는
    ...매개변수 이다.

  • 객체 분해 할당에서도 많이 쓰이는 문법이다

  • 		function RO (a,rest) {
		console.log(a,...rest); // 1,[2,3,4,5]	
		}
  
		const restOperator = [1,2,3,4,5]

  • ...rest가 앞에 와서는 안 됨. ex)

console.log(...rest, a); // 오류 발생

7. Arrow Function(화살표 함수)

간단하게 코드로 적어보겠다

const friday = function(a, b) {
	return a + b;	
}; // 일반적인 함수 표현식

-------------------------------------------------

const friday = (a,b) => {
	return a + b;
}; // 화살표 함수를 사용한 함수 표현식

화살표 함수의 장점

  1. 함수 본연의 입출력 기능을 직관적으로 잘 표현함

  2. 소괄호, 중괄호 생략 가능 (편의성)
    파라미터가 하나라면 소괄호 생략O, return이 한 줄이라면 중괄호 생략O

  3. 밖에 있는 this 값을 그대로 사용 가능
    함수는 함수가 쓰이는 위치에 따라 this의 값이 변경될 수 있는데
    화살표 함수는 어디서든 쓰던 this의 값을 변화시키지 않음
    즉, 밖에서 호출된 this의 값을 그대로 내부에서 사용할 수 있다.

  4. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됨.
    일반 함수는 동적으로 결정되는 반면, 화살표 함수의 this 는 언제나 상위 스코프의 this를 가리키기 때문이다. 이를 Lexical this라고 부름.

  5. 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

8. 조건연산자

1. 논리합연산자(||) : truthy 혹은 falsy

falsy : false, 0, null, "", undefinde, NaN
보통 Or(또는)로 많이 알고 있음 
const getUserName(user) => user.name || "신원미상"
// user.name이 truthy면 user.name 반환, falsy면 "신원미상" 반환
const user1 = {
	job: "백수",
  	age: 24,
};
console.log(getUserName(user1)); 
// 만약 user 객체의 job키 대신 name키가 있었다면 user.name이 떴을 것인데 
// name키가 user 객체에 존재하지 않기 때문에 "신원미상" 반환

2. 논리곱연산자(&&)

  • AND(그리고)로 흔히 사용하고 있음
const birthday = true;

const name = "휘진"

birthday && alert(`${name}님, 생일 축하드립니다!`);
// birthday = true면 alert를 발생시킴

3. NOT (!)

  • 피연산자를 boolean형으로 변환(true,false)

  • 변환된 값의 반대를 반환함

const isTrue = true;
const isFalse = !isTrue; // isFalse는 false가

9.Optional chaining (?.), null 병합 연산자(??)

1. Optional chaining (?.)

  • 옵셔널 체이닝은 존재하지 않을 수 있는 프로퍼티 또는 메서드를 안전하게 호출할 수 있도록 도와준다.
    ?. 앞의 값이 undefined 또는 null일 때 undefined를 반환
// 예시 코드
const eat = {
	lunch: {
      meal: 'rice',
      sideDish: 'meat',
    },
  	
  	dinner: {
      	meal: 'rice',
      sideDish: 'fish';
    },
};
console.log(eat.lunch?.drink); // lunch 객체에 drink 키가 없기 때문에 undefined를 출력

2. null 병합 연산자(Nullish Coalescing) (??)

  • null 병합 연산자라 불리며, 표현식에서 이 연산자를 사용하면 첫 번째 피연산자(왼쪽)를 확인하여 해당 값이 null 인지 undefined 인지 확인한다.

  • 첫 번째 피연산자가 nullish 값이 아니라면 이 표현식을 리턴하고, nullish 값이라면 두 번째 피연산자를 리턴한다.
    nullish : null, undefined

// 예시 코드
	const name = "hwijinkim22"
    
    console.log(name ?? "존재하지 않는 이름");
  // name의 값이 존재하기 때문에 "hwijinkim22"가 콘솔로 찍히겠지만
  // 만약, const name = null; 이었다면 "존재하지 않는 이름"이 콘솔에 찍힘

이렇게 자바스크립트의 기초를 정리해봤는데 정리하면서 느낀 점은
생각보다 기초를 숙달시키기가 어렵다는 것이다.
보고 또 봐도 결국 소홀해지는 게 기본기인 거 같은데 그렇게 되지 않도록
꾸준하게 갈고 닦아야겠다!

profile
Hwi
개발자가 되고 싶어~~~
이전 포스트

5/9 TIL (조별과제 제출!)

다음 포스트

5/11 TIL

0개의 댓글