자바스크립트 기본 문법

345·2022년 11월 10일

모던 JavaScript

목록 보기

3/23

❗변수와 상수

자바스크립트에서 변수는 3가지 방법으로 선언할 수 있습니다.

선언 방식	재선언	재할당
var	O	O
let	X	O
const	X	X

선언: 변수명을 등록, 자바스크립트 엔진에 변수의 존재를 알림
초기화: 변수를 위한 메모리 공간 확보, 암묵적으로 undefined 할당
할당: 변수에 값을 지정

var name = "uno";
var name = "hello"; 
name = "hi"; // 재선언, 재할당 가능!

let toy = "car";
let toy // 재선언 불가능!
toy = "train"; // 재할당 가능!

const BIRTHDAY = "0101";
// 재선언도, 재할당도 불가능

📌 자료형

숫자형(number)

수학 연산

Infinity, NaN 같은 특수 숫자 값 포함

BigInt(bigint)

|(2^53-1)| 보다 큰 수를 지원

값 뒤에 n 을 붙여 표현 let number = 133423423424n;

문자형(string)

"" 로 묶어 표현

벡틱( ` ) 을 사용하여 묶으면 문자열 내부 변수 사용 ${variable}

불린형(boolean)

논리 타입

true 와 false 두 가지 값만을 가짐

null

null 값만을 위한 자료형

존재하지 않거나, 비어 있거나, 알 수 없는 값

undefined

undefined 값만을 위한 자료형

값이 할당되지 않은 상태를 나타냄 (ex. 변수 선언⭕, 값 할당❌)

심볼(symbol)

객체의 고유 식별자 생성에 사용

객체(object)

여러 자료형을 포함할 수 있음

1~7은 원시 자료형으로 하나의 자료형만을 표현할 수 있지만, 객체 자료형은 여러 자료형을 표현할 수 있습니다.

typeof 연산자

인수의 자료형을 반환하는 연산자로, 변수 자료형을 파악할 때 사용합니다.

typeof x : 연산자 형태로 x 의 자료형 반환
typeof(x) : 함수 형태로 x 의 자료형 반환

typeof "hello" // "string" 반환
typeof undefined // "undefined" 반환
typeof null // "object" 반환 ❓
typeof alert // "function" 반환 ❓

❓ 자료형이 틀린 것 같은데...?
🧷 null 은 호환성을 위해 object 를 반환합니다.
함수자료형 또한 따로 존재하지 않고, 함수는 객체형에 속합니다. 하지만 호환성 유지를 위해 function 을 반환합니다.

🔔 형 변환

명시적 변환

let value = true;
value = String(value); // "true" 가 됨

let str = "123";
str = Number(str); // 123 이 됨

Boolean("hello"); // true 
Boolean(""); // false

📌 Number 숫자형 변환

undefined ➡️ NaN

null ➡️ 0

true 와 false ➡️ 1 과 0

string ➡️ 빈문자열이면 0, 변환 실패시 NaN, 변환 성공시 숫자

📌 Boolean 불린형 변환

0, null, undefined, NaN, ""(빈 문자열) ➡️ false

그 외 ("0" 이나 공백만 있는 문자열도 포함) ➡️ true

자동 변환

산술 연산

자바스크립트의 연산자 +, -, *, /, %, ** 를 사용할 때 자동으로 형이 변환되기도 합니다. 피연산자가 숫자형인 경우 문제가 없지만, 문자형인 경우 형변환이 일어납니다.

이항 연산자를 문자에 사용한다면❓

+ 연산 ➡️ 문자로 변환(덧붙이기)

-, *, /, %, ** 연산 ➡️ 숫자로 변환하여 계산

//ex

"32" + "10" // "3210"
"3" + 2 // "32" 

"32" - "2" // 30
"3" * 2 // 6

단항 연산자는❓
: Number( ) 로 형변환한 것과 같은 결과가 나옴

NaN 은 연산을 해도 NaN 의 결과
0 으로 나누면 Infinity

비교 연산

>, <, <=, >=, ==, ===, !=, !== 등 비교 연산자를 사용할 때 자동 형변환이 일어납니다.

비교 연산자는 기본 비교 연산자 와 동등 비교 연산자 로 나눌 수 있고, 동등 비교 연산자는 엄격하냐 아니냐를 기준으로 다시 나눠집니다.

기본 비교 연산자: >, <, >=, <=
일반 동등 비교 연산자: ==, !=
엄격 동등 비교 연산자: ===, !==

일반 동등 비교 연산자는 형변환을 하여 비교하지만, 엄격 동등 비교 연산자는 형변환을 하지 않습니다.

// 일반 동등 비교 연산자의 경우, 자료형이 달라도 형변환한 값이 같아 true
0 == "" // true

// 엄격 동등 비교 연산자의 경우, 형변환을 하지 않고 비교
0 === "" // false

즉, ===, !== 을 이용한 비교 연산은 자료형까지 완전히 같아야 동등한 것으로 인정합니다.

❗null 과 undefined

null 과 undefined 자료형은 특수하게 취급됩니다.
서로를 동등 비교하면 true 의 결과가 나오지만, 서로와 그 자신을 제외한 나머지 자료형과의 비교는 false 의 결과가 나옵니다.

기본 비교 연산자를 사용한 비교에서는 null 은 0 으로, undefined 는 NaN 으로 형변환됩니다.

✅ 문자형의 비교

문자형은 숫자와 비교할 수 있는 값과 아닌 값으로 나뉩니다.
"123" 은 숫자로 변환하여 비교 가능하지만, "abc" 는 숫자 변환 시 NaN 이 됩니다.

"abc" : 같은 문자형끼리라면, 사전순으로 비교(유니코드 값 적용)
"123" : 숫자와 비교 시 Number( ) 형변환 후 비교

"abc" 는 같은 문자형과 비교하지 않을 경우 NaN 처럼 취급됩니다.
다른 값과 기본 비교, ==, === 비교 시 false 의 결과가 나옵니다.

⚡ 요약

각 연산자에 피연산자로 다양한 값을 넣었을 때 일어나는 형변환, 결과 정리

연산자 / 피연산자	"123"	"abc"	null	undefined
기본 비교 연산자 >, <, >=, <=	Number( ) 변환	문자끼리 아니면 NaN 취급	0 으로 변환	NaN 으로 변환되어 어떤 값과 비교해도 false
==	Number( ) 변환	같은 문자만 true	null 과 undefined 와 비교할 때만 true	null 과 undefined 와 비교할 때만 true
!=	Number( ) 변환	같은 문자만 false	null 과 undefined 와 비교할 때만 false	null 과 undefined 와 비교할 때만 false
===	형변환 X	형변환 X	형변환 X	형변환 X
!==	형변환 X	형변환 X	형변환 X	형변환 X

🧷 논리 연산자

기본 논리 연산자

| | (OR) : true 인 값을 찾음. true 가 없으면 false 반환
&& (AND) : false 인 값을 찾음. false 가 없으면 true 반환
! (NOT) : 논리를 반전하여 반환

병합 논리 연산자

기본 논리 연산자 | | 와 && 를 여러 번 병합하여 사용 할 수 있습니다.

// || 병합 => 첫 번째 true 를 찾음
"" || null || "hello" // hello 반환

// && 병합 => 첫 번째 false 를 찾음
"0" || "123" || undefined // undefined 반환

OR 연산자 병합: 주어진 값 중 첫 번째로 true 인 것을 반환
AND 연산자 병합: 주어진 값 중 첫 번째로 false 인 것을 반환

nullish 병합 연산자

최근에 추가된 문법으로 구식 브라우저에서는 지원이 되지 않을 수 있습니다.
?? 를 사용하여 피연산자 중 null 이나 undefined 가 아닌 값을 찾아냅니다.

// 첫 번째로 확정된 값 반환
null ?? undefined ?? 0 ?? "hello" // 0 반환

OR 병합 연산과 달리, true 한 값이 아닌 확정된 값을 찾기 때문에 Boolean( ) 연산을 하여 false 가 나오는 값도 반환합니다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

✅ 조건문

if 문

if (10 > 11) { // ( ) 안의 표현식을 평가 후, Boolean 형으로 결과 반환
  ...
} else if (1 > 0) {
  ...
} else {
  ...
}

( ) 안 표현식의 내용이 true 일 경우 { } 내부의 내용을 실행합니다.
( ) 안 표현식의 내용이 false 일 경우 다음 조건 구문으로 넘어갑니다.

조건부 연산자

let result = condition ? value1 : value2;
// 조건(condition)이 참이면 value1 을, 거짓이면 value2 를 반환

✅ 반복문

while

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

조건이 참인 동안 본문의 내용을 수행합니다.

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

i++ 을 통해 조건을 변경해줌으로서, 무한 반복하지 않게 합니다.

do...while

do {
  // 반복문 본문
} while (condition);

본문을 먼저 수행하고 조건을 확인합니다.
조건이 참인지 거짓인지에 상관 없이 본문을 최소한 한 번 은 수행하고 싶을 때 사용합니다.

for

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

begin: 반복문 진입 시 단 한 번 실행
condition: 매 반복마다 확인
step: 반복문 본문 수행 후 실행 됨

매 반복마다 수행 전에 조건을 확인하며, 반복문 본문을 수행한 후에
step 을 실행합니다.

begin ➡️ condition ➡️ 반복문 본문 ➡️ step ➡️ condition ➡️ 반복문 본문
➡️ step ➡️ condition ...

의 과정으로 돌아갑니다.

for (let i = 0; i < 3; i++) { 
  alert(i);
}
// i=0 에서 시작
// 반복문을 수행하면 i++
// 결과: 0, 1, 2 출력

for 문 구성요소 생략

세미콜론을 사용하여 for 문을 이루는 구성요소를 생략할 수 있습니다.

let i = 0;

for (; i < 3;) {
  alert( i++ );
}
// 세미콜론 ; 을 써서 begin 이나 step 생략 가능

for (;;) {
  // 본문 무한 반복
}

모든 구성요소를 생략하면 무한히 반복하는 반복문을 만들 수 있습니다.

반복문 다루기

break

보통 반복문은 조건이 거짓일 때 종료되지만, break 을 사용하면 언제라도 원하는 때에 반복문을 빠져나올 수 있습니다.

for (let i = 0; i < 10; i++) {

  // 조건이 참이면 반복문 종료
  if (i % 6 == 0) break;

  alert(i); 
}

보통 무한 반복문과 함께 사용합니다.

continue

continue 를 사용하면 그 이하의 본문 내용을 실행하지 않고 바로 다음 반복문으로 넘어갑니다.

for (let i = 0; i < 10; i++) {

  // 조건이 참일 때 남은 코드는 실행되지 않음
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

break 은 전체 반복문을 멈추지만, continue 는 해당 회차의 반복문만 멈춥니다.

label 붙이기

중첩 반복문의 경우, 반복문에 레이블을 붙여 각 반복문을 구분할 수 있습니다.
break / continue 를 레이블과 함께 사용합니다.

labelName: for (...) {
  ...
  for (...) {
    continue labelName; // 바깥쪽 반복문의 다음 회차 반복 시행
    break labelName; // 모든 반복문 빠져나옴
  }
}

🧩 함수

함수는 일정한 기능을 하는 코드 블럭을 하나로 묶어놓은 것입니다.
자바스크립트에서 함수는 변수처럼 취급할 수 있습니다.

let global = 0 // 전역변수

function showMessage(msg = "No Messge") {
  let local = 10; // 지역변수
  
  alert( global ); // 0 출력
  alert( msg ); // 매개변수가 없다면 디폴트 값 No Message 출력
  
  return 10;  
}

showMessage(); // 0 과 No Message 출력
alert(local); // local 변수를 찾을 수 없음!

함수는 함수 이름, 매개변수, 함수 본문, 반환값 으로 구성됩니다.

함수 이름은 함수를 구분해주며 이름 뒤에 괄호 ( ) 없이 이름만 사용하면 함수를 변수처럼 쓸 수 있습니다. (다른 변수에 함수 복사, 함수 할당)

매개변수로 받아 온 값은 복사하여 사용합니다.
따라서 원본의 값이 바뀌지는 않습니다.
매개변수를 입력하지 않은 경우 디폴트 값으로 설정되며, 디폴트 값을 설정하지 않은 경우 undefined 가 할당됩니다.

함수 본문 내에서 선언한 변수를 로컬변수 (지역변수) 라고 하는데, 본문 내에서는 전역변수를 사용할 수 있지만 로컬변수는 함수 밖에서는 사용할 수 없습니다.

반환값은 return 으로 설정하며, 반환값을 설정하지 않으면 함수는 undefined 를 반환합니다.

함수를 만드는 방식에는 선언문 방식, 표현식, 표현식을 단순화하여 만든
화살표 함수 (arrow function) 가 있습니다.

함수 선언문 방식

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
  
  return parameter1;
}

일반적으로 함수를 선언하는 방식입니다.
스크립트 실행 전에 함수를 생성하므로, 함수 선언 전의 코드에서도 함수를 사용할 수 있습니다.

함수 표현식

함수를 변수에 할당하여 만드는 방식입니다.

let sayHi = function() {
  alert( "Hello" );
};

sayHi(); // Hello 출력

변수에 괄호를 붙여 함수를 실행합니다.
함수를 값처럼 전달하여 사용하기도 하는데, 매개변수 자리에 들어가는 함수를 콜백 함수 라고 부릅니다.

const callbackFunc = function() { 
  alert("Hello"); 
};

function sayHi(func){
  func();
};

sayHi(callbackFunc); // Hello 출력

콜백 함수는 다른 함수의 매개변수로 넘어가 사용되며, 조건에 따라 콜백 함수의 실행 여부가 결정되도록 코드를 구성할 수 있습니다.

화살표 함수

함수 표현식을 간단화하여 표현합니다.

let func = (arg1, arg2, ...argN) => expression

괄호와 반환값만으로 구성되어 단순한 형태를 지닙니다.
화살표 이하의 부분이 반환값이 되며, 더 복잡한 내용을 함수에 담고자 할 때는
{ } 을 이용합니다.

let sum = (a, b) => {  
  let result = a + b;
  return result; // 중괄호 사용 시 return 이라고 써야 함
};

📌 함수 선언문과 표현식 비교

	함수 선언문	함수 표현식
함수 생성 시점	스크립트 실행 이전	실행 흐름 도달 시
사용 가능 위치	어디서나	표현식으로 함수 선언한 이후
스코프	블록 내부	블록 외부에 변수를 선언했다면 블록 외부에서도 사용 가능

345

기록용 블로그 + 오류가 있을 수 있습니다🔥

이전 포스트

JS 개요

다음 포스트