자바스크립트 (문과 타입)

자바스크립트를 이젠 어느정도 다 안다고 생각했는데,
아직도 모르거나 헷갈리는 내용이 많은 것 같아서 정리하고자 합니다.

1. 문(statement)과 표현식(expression)은 뭐가 다를까?

문(statement)

컴퓨터가 수행할 명령을 문(statement)이라 한다.
문은 리터럴, 연산자, 표현식, 키워드로 구성되며 세미콜론으로 끝난다.
일반적으로 위에서 아래로 순서대로 실행된다.

var age = 20; 

상수와 리터럴이 같은 말인 줄 알았는데 차이점이 있었다.
상수: 변하지 않는 '변수'
리터럴: 변하지 않는 '값' 또는 '데이터'

함께 실행되어야할 문을 정의하기 위해 코드블록으로 그룹화를 할 수 있다.

// if 문
if(age > 20) {

}

개발자 도구에서 표현식이 아닌 문은 언제나 undefined를 반환하고, 표현식인 문은 언제나 값을 반환한다.

표현식(expression)

하나의 값으로 평가되는 것을 표현식(expression)이라 한다.
값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이다.

// 표현식
// 표현식
5             // 5, 값(리터럴)
5 * 10        // 50, 피연산자와 연산자의 조합
(5 * 10 > 10) && (5 * 10 < 100)  // true, 피연산자와 연산자의 조합
sum // 식별자 표현식
square() // 함수/메소드 호출 표현식

문과 표현식의 비교

표현식은 그자체로 문이 될 수 있다.
표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다.
표현식을 통해 평가한 값을 통해 실제로 컴퓨터에게 명령을 하여 무언가를 하는 것은 문이다.

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.
// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

2. 원시타입의 특징

• 변경 불가능한 값(immutable)이며 값이 복사되어 전달(pass-by-value)된다.
• 숫자 타입은 모든 수를 실수로 처리한다.
• 불리언 타입에서 null, undefined, 숫자 0은 false로 간주된다.
• 선언은 되었지만 값이 할당되지 않은 변수는 메모리 공간에 쓰레기 값(Garbage value)이 들어 있는데, 자바스크립트는 이를 undefined 로 초기화 한다.
• null은 변수가 기억하는 메모리 주소의 참조 정보를 제거하는 것을 의미하며 자바스크립트 엔진은 누구도 참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.

가비지 콜렉션: 할당된 메모리 블록이 더 이상 필요하지 않게 되었는지를 판단하여 회수하는 자동 메모리 관리법, 고수준 언어에서 사용된다.
참고: JavaScript의 메모리 관리 - 가비지 콜렉션

3. 단항연산자가 갖는 특징

+ 단항연산자의 특징

+ 단항 연산자는 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 여기서 주의할 점은, 음수를 양수로 반전하지 않는다. 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다.

+10 // 10
+'10' // 10
+true // 1
+false // 0
+'-10' // -10

- 단항연산자의 특징

– 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. + 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다

-10 // -10
-'10' // -10
-true // -1
-false // -0

4. Null 타입은 Object?

typeof연산자를 통해 null의 타입을 확인해보면, null이 아닌 object를 반환한다.
따라서 null의 타입을 확인할 땐 일치연산자(===)를 사용한다.

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

5. 블록문은 단독으로 사용이 된다

블록문(Block statement/Compound statement)는 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다
일반적으로 블록문은 제어문 혹은 함수 선언시 사용되지만 단독으로도 사용할 수 있다.

// 블록문
{
  var foo = 10;
  console.log(foo);
}

// 제어문
for (let i = 0; i < 10; i++) {
  console.log(i); 
}

// 함수 선언문
function sum(x, y) {
  return x + y;
}
console.log(sum(1, 2)); // 3

6. 삼항연산자도 표현식이다

삼항연산자는 마찬가지로 연산자이기에 표현식이며 다른 표현식의 일부가 될 수 있음.

var num = 2;
var kind = num ? (num > 0 ? '양수' : '음수') : '영';
console.log(kind); // 양수

7. 레이블문?

레이블 문(label statement)은 식별자가 붙은 문으로, 프로그램의 실행 순서를 제어하기 위해 사용한다. switch 문의 case 문과 default 문도 레이블 문이다. 레이블문을 탈출하려면 break를 사용하여 탈출한다.

foo: { // foo라는 식별자가 붙은 레이블 블록문
  console.log("face");
  break foo; // foo 레이블에서 탈출한다.
  console.log("this will not be executed");
}
console.log("swap");
// 로그는 이렇게 출력된다:
// "face"
// "swap

break 문은 레이블 문 뿐만이 아니라 반복문, switch 문에서도 사용할 수 있다.

8. 단축평가는 왜 사용할까?

// 논리합(||) 연산자
'Cat' || 'Dog'  // 'Cat'
false || 'Dog'  // 'Dog'
'Cat' || false  // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog'  // Dog
false && 'Dog'  // false
'Cat' && false  // false

단축평가는 react에서 조건에 따라 보여져야할 컴포넌트를 정의할 때 사용되기도 하며, 함수에서는 아래와 같이 사용된다

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength();     // 0
getStringLength('hi'); // 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length;
}

getStringLength();     // 0
getStringLength('hi'); // 2

인수를 전달하지 않으면 매개변수는 undefined를 갖기 때문에 단축평가를 사용하여 에러를 방지한다.

문과 타입편을 마무리하며

참고
자바스크립트의 기본 문법
Constant vs Literal : 상수와 리터럴의 차이점?