[2주차] 2. 연산자, 문장, 함수

저희 스터디는 인프런 강의 김영보의 자바스크립트 바이블 시리즈로 스터디를 진행합니다! 
2주차에는 자바스크립트의 연산자와 문법 그리고 함수 개념을 다뤘는데요, 이번 주차의 내용은 다른 언어들을 배울 때에도 접했던 내용이라 복습하면서 튼튼한 기본기를 만든다는 생각으로 공부했습니다 😎

주차	진도	강의시간(분)	기간
2주차	2. 연산자, 3. 문장, 4. 함수	105	21년 10월 8일 ~ 21년 10월 14일

 

연산자

Operator

• 규칙에 따라 계산하여 값을 구함
• 연산자의 형태
  • +, -, *, /, %
  • >, ≥, <, ≤
  • ==, !=, ===, !==
  • , , typeof, delete, void
  • instanceof, in, new

---

표현식

• 표현식의 형태
  • 1 + 2
  • var total = 1 + 2;
  "표현식을 평가"하면 결과가 반환되며, 이를 평가 결과라고 한다.

---

할당 연산자

• 단일 할당 연산자
  • = 하나만 사용
  • var result = 1 + 2;
• 복합 할당 연산자
  • = 앞에 연산자 붙음
  • +=, -=, *=, /=, %=
  • <<=, >>=
  • 먼저 = 앞을 연산한 후 할당
    • var point = 7;
    • point += 3;

---

산술 연산자

+ 연산자

• 양쪽의 평가 결과를 더함var value = 1 + 2 + 4; console.log(value); // 7
• 평가 결과 연결
  • 한 쪽이 숫자가 아니라면 연결함
  var two = "2"; var value = 1 + two; console.log(value); // 12 console.log(typeof value); // string
• 왼쪽 → 오른쪽으로 연산1 + 5 + "ABC" = 6ABC

---

숫자로 변환

• JS는 연산하기 전에 우선 숫자로 변환을 시도한다.
• 변환된 값으로 연산한다. 
  
  

  Undefined	NaN
  Null	+0
  Boolean	true: 1, false: 0
  Number	변환 전/후 같음
  String	값이 숫자이면 숫자로 연산함. 단, 더하기(+)는 연결.

---

후치, 전치, 논리 NOT 연산자

후치 ++ 연산자

• 형태: value++
• 문장 수행 후 값을 자동으로 1 증가시킨다. 즉, 세미콜론 다음 증가시킨다.

---

전치 ++ 연산자

• 형태: ++value
• 문장 안에서 1 증가시킨다. 표현식 평가 전 1을 증가시키는 것이므로 표현식에서 증가된 값을 사용한다.

---

후치 -- 연산자

• 형태: value--
• 문장 수행 후 1 감소시킨다.

---

전치 -- 연산자

• 형태: --value
• 문장 안에서 1 감소시킨다.

---

! 연산자

• 논리 NOT 연산자
• 형태: !value
• 표현식 평과 결과를 true, false로 변환한 후 true는 false, false는 true로 반환한다.
• 원래 값을 바뀌지 않고 사용할 때만 변환한다.

• console.log(!!"A"); 
  // A는 true, !A는 false, !!A는 true 
  // ES3에서 자주 사용하던 방식 
  // 안전하게 true, false로 변환하기 위함

---

유니코드, UTF

유니코드

• 세계 모든 문자를 통합하여 코드화한 것
• 언어, 이모지 등을 포함한다.
• 코드 값을 코드 포인트(Code Point)라고 부른다.
• 0000FFFF, 100001FFFF 값에 문자를 매핑한다.

유니코드 표기 방법

• u와 숫자 형태로 작성한다. (ex. u0031은 숫자 1)
• JS는 u 앞에 역슬래시()를 붙인다.
• 역슬래시()를 문자로 표시하려면 역슬래시(\) 2개를 작성한다.
• ES6에서 표기 방법이 추가되었다. (10000~1FFFFF 다섯 자리를 지원한다.)

---

UTF

• Unicode Trnasformation Format
• 유니코드의 코드 포인트를 매핑하는 방법
• UTF-8, UTF-16, UTF-32로 표기한다.
• UTF-8은 8비트로 코드 포인트를 매핑하는 것이다.
• 8비트 인코딩이라고도 부른다.
• 반대로 디코딩도 있다.

---

관계 연산자

• <, >, <=, >= 연산자, instance of 연산자, in 연산자> 연산자
• 양쪽이 Number 타입일 때는 왼쪽이 오른쪽보다 크면 true, 아니면 false를 반환한다.
• String 타입은 한 쪽이 String 타입이면 false, 양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교하며 문자 하나씩 비교한다.
• 코드 포인트는 유니코드를 등록할 때 부여한다. 유니코드 등록 순서로 비교한다는 것은 유니코드 사전 순서로 비교한다는 말과 같다.
• console.log("\u0033" > "\u0032") // true console.log("A" > "1") // true
• <, <=, >=는 비교 기준만 다른 것이다.

---

동등, 부등, 일치, 불일치 연산자

== 연산자

• 동등 연산자이다.
• 왼쪽과 오른쪽 값이 같으면 true, 다르면 false를 반환한다.
• 값 타입은 비교하지 않는다. 1과 "1"은 같다.
• 값 타입이 다르면(문자:숫자, 숫자:문자 일 때) 문자 타입을 숫자 타입으로 변환하여 비교하기 때문에 true를 반환한다.

!= 연산자

• 부동 연산자
• a != b와 !(a == b)는 같다.

=== 연산자

• 일치 연산자
• 왼쪽과 오른쪽의 값과 타입이 모두 같으면 true, 값 또는 타입이 다르면 false를 반환한다.
• 1 === "1"은 false를 반환한다.!== 연산자
• var value; // undefined console.log(value == null); // true console.log(value === null); // false undefined와 null은 모두 값이기 때문에 ==로 비교하면 true이다.
• 불일치 연산자
• 값 또는 타입이 다르면 true, true가 아니면 false를 반환한다.

---

문장

화이트 스페이스

• 사람 눈에 보이지 않는 문자
• 가독성을 위한 것
• 문자마다 기능을 갖고 있음
• ex. Space, Enter, Tab
• 라인피드(LF, Line Feed)
  • 현재 위치에서 바로 아래로 이동
• 캐리지리턴(CR, Carriage Return)
  • 커서의 위치를 앞으로 이동
• 한 줄을 내려서 작성하기 위해서는 CRLF를 함

---

if, debugger

if

• 조건에 따른 처리
• 표현식 평가 결과를 true/false로 변환
• 확장성과 일관성을 위해서 블록 사용 권장
• if 안에 포함된다는 것을 시맨틱하게 표현 가능

---

debugger

• deubugger 위치에서 실행 멈춤
• 브라우저의 개발자 도구 창이 열려 있을 때만 멈춤
• 열려있지 않으면 멈추지 않음
• 검증하고 싶은 코드 중간에 debugger문을 사용하면 코드 실행 시 breakpoint가 됨
• 테스트할 때 사용

---

try-catch, throw

try-catch

• try 블록 catch (식별자) 블록try 블록 catch (식별자) 블록 finally 블록
• try 블록 finally 블록
• try 문에서 예외 발생 인식
  • 예외 발생 시 catch블록 실행
  • finally블록은 예외와 상관없이 실행
• 에러가 발생할 가능성이 있으면 반드시 사용
• 에러 발생 시 파라미터 error에 JS의 Error 오브젝트 설정

---

throw

• throw 표현식;
• 명시적으로 예외 발생 → catch문 실행try{ throw "예외 발생시킴"; var sports = "스포츠"; } catch(error){ console.log(error); console.log(sports); }; //예외 발생시킴 //undefined
• Error 오브젝트 사용

---

Strict 모드

• "use strict"
• 엄격한 JS 문법의 사용 선언

---

함수

Function

• 특정 기능을 처리하는 자바스크립트 코드 묶음

function book(){ 
	var title = "JS 책"; 
}; 
var point = function(one, two){ 
	var total = one + two; 
	var bonus = total + 100; 
};

Body

• { } 내의 코드
• 함수 코드, 소스 텍스트

이름 규칙

• 첫 문자
  • 영문자, $, 언더바 사용 가능
  • 숫자, &, *, @, + 사용 불가능
• 권장 작명 방법
  • 함수 이름과 파라미터로 기능을 알 수 있도록
  • Semantic

---

주석

주석 작성의 궁극적인 목적

• 코드 작성 시나리오 생각하고 정리하는 것
• 코드를 작성하기 전에 정리한 생각을 주석으로 작성
• 생각 👉 정리 👉주석 👉 문법에 맞게 코드 작성

주석 작성 기준

• 코드의 목적과 결과가 미치는 영향을 작성
• 다른 사람이 알 수 있도록 자세하게 작성

주석 사례

• 첫 번째 줄에 함수의 목적을 간략히 작성한다
• 두 번째 줄에는 이 함수와 관련 있는 기능을 다른 함수에서 작성하기로 약속한 내용이나, 예외가 발생할 경우를 적는다