3일차 - 2022.03.03

안병욱·2022년 3월 3일

오늘 공부한 내용 요약

모던 JavaScript 튜토리얼 학습

1. nullish 병합 연산자 ??

여러 피연사자들 중에 값이 확정되어 있는 것을 찾을 수 있게 해줌

A ?? B
-> A가 null과 undefined 가 아니면 A이고, 그렇지 않으면 B다.
즉 A에 값이 있으면 A이고 없으면 B이다

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

위의 경우 값이 있는 nickName을 찾을 수 있었다

??와 ||의 차이점
??는 첫번째 정의된 값을 변환한다, ||는 첫번째 true값을 변환한다
이는 null과 undefined, 숫자 0을 구분해야 할 때 중요한 역할을 한다.

let height = 0;

alert(height || 100);    // 100
alert(height ?? 100);    // 0

-> 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

??의 우선순위는 낮은편이라 오류를 방지하기 위해 ( ) 를 사용

2. while과 for 반복문

while 반복문

While (조건 ) {     -----> 조건이 true 이면, 코드가 실행된다.
	코드 ;
	반복문 본문;						
	}

let n = 0;						let n = 0;
    while (n < 3) {				while (n < 3) alert(n++);					 
      alert(n);          =    
      n++;
}

do while 반복문
본문 내용을 한번이라도 실행하려 할때 사용하면 유용

do { 
	반복문 본문 ;
  } while(조건) 
  
-> 본문이 먼저 실행되고  조건문이 true면 다시 실행

for 반복문

for ( begin; condition; step) {
	반복문 본문 ;
}

-> 작동순서는 begin이 실행되고 condition이 true이면 본문이 변환되고 step을 거침

반복문 안에서 선언된 변수는 반복문 안에서만 사용가능
애초에 밖에서 선언된 변수는 안,밖에서도 사용될수 있음

3. switch 문

복수의 if조건문을 바꿀 수 있다. / 하나 이상의 case 문으로 구성

switch(x) {
 case 'value1':    // if (x === 'value1')
   ...
   [break]

 case 'value2':     // if (x === 'value2')
   ...
   [break]

 default:
   ...
   [break]
}

변수 X의 값을 value들과 비교해 일치하는게 있으면 해당 case문 아래의 코드를 실행 -> 이떄 break문을 만나거나 switch문이 끝나면 코드멈춤
value와 일치하는 것이 없다면 default문 아래의 코드가 실행

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
    
-> break문이 없어 case 4,5,default의 코드 3가지가 출력되고 종료된다

Switch 문과 case문은 모든 자료형을 인수로 받는다
코드가 같은 case문은 같이 묶을수 있다
switch문은 일치비교로 조건을 확인하기 떄문에 자료형이 같지 않다면 정상 작동하지 않는다

4. 함수

함수선언

function 함수이름() {
	함수본문 ;
}

선언후  함수이름()를 호출하면 함수 본문이 실행된다

함수내에서 선언한 변수는 함수 안에서만 사용가능
함수 밖에서 선언한 변수를 함수 안에서 사용가능 / 수정도 가능

매개변수
완전히 같은 개념은 아니지만 인수라고도 함
function show(a , b) {} -> 매개변수 a,b
기본값
매개변수에 값을 미전달시 오류가 나는게 아니라 undefined로 인식되어 showMessage("Ann"); -> Ann , undefined 형태인것이다.
값을 전달하지 않아도 undefined가 되지않게 하려면 기본값을 설정해야함
showMessage(from, text = "no text given")
이런식으로 함수가 실행되는 중에도 기본값을 설정할 수 있다.
반환값 (Return)
함수 전체에서 사용가능, return에 도달시 함수를 호출한 곳에 값을 반환함
return만 명시할수도 있는데 이 경우 함수가 즉각 중단됨
return 문이 없거나 return 지시자만 있는경우 함수는 undefined를 변환
자바스크립트에서 return 뒤에 ;을 자동으로 넣기에 return과 값 사이에 줄을 띄우면 안됨
함수 이름
대개 동사이름으로 접두어를 넣어 내용짐작이 가도록 한다
함수는 동작 하나만 담당해야 한다
하나의 함수안에서 여러 동작을 실행시 혼선을 주게 된다
이름만 보고도 어떤 동작을 하는지 알수 있는 코드 -> 자기설명적 코드
함수가 길어질 경우 분리해 작성
-> 테스트와 디버깅이 쉬워짐.
깔끔하고 이해하기 쉬운 코드를 작성하려면
함수 내부에서 외부변수를 대신 지역변수와 매개변수를 활용하는게 유용

5. 함수 표현식

함수를 변수에 할당할 수도 잇음

let sayHi = function() {
  alert( "Hello" );
};

자바스크립트는 함수에 () 괄호가 있어야만 함수가 실행된다
콜백함수(콜백)
함수를 함수의 인수로 전달했고 필요시 인수로 전달한 그 함수를 나중에 호출 하는것

함수 표현식과 함수 선언문의 차이점

1)
함수 선언문 -> 독자적인 구문 형태로 존재

Function sum(a,b) {
	return a + b;
}

함수 표현식 -> 표현식이나 구문구성 내부에 생성

let sum  = function (a,b) {
	return a + b ;
};

2)
함수 표현식은 실행흐름이 함수에 도달했을때 함수를 생성하고 사용가능하지만 / 함수 선언문은 정의하기전부터 사용가능하다
그래서 전역 함수 선언문은 어디에 있더라도 사용가능
스크립트는 함수 선언문이 모두 처리된 이후에야 실행된다

3)
함수선언문은 함수가 선언된 코드블록 내부에서만 유효함
If 문 안에 함수를 넣고 if문 밖에서 사용하려면 함수 표현식을 사용하면 됨

6. 화살표 함수 기본

함수 표현식보다 간결하고 단순하게 만드는 방법

let sum = (a, b) => a + b;

위 화살표 함수는 아래 함수의 축약 버전.

let sum = function(a, b) {
  return a + b;
};

함수본문이 간단한 함수는 화살표 함수로 사용하면 편리
본문이 1줄인 경우 -> 중괄호 없이 하면됨 ….) => 표현식
본문이 여러줄인 경우 - > …) => {body}
그리고 이 경우에 return 지시자를 이용해 반환값을 명시해줘야 함

객체에 대해

1. 객체

객체는 자바스크립트 거의 모든면에 녹아있는 개념
객체는 원시형과 달리 다양한 데이터를 담을수 있다

객체 만드는 법

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법    -> 주로 사용

프로퍼티( 키 : 값 ) 형태
키는 문자열, 값과 프로퍼티는 모든 자료형 가능
프로퍼티를 삭제, 추가할 수 도 있다

점 표기법으로 프로퍼티값을 읽을 수 있음 ex) alert(user.age); // 30
복수단어의 경우 따옴표로 묶어줘야 하고, 점 표기법으로 읽을 수 없음
-> 키가 유효한 변수식별자가 아닐 때 대괄호표기법으로 모든 문자형 가능 ex) user["likes birds"] = true;
프로퍼티의 끝은 ,로 끝날수 있다
const로 선언된 객체는 수정될 수 있다
->const는 변수의 값을 고정하지만, 그 내용(프로퍼티)은 고정하지 않는다
[fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미합니다
변수의 이름에는 예약어를 사용할 수 없지만 객체 프로퍼티에는 가능
in 연산자 - 값이 존재하는지 확인가능

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

for ..in 반복문
프로퍼티를 나열할 때 - > for (let key in obj)

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

for (let key in user) {
  clone[key] = user[key];
}
=> 새로 만든 객체clone에 user 프로퍼티 전부를 복사

정렬방식
정수 프로퍼티(정수에서 왔다갔다 할수 있는 문자열)는 자동으로 정렬 그외의 프로퍼티는 객체에 추가된 순서대로 정렬
위부터 순서로 정렬을 원할시 정수 앞에 +를 붙여 정수가 아닌거처럼 인식시키기

2. 참조에 의한 객체복사

객체와 원시타입의 가장 큰 차이점은 객체는 참조에 의해 저장되고 복사되는 점

객체가 할당된 변수를 복사할때는 객체의 참조값이 복사되고 객체는 복사되지 않는다
객체는 비교시 동일한 객체인 경우에 한해 동등연산자(==)와 일치연산자(===)에서 동일한 결과가 나옴
두 객체가 값이 없고 비어있는 상태라면 각각 독립된 객체이기때문에 동등,일치연산자 비교에서 다름
참조값 복사가 아닌 객체 자체를 복사하고자 할때

let clone = {};       // 새로운 빈 객체

for (let key in user) {         
  clone[key] = user[key];  // 빈 객체에 user 프로퍼티 전부를 복사해 넣음
}

이런 방식으로 새로운 객체를 만들고 프로퍼티 전부를 복사해서 넣을수 있음

객체의 '진짜 복사본’을 만들려면 '얕은 복사'를 가능하게 해주는 Object.assign을 활용
이때 얕은 복사본은 중첩 객체를 처리하지 못한다는 점

3. 가비지 컬렉션

쓸모없어지게 된 = 도달가능하지 않은 값을 삭제하는 것
외부로 나가는게 아닌 외부에서 들어오는 참조만 도달가능성에 영향을 줌
태생부터 도달가능한 것들 =루트(root)
하나의 객체를 다른 객체에 복사한 후 하나의 객체가 null이 되어도 복사한 객체에 연결되어 삭제되진 않지만 남은 객체도 null이 되면 삭제됨
루트 정보를 수집하고 마크 -> 루트가 참조하고 있는 모든 객체를 마크 -> 이어지며 도달가능한 모든 객체를 마크 -> 마크안된 객체는 삭제
서로 연결된 객체들도 도달이 불가능할 수 도 있다