[JS] 9장: 자바 스크립트 기초 문법 살펴보기

개요

이번 장에서는 프로그래밍 언어의 기초 개념을 다루게 된다. 변수와 상수, 자료형을 통해 데이터를 저장하고 처리하는 방법을 익히며, 다양한 연산자를 사용해 데이터를 조작하는 법을 배울 것이다. 이어서 조건문과 반복문을 통해 프로그램의 흐름을 제어하는 기초적인 논리 구조를 학습하게 된다.

이 장은 원래 11일과 12일에 걸쳐 학습하도록 설계되어 있지만, 나는 이미 다른 언어를 통해 어느 정도 프로그래밍에 익숙한 상태다. 또한, CSS 학습 일정이 다소 밀린 관계로 이번에는 2일치 분량을 한 번에 이어서 학습하려 한다. 이번 장에서 다룰 내용은 매우 기본적이지만, 프로그래밍의 핵심 개념을 다시 한 번 정리하는 기회로 삼고, 실전 응용에서 활용할 수 있는 기초를 다지는 것이 목표다.

변수와 상수

변수

var num = 10 + 20;

변수 : 변하는 수. 

키워드(예약어) : 이미 어떤 역할이나 기능이 정해진 단어. 
ex) async, await, break, case, catch 등.

식별자 : 자바 스크립트 내부에서 변수, 함수 등에 부여되는 이름. 
메모리에 저장되는 변수를 더 쉽게 불러오기 위해 사용하는 별명.
식별자보다는 변수명/함수명 등으로 더 자주 불린다.

연산자 : 연산작업을 할 때 사용되는 기호.
ex) = : 할당 연산자

표현식 : 평가되어 하나의 값을 반환하는 식 또는 코드. 
ex) 10 + 20 

값 : 더 이상 평가할 수 없는 데이터. 

세미콜론 : 문장의 끝을 알리는 기호.

선언, 할당, 초기화 : var num 까지가 선언, = 10 + 20 이 할당, 두 작업을 동시에 하는게 초기화.

새로운 변수 선언 let

ES6에서 새로 추가된 변수 선언 키워드.

1. 변수명 중복이 불가능하다.
   두 번 같은 이름의 변수가 선언되면 SyntaxError가 발생한다.
2. 호이스팅되지 않는다. 
   변수의 선언이 반드시 사용에 선행되어야 한다. 그렇지 않으면 ReferenceError가 발생한다.
3. 스코프의 범위가 다르다.
   var는 함수 스코프를 가지지만 let은 블록 스코프를 가진다.
   이 차이 때문에 실무에서 권장된다.
   하지만, let 키워드는 최근에 추가됐기 때문에 일부 브라우저에서 완벽하게 지원하지는 않는다.

상수

const 키워드로 생성된다.

let과 거의 유사한 기능을 갖지만,  재할당이 불가능하고 선언시 초기화가 동반해야 한다는 특징을 가지고 있다.

식별자 명명 규칙

변수와 상수의 이름을 짓는 규칙.

강제 :
키워드 사용 불가
공백 포함 불가
첫 글자는 영문, _와 $만 가능. 대문자 지양.

관용 : 
식별자는 영문으로만, 의미 있는 단어로 작성.

표기법 : 
카멜 표기법 = (camelCase)
언더스코어(스네이크) 표기법 = (snake_case) (UNDERSCORE_CASE)
파스칼 표기법 = (PascalCase)

자료형

자료형 : 자바스크립트에서 사용할 수 있는 데이터의 종류.

기본 자료형 vs 참조 자료형 : object 제외하고 모두 기본.

문자열 (string)

let string1 = 'this is \' " `';
let string2 = "this is ' \" `";
let string3 = `this is ' " \``;

"a", 'b', `c`로 둘러싸인 값의 형태.
시작과 끝은 반드시 일치해야 한다.
문자열 안에 같은 종류의 따옴표를 포함한다면 \(백슬래시)를 통해 출력할 수 있다.

+ : 문자열 연결 연산자. (숫자형이라면 덧셈으로도 쓰인다.)

\ : 이스케이프 문자(원 기호도 같은 기능을 한다.)
기호나 줄바꿈, tab이 필요할 때 주로 사용된다.

백틱(템플릿 문자열)은 변수 삽입 기능( ${ } )과 Enter 인식 기능을 제공하지만, 이 작업이 불필요하다면 가독성에 악영향을 끼칠 수 있다.

숫자형 (number)

자바 스크립트는 다른 언어와 다르게 정수와 실수를 구분하지 않는다.

하지만, 실수를 사용할 때는 부동소수점 오류때문에 주의하여야 한다. 
ex) 0.1 + 0.2 오류.

논리형 (boolean)

true, flase를 뜻한다.

undefined

선언 후 할당이 이루어지지 않은 상태를 의미한다. 

null

의도적으로 공간을 비워둘 때 사용된다.

undefined는 실수인지 의도인지 불분명하므로 비울 필요가 있다면 null의 사용이 권장된다.

객체 (object)

위에 언급된 자료형이 아니라면 모두 object 형이며, 참조 자료형이다.

배열, 객체, 리터럴, 함수 등이 여기에 속한다. 

let array = [10, '20', false, null, [], {}, function(){}];

for (let i = 0; i < array.length; i++) {
    console.log(typeof(array[i]));
    //결과 : number, string, boolean, object * 3, function
}

배열 : 복수의 데이터를 정의할 수 있는 자료형이다. 
위의 코드에서 null이 object로 출력되는건 js 오류이다.

let score = {
    language : 80,
    english : 70,
    mathmatics : 90
};

객체 리터럴 : 객체를 정의하는 가장 간단한 방법이다. 중괄호를 사용하고 키-값 쌍으로 이루어진 속성이 들어간다.

연산자

연산자 : 연산을 처리하는데 미리 정의된 기호.

= : 할당 연산자.

산술 연산자

# 이항 산술 연산자

연산을 수행할 때 피연산자가 2개 필요한 연산자.

+, -, *, / : 사칙연산.

% : 나눗셈의 나머지.

** : 거듭제곱 연산. 

# 단항 산술 연산자

피연산자가 1개 필요한 연산자.

++, -- : 피연산자를 1 증/감 시켜준다.

# 단항 부정 연산자

- 기호 : 그냥 수학에서의 음수를 만들어주는 것과 같은 원리.

대입 연산자와 복합 대입 연산자

대입 연산자 : (=) 기호. 할당 연산자와 같은 말.

# 복합 대입 연산자

let num1 = 3;
num1 *= 3 + 6;
console.log(num1); //27 출력.

+=, -=, *=, /=, %=, **= : 자기 자신과 엮어서 결과를 도출한다. =기호와 결합된 연산은 가장 마지막에 실행된다.

비교 연산자

== : x와 y의 값이 같으면 자료형과 무관하게 true를 반환한다.

=== : x와 y의 값이 자료형까지 일치하면 true를 반환한다. js에서는 이쪽이 더 자주 쓰인다.

!= : ==의 반대 boolean 출력.

!== : ===의 반대 boolean 출력.

<, <=, >, >= : 수학의 대소비교 연산자들과 같은 역할을 한다. 단, number형이 아니라면 아래와 같은 규칙을 따른다 :

• 문자열은 유니코드 값에 따라 비교된다.
• 불리언은 숫자로 변환되어 true는 1, false는 0으로 처리된다.
• 객체는 원시값으로 변환된 후 비교된다. 배열도 문자열로 변환되어 비교된다.
• null은 0으로, undefined는 NaN으로 변환되어 비교된다.

논리 연산자

&& : AND

|| : OR

! : NOT

삼항 연산자

let num1;
num1 = (3 > 4)? "맞다" : "틀리다";
console.log(num1);

조건문에 따라 참이면 왼쪽, 거짓이면 오른쪽 값을 반환한다.

연산자 우선 순위

사실 대충 감각으로 때려맞히는게 외우는거보다 빠를지도...?

형 변환

암시적 형 변환 : 키워드 없이 내부적으로 이루어지는 형 변환.

명시적 형 변환 : 자료형() 의 형식을 사용해 직접 형을 바꾸는 것. 

암시적 형 변환이 이루어지지 않도록 지양하는 편이 좋다.

조건문 다루기

if, else, else if 문

if (조건식) { } 형태로 사용하며 {} 안의 내용은 조건식이 true일때만 적용된다.

else는 거짓일 때 들어가는 구문.

else if 는 if 의 조건은 거짓이지만 그 다음 조건이 true일 때 들어가는 구문. 여러차례 중복될 수도 있다.

switch 문

key와 일치하는 case로 즉각 넘어간다느 특징이 있다. 

default는 모든 case와 일치하지 않을 때 들어간다.

각 case문마다 break를 넣어주지 않으면 2개의 경우가 동시 발동되어버린다.

if문과 조건식

if문의 조건식에는 2개 이상의 조건식을 &&, || 등을 통해 연결할 수도 있다.

if 문 vs switch 문

둘의 결정적 차이는 조건의 형태다. 

if 문 : 조건식.

switch 문 : 일치하는 값.

따라서 필요한 조건이 범위 또는 단일 값인지 여러 값인지에 따라 그 사용이 갈린다.

반복문 다루기

while 문

조건식이 참일 동안 계속 반복되는 블록.

무한 반복문

탈출할 수 없는 반복문. 주로 while의 조건을 잘못 입력할 때 발생한다.

do...while 문

do 문 안의 내용을 일단 1번 실행하고 그 후 조건에 따라 추가적인 반복을 실행하는 블록.

for문

초기값, 조건식, 증감식을 통해 블록문을 반복실행하는 반복문. 

for 문과 배열

배열의 크기는 arr.length로 불러올 수 있다. 이를 통해 배열을 for문에서 유용하게 활용할 수 있다.

for...in

for(가변수 in 배열/리터럴) 의 형태로 사용한다. 

일반 for문처럼 배열을 순회하지만, 배열의 값을 가변수로 사용할 수 있다는 특징이 있다. 대신, 몇 번째 반복인지는 알 수 없다.

break문

반복문을 탈출하는 방법이다. 만약 중첩 반복문이라면 한 겹의 반복문만 탈출한다.

continue문

반복문의 하위식을 무시하고 다시 조건으로 돌아가는 키워드이다.

마무리

이번 장에서는 자바스크립트의 기초적인 개념들을 다루었는데, 내용이 이미 익숙한 부분이 많아 전반적으로 수월하게 학습할 수 있었다. 특히 변수와 상수, 자료형, 연산자, 조건문, 반복문에 관한 내용은 다른 언어에서도 기본적으로 다루는 개념이기 때문에 큰 어려움 없이 이해할 수 있었다.

변수와 상수 부분에서는 let, const, var의 차이점에 대해 다시 한번 정리할 수 있었고, 각 선언 방식의 스코프와 재할당 가능 여부를 명확히 짚어볼 수 있었다. 자료형에서는 JavaScript의 동적 타이핑 특성에 대해 다시 상기할 수 있었고, 연산자 부분에서는 동등 연산자(==, ===)의 차이에 대해 복습하며 자바스크립트만의 특성을 다룰 수 있었다.

특히 조건문과 반복문과 같은 제어 구조는 다른 언어에서도 자주 접한 부분이라 큰 어려움 없이 진행되었고, 자바스크립트의 switch 문이나 다양한 반복문(for, for...in, for...of)을 다시 한 번 살펴볼 수 있었다. 다른 언어와 마찬가지로 흐름 제어가 자바스크립트에서도 어떻게 이루어지는지를 정리하는 좋은 기회였다.

전체적으로 이번 장의 학습 내용은 이미 알고 있던 개념들이 대부분이었기 때문에 1~3챕터보다 오히려 4~5챕터가 더 쉽게 느껴졌다. 특히 4, 5챕터는 자바스크립트뿐만 아니라 다른 대부분의 언어에서도 공유하는 문법이어서 익숙함을 느낄 수 있었다.