23년 2월 13일

오늘 배운 자바스크립트 기본 문법 링크
주로 아래에 있는 요약을 복붙을 했습니다. 본인이 이해 못한 부분은 강의에 적힌 내용을 사진 스샷해서 코드 적은 것까지 반영했습니다. 코드 복사 하시고 싶은 분은 저기 있는 위에 링크 들어가서 참고하시면 됩니다.

1. 변수와 상수

var, let, const를 사용해 변수를 선언할 수 있습니다. 선언된 변수엔 데이터를 저장할 수 있죠.

let – 모던한 변수 선언 키워드입니다. (자주 사용함)
var – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다. let과의 미묘한 차이점은 오래된 var 챕터에서 다루도록 하겠습니다.
const – let과 비슷하지만, 변수의 값을 변경할 수 없습니다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 합니다.

2. 자료형

자바스크립트에는 여덟 가지 기본 자료형이 있습니다.

숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 2^±53 입니다.
bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
불린형 – true, false를 나타낼 때 사용합니다.
null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.
undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.
객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.
typeof 연산자는 피연산자의 자료형을 알려줍니다.

typeof x 또는 typeof(x) 형태로 사용합니다.
피연산자의 자료형을 문자열 형태로 반환합니다.
null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.
이어지는 챕터에선 원시 자료형에 대해 학습해 볼 예정입니다. 원시형에 어느 정도 익숙해지면 객체형에 대해 알아보도록 하겠습니다.

3. 형 변환

문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환입니다.

문자형으로 변환 은 무언가를 출력할 때 주로 일어납니다. String(value)을 사용하면 문자형으로 명시적 변환이 가능합니다. 원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어납니다.

숫자형으로 변환 은 수학 관련 연산시 주로 일어납니다. Number(value)로도 형 변환을 할 수 있습니다.

숫자형으로의 변환은 다음 규칙을 따릅니다.

string 전달받은 문자열을 “그대로” 읽되, 처음과 끝의 공백을 무시합니다. 문자열이 비어있다면 0이 되고, 오류 발생 시 NaN이 됩니다.
불린형으로 변환 은 논리 연산 시 발생합니다. Boolean(value)으로도 변환할 수 있습니다.

불린형으로의 형 변환은 다음 규칙을 따릅니다.

형 변환 시 적용되는 규칙 대부분은 이해하고 기억하기 쉬운 편에 속합니다. 다만 아래는 예외적인 경우이기 때문에 실수를 방지하기 위해 따로 기억해 두도록 합시다.

• 숫자형으로 변환 시 undefined는 0이 아니라 NaN이 됩니다.
• 문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 됩니다.

4. 연산자

피연산자, 단항 연산자, 이항 연산자

피연산자(operand)는 연산자가 연산을 수행하는 대상입니다. 5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2, 총 두 개의 피연산자가 있습니다. '피연산자’는 '인수(argument)'라는 용어로 불리기도 합니다.

피연산자를 하나만 받는 연산자는 단항(unary) 연산자 라고 부릅니다. 피연산자의 부호를 뒤집는 단항 마이너스 연산자 -는 단항 연산자의 대표적인 예입니다.
두 개의 피연산자를 받는 연산자는 이항(binary) 연산자 라고 부릅니다. 마이너스 연산자는 아래와 같이 이항 연산자로 쓸 수도 있습니다.

수학 관련 연산자라면 덧셈(+), 뻴셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 거듭제곱(**)이 있다.
나머지 연산자(remainder operator)는 % 기호로 나타내지만, 비율을 나타내는 퍼센트와 관련이 없습니다.
나머지 연산자를 사용한 표현식 a % b는 a를 b로 나눈 후 그 나머지(remainder)를 정수로 반환해줍니다.

거듭제곱 연산자(exponentiation operator)를 사용한 a ** b를 평가하면 a를 b번 곱한 값이 반환됩니다.

'+'와 문자열 연결

+는 기존 덧셈 연산 말고도 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결)합니다.

또한 덧셈 연산자 +는 이항 연산자뿐만 아니라 단항 연산자로도 사용할 수 있습니다.

연산자 우선순위

연산자에도 역시 우선순위가 있는데 가장 먼저 괄호가 우선이고 그 다음부터는 이 뒤로 따릅니다.

위 표는 위에 순위의 숫자자 클수록 우선순위를 가진다.

할당 연산자

무언가를 할당할 때 쓰이는 =도 연산자인데 우선순위는 매우 낮습니다.

추가적으로 복합 할당 연산자도 있는데 다음과 같이 표현이 가능하다.

증가 감소 연산자

++와-- 연산자는 변수 앞이나 뒤에 올 수 있습니다. 이때의 차이점은 다음과 같다.
counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부릅니다.
++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부릅니다.

비교 연산자

비교 연산자는 우리가 흔히 보는 <, >, <=, >= 들이 있다.
비교 연산자는 불린값을 반환합니다.
문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순입니다.
서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.
null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.

5. 조건문

if문

else, else if문

?를 사용한 조건문

일반적으로는 이런 조건문이지만 역시 ?를 이용해서 다중으로 사용하는 방법도 있다. 다만 실효성은 낮아서 이렇게 쓸 방법에는 else if, else를 활용하는것이 더 좋다.

6. 논리 연산자

||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행한다.

반대로 &&sms 오른쪽에서 시작해서 왼쪽으로 평가를 진행한다.

!는 결과에 반대로 나타낸다.

7. switch문

8. 반복문

9. 금일 실전 코딩테스트 문제

실전 코드 문제

답안 코드

function solution(sizes) {
  let w = 0;
  let h = 0;
  for (let i = 0; i < sizes.length; i++) {
    if (sizes[i][0] > sizes[i][1]) {
      if (w < sizes[i][0]) {
          w = sizes[i][0];
      }
      if (h < sizes[i][1]) {
          h = sizes[i][1];
      }
    } else {
      if (w < sizes[i][1]) {
          w = sizes[i][1];
      }
      if (h < sizes[i][0]) {
          h = sizes[i][0];
      }
    }
  }
  return w * h;
}

계속 고민해봤지만 끝내 스스로 해결 못했었다. 결국 다른 사람의 정답을 보고 이 코드를 해결하려고 했었지만 여전히 몰랐었다. 다만 해당 문제를 팀원들과 의논 해서 마침내 이해하였다. 어떤 배열이 [a,b]일때 a>b 상태라면 for문 바로 아래 if문을 수행을 하고, 그 반대인 a<b이면 그 아래에 있는 else 문 아래를 실행해서 최대 숫자들 중의 최댓값 숫자와 최소 숫자들의 최댓값을 찾는 문제였다.
아래는 매니져님이 올려주신 모법답안이다. 변수 선언이랑 일부 다른 점은 있지만 푸는 방법은 비슷했다.

느낀 점

사실 문법이라면 이전에 c나 java, python의 문법정도는 어느정도 예전에 봐서 그런지 웹개발 종합반에서 잠깐 맛본 것 뺴곤 처음이였지만 그래도 어려운 부분은 그렇게 많지 않았다. 다만 코딩테스트는 정말로 골치 아팠고, 이걸 응용해서 코딩테스트 문제 푸는것은 정말 어려웠었다. 물론 이번 코딩테스트 문제는 내일 배울 예정인 배열문이 있긴 했었지만, 그래도 배열문도 역시 이전에 알고 있었음에도 끝내 2시간 넘게 못 풀고, 결국 다른 사람이 적은 정답 코드를 보고 팀원들이랑 같이 이해하려고 노력해서 겨우 알게 되었다. 이처럼 응용 하는데에서 조금 더 머리를 써야 하는 부분인 것 같다. 그리고 자바 스크립트의 개념들도 어느정도 이해해야 할 것 같은 느낌을 받았다.

앞으로 계획

내일은 자바스크립트의 심화 문법인 함수의 배열과 리스트형을 좀 더 보게 된다. 물론 해당 부분도 다른 언어 문법에서도 좀 봐서 할만 할것 같지만 내일거의 코딩테스트 문제가 걱정이 되는 부분이다. 내일은 코딩테스트 문제를 스스로 한번 해결해보려고 노력을 할 예정이다.