한눈에 보는 자바스크립트 기본 문법

SeoYng·2021년 2월 5일

■ 변수(Values)

값을 할당하고 저장된 값을 참조하기 위해 사용
메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)

let x; // 변수의 선언
x = 6; // 정수값의 할당

// 여러 변수 선언
let a = 1, b = 2, c = 3;
let [a, b, c] = [1, 2, 3]

변수를 선언할 때 var / let / const 키워드를 사용한다.

# var & let & const

	block scope	binds to this	hoisted	redeclation	reinitialization
var	X	if global	O	O	O
let	O	X	X	X	O
const	O	X	X	X	X

❗️ let/const는 호이스팅 되지않는 것이 아니라 영향을 받지 않는 것, TDZ에 들어가 실제 있는 위치에 도달할 때까지 액세스 할 수 없음

■ 값(Literals)

프로그램에 의해 조작될 수 있는 대상

// 숫자 리터럴
10.50
1001

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Lee', gender: 'male' }

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

...

■ 연산자(Operators)

피연산자의 타입은 반드시 일치할 필요는 없음
암묵적 타입 강제 변환을 통해 연산을 수행

let foo = 1 + '10'; // '110'
let bar = 1 * '10'; // 10

💡 '=='와 '==='의 차이
=== 연산자는 일치 연산자로, 두 피연산자의 타입까지 검사해 더 정확하게 비교

■ 주석(Comments)

작성된 코드의 의미를 설명하기 위해 사용

// 한 줄 주석

/*
  여러 줄 줄 주석
*/

■ 키워드(Keywords)

예약어로 수행할 동작을 규정한 것

키워드	설명
break	반복문이나 스위치문 종료
continue	반복문을 빠져나가 다음 단계부터 재시작
debugger	자바스크립트 실행을 멈춤, 디버깅 시 사용
do ... while	명령 먼저 실행한 후, 조건이 참인동안 수행을 반복한다
for	조건이 참인 동안 수행 되는 명령문의 블락을 정의
function	함수 정의
if ... else	조건 설정
return	함수 종료
switch	케이스에 따른 탐색
try ... catch	에러 핸들링 수행
var/let/const	변수 선언

# 기본 예제

break

<반복문이나 스위치문 종료>
for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
}
// 0 1 2

continue

<다음 단계부터 재시작>
for (let i = 0; i < 10; i++) {
  if (i === 3) { continue; }
}
// 0 1 2 4 5 6 7 8 9 10

debugger

<실행을 멈춤>
let x = 1;
x += 2;
debugger; // 여기서 실행 중지
x += 5;

if ... else

<조건 설정>
if(score > 100){
  grade = A;
} else if(score > 90){
  grade = B;
} else {
  grade = C;
}

// 삼항 연산자
grade = score > 100 ? A : score > 90 ? B : C

switch

<케이스에 따른 탐색>
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

while

<조건이 참인 동안 수행>
// while
while (i < 10) {
  i++;
}

// do ... while
do {
  i++;
}
while (i < 10);

❗️ 참고 for문에서 var vs let 정리 글

❓ for 문에서는 초기화 변수에서 const 사용 불가 / for..of/in 문에서는 가능

<조건이 참인 동안 수행>
for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

// for .. of
let cars = ["BMW", "Volvo", "Mini"];
for (const of cars) {
  console.log(car + "<br >");
}

// for .. in
let persons = {fname:"John", lname:"Doe", age:25};
for (let person in persons) {
  person += '!!'
  console.log(person + "<br >");
}
/*
for (const car in cars) {
  console.log(car + "<br >"); // 1, 2, 3 ...
}
*/

// forEach
const array = ['a', 'b', 'c'];
array.forEach(element => console.log(element));
// a b c

function

<함수 정의>
  
// 일반 함수
function square(number) { // 함수의 정의(함수 선언문)
  return number * number;
}
square(2); // 함수의 호출

// 화살표 함수
const square = (number) => number * number

try ... catch

<에러 핸들링>
try {
  nonExistentFunction();
} catch (error) {
  console.error(error);
  // expected output: ReferenceError: nonExistentFunction is not defined
  // Note - error messages will vary depending on browser
}

■ 명령(statement)

웹 브라우저)에 의해 단계별로 수행될 명령들의 집합

// if 문
if(x > 0) {
  // do something
}

// for 문
for (let i = 0; i < 10; i++) {
  // do something
}

■ 표현식(Expressions)

하나의 값으로 평가 되는 것

5 * 10        // 50
5 * 10 > 10   // true
(5 * 10 > 10) && (5 * 10 < 100)  // true

■ 함수(Functions)

어떤 작업을 수행하기 위해 필요한 statement들의 집합을 정의한 코드 블록,
재사용이라는 측면에서 매우 유용

일반 함수

function square(number) {
  return number * number;
}

화살표 함수 - 참고
: 보다 간략한 방법으로 함수를 선언
익명함수 이기 떄문에 화살표 함수를 호출하기 위해서는 함수 표현식을 사용

const square = (number) => number * number

가장 큰 차이점은 this

■ 이벤트(events)

<button onclick="this.innerHTML = Date()">The time is?</button>

이벤트
onchange
onclick
onmouseover
onmouseout
onkeydown
onload

■ 데이터형(Type)

원시 타입

// Number
let num1 = 1001;
let num2 = 10.50;

// String
let string1 = 'Hello';
let string2 = "World";

// Boolean
let bool = true;

// null
let foo = null;

// undefined
let bar;

객체 타입

// Object
let obj = { name: 'Lee', gender: 'male' };

■ 객체(Object)

키(key)와 값(value)로 구성된 프로퍼티(property)의 집합

원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체

let person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }

person.sayHello(); // Hi! My name is Lee