2일차 - 2022.03.02

오늘 공부한 내용 요약

모던 JavaScript 튜토리얼 학습

1. Script 태그

• 자바스크립트 프로그램을 html(웹페이지)에 삽입시킬수 있게 해주는 태그
• 외부 스크립트를 삽입할때는 src를 이용함.
  <script src=“http://……………..”> </script>
• html에 삽입하는 스크립트에는 간단할때 주로 사용
  양이 많은경우에는 분리해서 저장하는것이 유용
  -> 별도로 저장하면 브라우저가 캐시(cash)에 저장하기 때문에
  공간도 절약되고 속도도 빨라짐
  ->1일차에 학습했던 변수영역과 데이터영역을 나누는것과 같은 이유
• script 태그는 src의 속성과 내부코드를 동시에 가지지 못하기에 분리해서 사용
• script태그가 alert나 let 등 원하는 작업 내용을 포함하고 있어야 정상작동

2. 코드 구조

• 문(statement) = 작업을 수행하는 문법과 명령어를 의미
  서로다른 문은 세미클론(;)으로 구분
  줄바꿈으로 문을 나눴더라도 세미클론은 붙여주는것이 좋은 습관
• 주석(comment) = 내용을 메모하거나 비활성화 시킬때 사용

3. 엄격모드

• ES5가 등장하면서 기능중 일부가 변경, 하위호환성 문제로 기본모드에선 비활성화
  ‘Use strict’ 가 최상단에 오면 전체가 모던한 상태로 변함 (엄격모드 활성화)
  Use strict을 취소할 방법은 없음

4. 변수와 상수

(1) 변수 - 데이터를 저장할떄 쓰이는 이름이 붙은 저장소

• 자바스크립트에서는 거의 동일한 var이 있지만 let을 주로 이용
• 여러 변수를 선언하는 여러가지 방법

let user = ‘me’;
let age = 20;
let message = ‘hello’;

let user = ‘me’,
	age = 20,
	message = ‘hello’;

let user = ‘me’
	, age = 20
	, message = ‘hello’;

3가지 방식의 결과는 모두 동일

• 변수의 값이 변경되면 이전 데이터는 제거됨
  변수 2개를 선언하고 하나의 변수 데이터를 다른 변수데이터에 복제할수도 있음
  같은 변수를 2번이상 선언하면 에러발생
  

• 변수명에는 오직 문자, 숫자, $, _ 만 사용가능
  첫글자는 숫자가 될수 없음
  변수명에서 대소문자 구별함. ex) apple 과 Apple 은 다른 변수
  변수명에 예약어를 사용할수 없음 -> 이미 자바스크립트에서 사용중임

(2) 상수
변하지 않는 변수를 선언시 let 대신 const를 사용 이를 상수라 한다

• 변수와 달리 재할당 불가 (변경 불가)

• 대문자로 상수를 만들면 가독성이 좋고 기억하기 좋을수 있음
  대문자 상수로 하면 유용한 경우
  -> 하드코딩한 값의 별칭을 만들때, 이미 알고있는 값, 변하지 않을 값

• 변수명을 정할때
  간결하면서 자세하고 내용에 연관있게, 팀의 규칙에 맞게 해야한다

5.자료형

• 숫자형
  정수 + 부동소수점 숫자 / infinty , -infinity, NaN(오류) 포함
  정수를 +- 2의 53승 까지 표현가능
  아주 큰 숫자를 사용시 BigInt로 길이 상관없이 정수가능
  ex) const bigInt = 34759024757903750937950n;

• 문자형
  “와 ‘는 자바스크립트에서 차이가 없음
  역따옴표`로 표현식을 감싼후 ${ } 을 넣어주면 문자열 중간에 변수나 표현식을 추가할수 있다.
  “와 ‘는 중간에 넣을 수 없다 / ${ } 에는 무엇이든 들어갈수 있음

alert( `the result is ${1 + 2}` ); // 결과는 3

• 불린형
  True 와 false 만 가능

let vae = 4 > 1;     
alert(vae)         // true 출력 

• null값
  자바스크립트에서의 null은 존재하지않거나 알수없거나 비어있는값을 표현
• undefined값
  값이 할당되지 않은 상태
• 객체
  객체(object)는 한가지 종류만 표현가능한 나머지와 다르게 복잡한 개체를 표현할수 있다
• typeof 연산자
  Typeof으로 자료형을 확인할수 있음 / typeof ~ 와 typeof (~)는 같은 결과

	 typeof 3     // number
	typeof 10n   // bigInt
    typeof math  // object (참조형 타입은 객체가 출력)
    
	typeof null // object 
    (이는 하위호환성을 위해 남겨둔 언어상 오류로 null은 객체가 아님)

6. 형 변환

• 문자형으로 변환시 string(변수) 같이 직접 지정하여 나타나게 할 수도 있음
• 숫자형으로 변환시 number(변수) 로 가능
  null, false값은 0 / true 값은 1 / undefined 값은 NaN

alert( Number(" 123 ") );        // 123
alert( Number("123z") );         // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );           // 1
alert( Number(false) );         // 0

• 문자열을 숫자로, 숫자를 문자열로 상황에 맞게 바꿔주어야 함
• Boolean형
  0, null, undefined, 빈 문자열 등 비어있다는 느낌은 false / 나머지는 true

 alert( boolean(“”)    // false
 alert( boolean(“0”)   // true
 alert( boolean(“ ”)   // true

7. 기본연산자와 수학

(1) 피연산자(인수) - 연산을 당함 ex) 5 * 2 = 10 에서 5와 2는 피연산자
단항 연산자 - 피연산자를 하나만 받음
이항 연산자 - 2개의 피연산자를 받음

(2) 자바스크립트에서 지원하는 연산자 종류
+, -, *, /, %(나머지), **(거듭제곱)

• 나머지 연산자는 나머지를 정수로 반환 ex) alert( 5 % 2 ); —> 1
• 거듭제곱 연산자는 alert( 3 ** 2 ); -> 9

(3) 이항연산자 + 는 다른 산술연산자와 달리 하나만 문자열이면 나머지도 문자열로 변환

alert ( “2” + “3”);  // 23
alert ( “2” + 3);    // 23
alert ( 2 + 3);      // 5
alert( +”2” + +”3”); // 5   —> 앞에 +를 붙이는것으로 number() 와 동일효과

alert ( “2” - “3”); => -1
alert ( 2 - “3”); => -1  

• +외의 이항연산자는 하나가 문자열이 아니여도 문자열로 변환되지 않음

(4)연산자의 우선순위

• 동일한 기호의 단항 연산자는 이항연산자 활용보다 우선순위가 높음
  ( 단항부정 > 뺄셈 )

(5) 할당 연산자(=)

• 할당 연산자가 이어져있는 경우 우측부터 진행됨
• 복합 할당 연산자 += 와 /= 등
  대부분 다른 연산자가 실행된 후 복합 할당 연산자가 실행되는 우선순위
  a = a + 2 이거랑 a += 2 와 같다

let n = 2;
n *= 3 + 5;     -> 우측 먼저  n = n * 8
alert( n );      -> 16

(6)증가 감소 연산자

• 변수에만 사용가능, 숫자형 등에는 오류

 변수++, 변수 = 변수 + 1 는 같음
 변수--, 변수 = 변수 - 1 는 같음

• ++변수 (전위형) ->증가 후의 새로운 값을 반환
  변수++ (후위형) -> 증가 전의 기존값을 반환

let counter = 0;
alert( ++counter );  // 1

let counter = 0;
alert( counter++ );  // 0

(7)쉼표 연산자(,)

• 코드를 짧게 쓰려는 의도, 마지막 표현식의 결과만 반영이 된다

let a = ( 1+2, 3+2);     alert(a); // 5

(8)

alert(“” + 2 + 1);    // 문자열 21
alert( “a” + 0 + 1);  //  a01
alert( 0 + 1 + “a”);  // 1a

(9)
문자열을 숫자로 바꿔주기 —> 변수앞에 +를 붙여주거나 Number(변수)를 해주기

8. 비교연산자

• 동등연산자는 ==로 2번들어감 / 할당연산자는 =1번 들어감
  부등연산자는 !=

• 문자열비교시
  사전상 뒤쪽의 문자열이 더 큼 (정확히는 유니코드순)
  문자열의 길이가 길수록 큼
  대문자보다 소문자가 더 큼

• 비교하려는 자료형이 다르면 자바스크립트가 문자열을 숫자로 변환시킴
  true는 1 , false는 0으로 변환됨

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

각각은 다른 결과가 도출되지만 둘을 비교하면 같은 값이 나오는 이유는 둘을 비교할 경우 문자열을 숫자형으로 바꿔서 비교시키기 때문

• 동등연산자(==)는 false와 빈 문자열이 숫자형으로 변환되어 0과 구별할수 없지만 일치 연산자(===)는 엄격하게 비교하여 자료형이 다르기떄문에 바로 false 도출

alert( 0 == false);     // true
alert( 0 === false);    // false

• 특수한 상황
  null과 undefined를 비교할 경우에만 결과가 true
  그 이외에는 false의 결과를 내보낸다

alert( 0 == null );           // false
alert( undefined == null );  //  true

• 결론적으로
  일치연산자(===)를 제외한 비교연산자의 피연산자에 null, undefined이 오지 않도록 주의
  또한 undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의
  만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가

9. if와 ?을 이용한 조건처리

• if(..)문은 괄호안의 표현식을 평가하고 boolean값으로 변환한다
• if문에 else절을 붙일수 있는데 거짓일때 else 절이 실행된다

  let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');
  if (year == 2015) {
   alert( "정답");
  } else {
   alert( "오답");
  }
                            // 2015를 입력시  정답, 그외는 오답 출력

• Else if 로 복수조건을 처리할수 있는데 여러번 붙일수있고 마지막에 else 절을 붙이는건 선택사항
• 조건부연산자 ?
  자바스크립트에서 피연산자를 3개나 받는 유일한 연산자
  ?를 다중으로 사용할 수도 있음 / ?를 if 대용으로 사용할수 있음

  Let goo = A ? B : c;       // 이 경우 A가 true 이면 B가 출력 , false이면 c가 출력

10. 논리 연산자

(1) ||(or)

• 2개의 피연산자중 하나라도 true 이면 true , 둘다 false면 false
• 평가를 위해 자료형을 불린형으로 변환
• 피연산자가 여러개인 경우
  각 자료형을 boolean형으로 변환후 true가 나오면 멈추고 해당 피연산자의 원래값으로 출력, 모두 평가한 경우 마지막피연산자를 출력
  (반환값이 형 변환을 하지 않은 원래 자료형인 것에 주의)

alert( null || 0 || 1 );  //  1

(2) &&(and)

• 피연산자 모두가 참일때 true, 나머지는 false

• ||와 비슷하게 피연산자가 여러개인 경우
  각 자료형을 boolean형으로 변환후 false가 나오면 멈추고, 모두 true라면 마지막 피연산자 출력

• &&의 우선순위가 ||보다 높다.

(3) ! (Not)

• 피연산자를 하나만 받는다
• 자료형을 불린형으로 변환후 값의 역을 반환한다

alert( !true ); // false

• !!으로 한번더 사용할수도 있는데 이 경우 Boolean() 와 동일한 효과
• Not 연산자의 우선순위는 모든 논리 연산자중 가장 높기 때문에 가장 우선시 한다

(4) 종합

alert( alert(1) || 2 || alert(3) );    // alert는  undefined를 반환   
이때 alert(1)를 평가하면서 1이 출력되고, 첫번째 ||결과 2가 출력

alert( alert(1) && alert(2) );         // alert는  undefined를 반환    
이때 alert(1)를 평가하면서 1이 출력되고, 첫번째 &&결과 변환된 undefined가 출력

---

2진수에 관한 내용

1바이트(8비트)의 경우 256가지 정수의 표현이 가능한데 맨 앞 자리 비트는 부호로 사용.
0이면 양수, 1이면 음수로 범위화하면 '-128 ~ + 127' 이다.

그렇다면 맨 앞 비트를 양수로 쓰지 않는경우, 즉 부호가 정해져 있는 경우에는 음수 또는 양수를 더 많은 값으로 표현가능.
부호가 없다고 가정시 10000000의 절대값은 128로

• 10000000 = -128에서 시작

• 10000001 = -127

• 11111111 = 10000000 + 01111111 = -128 + 127 = -1
  

공부하면서 몰랐던 용어 및 알게 된 내용

• 모던 자바스크립트
  -> ES6과 그 이후의 판을 구현한 자바스크립트
• HTML 태그
  -> p, body, alert, script 등
• 정적타입 언어-> 자료의 타입을 컴파일 시에 결정함. ex) c++, Java..
  동적타입 언어 -> 자료의 타입이 언제든 변할수 있음. ex) JavaScript, Python..

공부사이트

코어 자바스크립트

가지면 좋은 습관

• 세미클론(;)을 붙이는 습관
• 변수명은 해당 내용을 알 수 있게 팀의 규칙에 맞게 선언
• 변수 재사용 보다는 새로 추가

느낀점

• 공부속도가 너무 느리다
• 이해의 깊이를 높여야 한다
• 지금 언급하고 넘어가는 심화부분들을 잊지말고 후에 접할때 도움이 되도록 지금 토대를 잘 만들어놓아야 한다

개선방안 및 아쉬운 점

• 더 절박하게 현재에 집중
• 2진수에 대한 설명을 듣고 노력했으나 이해도가 너무 낮음
  -> 이해도 높여 추후 보완 게시예정

---

위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다