[메가바이트 스쿨] FE 3기 online - JS 시작하기

seokji·2022년 9월 22일

JavaScript MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

메가바이트 FE 3기

목록 보기

6/15

JS 시작하기

🟨 개요(ECMAScript)

줄여서 ES라고 불리는 ECMAScript는, 표준화된 자바스크립트를 뜻합니다.
ES6(2015)의 등장이후 자바스크립트는 큰 변화를 겪었고, 전성기를 맞게 되었습니다.

❗ 1년에 한 번씩 기술 업데이트가 진행, 현재는 ES2022

🟨 데이터 타입 확인

typeof 연산자

console.log(typeof "string"); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
 
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof []); // object

typeof 연산자를 사용하면 데이터의 타입을 확인할 수 있습니다.

❗ 하지만 대상 데이터의 세부 항목을 구체적으로 검사할 수 없다는 한계가 있습니다.

타입 검사 함수

typeof 연산자의 한계를 극복하기 위해서, 타입 검사 함수를 만들어 줍니다.

function getType(data) {
  // 각 메서드들은 후에 자세히 다루겠습니다.
  return Object.prototype.toString.call(data).slice(8, -1);
}
	
console.log(getType(123)); // Number
console.log(getType(false)); // Boolean
console.log(getType(null)); // Null
console.log(getType({})); // Object
console.log(getType([])); // Array

getType함수를 이용하면 세부적인 타입까지 확인할 수 있습니다.

🟨 산술 • 할당 연산자

산술 연산자

자바스크립트는 기본적인 산술 연산자(+, -, *, /)와 나머지 값을 얻을 수 있는 % 나머지 연산자를 제공합니다.

% 나머지 연산자를 사용하면 나머지 값을 얻을 수 있습니다.

console.log(9 % 5); // 4

할당 연산자

할당 연산자란 값을 할당해주는 연산자로 =로 값을 할당 합니다.

산술 연산자를 이용하면 간편하게 값을 할당할 수 있습니다.

let x = 1;
console.log(x)// 1

// 산술 연산자를 이용한 할당 (+, -, *, /, % 전부 적용 가능)
x += 1;
console.log(x)// 2

🟨 비교 연산자

비교 연산자는 수학 시간에 배운 비교 연산자를 생각하면 쉽습니다.

그 외에 동등(부등), 일치(불일치) 연산자에 대해 알아보겠습니다.

동등 연산자 (==)

동등 연산자는 값이 같으면 참을 반환하는 연산자 입니다.

→ 동등 연산자의 경우 타입이 서로 다른 피연산자를 비교할 때 숫자로 타입을 변형합니다. 그 결과 0과 false를 비교할 수 없게 됩니다.

console.log(1 == '1') // true
console.log(0 == false); // true

일치 연산자 (===)

일치 연산자는 값과 타입이 같으면 참을 반환하는 연산자입니다.

console.log(1 === '1') // false
console.log(0 === false); // false

const x = 1;
const y = 1;
console.log(x === y); // true

❗ 동등 연산자와 일치 연산자의 차이는 타입 비교
에러가 발생할 확률을 줄이고 더 정확한 결과를 얻기 위해서 일치 연산자 "==="를 사용

❗ 부등, 불일치 연산자는 앞에 !를 붙여서 사용

🟨 논리 연산자

자바스크립트에는 총 3개의 || (or), && (and), ! (not) 논리 연산자가 있습니다.

1. || (or) 연산자

인수 중 하나라도 참이면 참을 반환합니다. 그렇지 않을 시 false를 반환합니다.

왼쪽에서 부터 값을 평가합니다.

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

❗ 반환 값이 true일 경우 연산을 멈추고 해당 피연산자의 원래 값을 반환
모든 피연산자가 false일 경우 마지막 값을 반환

2. && (and) 연산자

&& 연산자는 피연산자가 모두 참일 경우 참을 반환하는 연산자 입니다.

왼쪽에서 부터 값을 평가합니다.

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

❗ 모든 피연산자의 값이 참일 경우 마지막 값을 반환

3. ! (not) 연산자

not 연산자는 !를 써서 만들 수 있습니다.
피연산자를 불리언형으로 변환하고, 변환된 값의 역을 반환합니다.

console.log(!true); // false

🟨 삼항 연산자

삼항 연산자는 조건문을 단축해 쓸 수 있는 연산자입니다.

// 기본 문법
조건 ? "참" : "거짓"

const a = 10 < 100;
console.log(a ? "참" : "거짓"); // 참

→ 조건이 참일 경우 ? 뒤 표현식이 실행 되고, 거짓일 경우 : 뒤 표현식이 실행 됩니다.

🟨 조건문 if else

if

조건에 따라 다른 행동을 취할 때 조건문(if 문)을 사용합니다.
표현식의 결과가 참이면 주어진 코드 블록을 실행하고, 거짓이면 실행이 중단됩니다.

// if문 기본 문법
const x = 10;
const y = 20;

if (x < y) {
  console.log(`${x}는 ${y}보다 작다.`); // 10는 20보다 작다.
}

else

if 문에는 else 절을 붙일 수 있습니다. else 절은 조건이 거짓일 경우 코드 블록이 실행됩니다.

const x = 20;
const y = 10;

if (x < y) {
  console.log(`${x}는 ${y}보다 작다.`);
} else {
  console.log("조건이 거짓인 경우!!"); // 조건이 거짓인 경우!!
}

else if

else if를 사용하면 복수의 조건을 쉽게 처리할 수 있습니다.

const x = 20;
const y = 10;

if (x < y) {
  console.log(`${x}는 ${y}보다 작다.`);
} else if (x > y) {
  console.log("else if에 맞는 조건!!"); // else if에 맞는 조건!!
} else {
  console.log("조건이 거짓인 경우!!");
}

🟨 조건문 switch

복수의 if 문은 switch 문으로 바꿀 수 있습니다.
switch 문은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다.
비교 상황을 명확하게 설명한다는 장점이 있습니다.

const mobile = "아이폰";

switch (mobile) {
  case "갤럭시":
    console.log(`사용하는 기기는 ${mobile}`);
    break; // 💥 필수

  case "아이폰":
    console.log(`사용하는 기기는 ${mobile}`);
    break;

  default:
    console.log(`어떤 기기인지 모르겠네요`);
}

// 사용하는 기기는 아이폰

❗ 변수와 case의 value가 일치할 때 까지, 과정을 계속 진행
value가 일치하거나 break를 만나면 코드의 실행이 멈춤
일치하는 value가 없을 경우 default 문 아래의 코드를 실행 (아이폰, 갤럭시가 아닐경우 default 문이 실행)

🟨 반복문 for

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 실행하도록 제어하는 실행문입니다.
프로그램을 처리하는 코드는 반복적인 형태가 많으므로, 가장 많이 실행되는 실행문 중 하나입니다.

그중 for 문은 가장 많이 쓰이는 반복문입니다.

// 기본 문법
for (시작조건; 종료조건; 변화조건) {
  반복문 본문
}

반복문 for는 조건이 참인동안 계속 실행됩니다.

for (let i = 0; i < 3; i++) {
  console.log(i); // 0 1 2
}

❗ i 가 실행된 후 i가 3 보다 작은지 확인, 참이면 로그와 i++를 실행
이 과정을 조건이 참일 동안 계속해서 실행

🟨 변수 스코프

함수 레벨 스코프 (var)

함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조가 불가능합니다.

→ 함수 외부에서 생성한 변수는 모두 전역 변수가 됨. 이는 전역 변수를 남발할 가능성을 높임

블록 레벨 스코프 (let, const)

코드 블록 ({...})내에서 선언된 변수는 코드 블록내에서만 유효하며, 코드 블록 외부에서는 참조가 불가능합니다.

// var
for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log("var", i); // 3

//let
for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log("let", i); // Uncaught ReferenceError: i is not defined