자바스크립트 기본 문법 정리 및 용어정리

 

자바스크립트의 기본적인 문법을 알아보고 내용을 정리하고자 블로그에 글을 쓰려고 한다. 

해당 내용은 공부하며 적은 필기 내용이다.

 

 

1. 변수

자바스크립트에서 변수는  var, let, const  와 같은 키워드를 이용해 선언할 수 있다.

---

 var  

ES5까지 변수를 선언할 수 있는 유일한 방법은 var키워드였다. 아래와 같은 특징이 있지만 문제점도 있다.

 

• 함수 레벨 스코프 : 전역 변수의 남발/ for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
• var 키워드 생략 허용 : 의도하지 않은 변수의 전역화
• 변수 중복 선언 허용 : 의도하지 않은 변수값의 변경
• 변수 호이스팅 : 변수를 선언하기 이전에 참조할 수 있다.

 

 let 

블록 레벨 스코프

 

 

 const 

한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓴다.  const는 반드시 선언과 동시에 할당이 이루어져야 한다. 그렇지 않으면 문법 에러(SyntaxError)가 발생한다. 만약 const 변수의 타입이 객체인 경우, 객체에 대한 참조를 변경하지 못한다. 하지만 이때 재할당은 불가능 하지만 할당된 객체의 내용 ( 프로퍼티의 추가, 삭제, 프로퍼티 값의 변경)은 변경할 수 있다.

 

* 함수 레벨 스코프 (function-level scope)

- 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

 

* 블록 레벨 스코프 (Block-level scope)

- 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

 

2. 데이터 타입

자바스크립트는 아래 7개의 데이터 타입을 제공한다. 

• number : 정수와 부동 소수점을 저장하는 데 쓰인다.
• string : 문자열을 저장하는데 쓰인다.
• boolean : 논리값 true/false를 저장하는데 쓰인다.
• null : '비어있음','존재하지 않음'을 나타내는 null값만을 위한 독립 자료형
• undefined : 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형
• symbol : 고유한 식별자를 만들 때 사용 (ES6 부터 추가되었다.)
• object : 자료구조를 저장하는데 쓰인다.
  
  

타입을 확인하고 싶다면 아래와 같이 tpyeof 연산자를 사용하면 된다. 여기서 null의 type값은 object로 찍힌다. 이는 자바스크립트의 설계상 오류라고 한다. 

 

const num = 12;
const str = "안녕하세요";
const bol = true;
const foo = null;
let joo;
let sym = Symbol('key');

console.log(typeof num); //output : number
console.log(typeof str); //output : string
console.log(typeof bol); //output : boolean
console.log(typeof foo); //output : object
console.log(typeof joo); //output : undefined
console.log(typeof sym); //output : symbol

 

 

3. 연산자

3.1 산술 연산자 

 - 이항 산술 연산자와 단항 산순 연산자로 구분할 수 있으며, 산술 연산을 할 수 없는 경우에는 NaN을 반환한다.

 - 이항 산술 연산자는 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다.

 - 단항 산술 연산자는 1개의 피연산자를 대상으로 연산한다.

 -  + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

 

이항 산술 연산자	의미	단항 산술 연산자	의미
+	덧셈	++	증가
-	뺄쎔	--	감소
*	곱셈	+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다
/	나눗셈
%	나머지	-	양수를 음스로 음수를 양수로 반전한 값을 반환한다.
**	제곱

let x = 5;
let y = 2;
let a = 'java';
let b = 'script';

// 이항 산술 연산자
console.log(x+y); // output : 7
console.log(x-y); // output : 3
console.log(x*y); // output : 10
console.log(x/y); // output : 2.5
console.log(x%y); // output : 1
console.log(x**y); // output : 25
console.log(a+b); // output : javascript

let x = 5;

// 단항 산술 연산자
result = x++;
console.log(result, x); // output : 5 6

result = x--;
console.log(result, x); // output : 5 4 

result = ++x;
console.log(result, x); // output : 6 6

result = --x;
console.log(result, x); // output : 4 4

 

 

3.2 할당 연산자

 - 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

 

할당 연산자	동일표현
=	x = y
+=	x = x + y
-=	x = x - y
*=	x = x * y
/=	x = x / y
%=	x = x % y

let x = 10;
console.log(x); // output : 10

x += 5;   
console.log(x); // output : 15

x -= 5;   
console.log(x); // output : 10

x *= 5;   
console.log(x); // output : 50

x /= 5;   
console.log(x); // output : 10

x %= 5;   
console.log(x); // output : 0

let str = 'My name is ';
str += 'S-bug'; 
console.log(str); // output : My name is S-bug

 

3.3 비교 연산자

 - 좌항과 우항의 피연산자를 비교하여 blooean 값을 반환한다. 

 - if문이나 for문과 같은 제어문의 조건식에서 주로 사용된다.

 - 동등 비교 (==) 연산자는 좌항과 우항의 연산자가 타입이 같지 않더라도 타입을 일치시킨 후 비교한다. 이러한 경우 때문에 수많은 부작용을 일으킬 수 있으므로 일치 비교( === ) 연산자를 사용하는 편이 좋다.

 

비교연산자	예시	설명
==	x == y	x와 y의 값이 같음 (동등 비교)
===	x === y	x와 y의 값과 타입이 같음 (일치 비교)
!=	x != y	x와 y의 값이 다름 (부등 비교)
!==	x !== y	x와 y의 값과 타입이 다름 (불일치 비교)
>	x > y	x가 y보다 크다
<	x < y	x가 y보다 작다
<=	x >= y	x가 y보다 크거나 같다
>=	x <= y	x가 y보다 작거나 같다

let x = 10; // 숫자형
let y = '10'; // 문자형
let z = 5; // 숫자형

console.log(x == y); // true
console.log(x === y); // false
console.log(x != y); // false
console.log(x !== y); // true
console.log(x > y); // false
console.log(x > z); // true
console.log(x < z); // false
console.log(x >= z); // true
console.log(x <= z); // false

 

3.4 논리 연산자

 - 좌항과 우항의 피연산자를 논리 연산한다.

 - AND연산자 ( && )와 OR연산자 ( || )는 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환한다.

 

논리연산자	설명
||	OR (선언한 조건중 하나만 맞아도 true)
&&	AND (선언한 조건이 다 맞아야 true)
!	NOT (논리를 부정할 떄 사용)

 

3.5 그외 기타 연산자

 - 삼항 조건 연산자 : 조건식 ? trure : false

const x = 2;
const result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

 - 쉼표연산자 : 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 반환한다.

 - 그룹연산자 : 그룹 내의 표현식을 최우선으로 평가 

 - typeof 연산자 : 데이터 타입을 문자열로 반환

 

4. 조건문

4.1 if..else

 - 조건식의 평가결과가 true일 경우 if문의 다음의 코드 블록이 실행, false일 경우, else문 다음의 코드 블록 실행

 - if.. else문 작성법은 아래와 같다. 만약 조건식을 추가하고 싶다면 else if를 사용하면 된다.

if (조건식) {
  // 조건식이 ture면 실행
  } else {
  // 조건식이 false면 실행
 }
 
 
 if (조건식1) {
  // 조건식1이 ture면 실행
  } else if (조건식2) {
  // 조건식2이 ture면 실행
 } else {
  // 조건시 1,2 모두 false면 실행
 }

 

4.2 switch

 - 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.

switch (표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2가 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없을 때 실행될 문;
}

 

5. 반복문

5.1 for문

 - 조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다. 

 - 가장 일반적으로 사용되는 반복문이다. 작성법은 아래와 같다.

 for (let i = 0; i < 10; i++) {
   console.log(i); 
  } // output : 0 1 2 3 4 5 6 7 8 9

 

5.2 while문

 - 조건문의 true면 코드 블록을 계속 반복하고, 결과가 false이면 실행을 종료한다. 

 - 무한루프를 탈출하려면 탈출 조건을 if문에 부여하고 break문으로 코드 블록을 탈출한다.

 - 작성법은 아래와 같다.

let i = 0;

while ( i < 3 ) {
 console.log(i); 
 i++;
} // output : 0 1 2

 

5.3 do-while문

 - 코드 브록을 실행하고 조건식을 평가한다. 작성법은 아래와 같다.

let i = 0;

do {
 console.log(i);
 i++;
} while (i < 3); // output : 0 1 2

 

 

6. 함수

 - 함수는 지역 변수를 가질 수 있다. 지역 변수는 함수의 본문에 선언된 변수로 함수 내부에서만 접근할 수 있다.

 - 매개변수에 기본값을 설정할 수 있다.

 - 함수는 항상 무언가를 반환한다. return문이 없는 경우 undefined를 반환한다.

 - 함수를 정의하는 방식은 3가지가 있다.

 

6.1 함수 선언문

 -  함수명, 매개변수 목록, 함수 몸체로 주요 코드 흐름을 차지하는 방식이다.

function sum(a, b) {
  let result = a + b;

  return result;
}

 

6.2 함수 표현식

 - 표현식 형태로 선언된 함수. 함수명을 생략하고 작성이 가능하다.

 - 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식이라고 한다.

// 기명 함수 표현식(named function expression)
const foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
const bar = function(a, b) {
  return a * b;
};

 

6.3 화살표 함수

 - 함수 표현식 보다 단순하고 간결한 문법이다.

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

 

 

 

▼ 참고사이트

https://ko.javascript.info/javascript-specials