자바스크립트 - 기본문법

입출력

---

사용자에게 입력받기

const val = prompt("입력해주세요")
"입력해주세요" 문구 출력
비어있는 사용자 입력창 (취소/확인)
1. 취소 선택시 null 반환
2. 확인 선택시 입력창 내용 문자형으로 반환


const val = prompt("입력해주세요", "abc")
"입력해주세요" 문구 출력
"abc"가 들어있는 사용자 입력창 (취소/확인)

사용자에게 확인받기

const val = confirm("선택하시겠습니까?")
"선택하시겠습니까?" 문구 출력
(취소/확인)
1. 취소 선택시 false 반환
2. 확인 선택시 true 반환

사용자에게 경고창 보여주기

const val = alert("경고")
"경고" 문구 출력
(확인)

콘솔창에 내용 출력

console.log("출력 내용")
"출력 내용"

console.log("출력1", "출력2", "3", 4)
"출력1"
"출력2"
"3"
"4"

※ ,를 구분자로 여러 개를 한번에 출력도 가능

 

 

변수 선언

---

규칙

변수는 camelCase로 표기한다.

변수는 문자,숫자,$,_만 사용한다.

첫 글자는 숫자가 올 수 없다.

예약어를 변수명으로 사용 불가

상수는 대문자로 표기

기본적으로 const로 선언하고, 변하는 값을 let으로 변경하는 습관을 가지자.

※ 자바스크립트는 인터프리터 언어라서 위에서 아래로 차례로 읽으면서 실행한다.

자바스크립트 - 코딩 컨벤션

 

변수의 생성과정

1. 선언 : 변수가 선언됨 (아직 사용할 수 없음)
2. 초기화 : undefined를 할당하는 단계 (이 때부터 사용 가능)
3. 할당 : 실제로 값이 들어감 (undefined가 아닌 유의미한 값이 들어감)

(표1) const/let/var 키워드 비교

스코프	키워드	설명	생성과정
블록 스코프	const	변하지 않는 값	1. 선언, 초기화, 할당
	let	변하는 값. 재선언 x	1. 선언 2. 초기화 (실제 코드 도달시 일어남) 3. 할당
함수 스코프	var	변하는 값. 재선언 o	1. 선언 및 초기화 2. 할당

※ 블록 스코프 : 블록 내 (함수/if/for/while/try-catch) 에서 선언된 변수는 블록 내에서만 사용가능

※ 함수 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 사용가능

 

(예시1) 선언, 초기화, 할당 비교

const a = "123" (선언, 초기화, 할당) → "123" 값 들어감

var b;          (선언, 초기화) → 이 상태로도 사용가능함. undefined 상태임
b = "456"       (할당)         → "456" 값 들어감

let c;          (선언)         → 아직 초기화 되지 않았으므로 사용불가
c = "789"       (초기화, 할당) → 실제 할당부분에 도달해야 초기화가 됨. "789" 값 들어감

 

(예시2) 재선언 비교

let name = "123"
let name = "456"   (Error : 재선언 불가)

var name="123";
var name="456";    (재선언 가능)

 

 

(예시3) 호이스팅

※ 호이스팅 : Scope 내부 어디서 변수 선언하든 Scope 최상위에 선언된 것 처럼 동작

var는 선언과 동시에 초기화 되므로 선언 = 선언+초기화로 이해하면 된다. (표1 참고)

let은 실제로 할당하는 코드에 도달해야 초기화 되므로 선언 = 선언 (아직 사용불가상태)로 이해하면 된다. (표1 참고)

console.log(name); (호이스팅에 의해 선언/초기화되어 undeifned가 찍힘)
var name="123"

console.log(name); (호이스팅에 의해 선언되지만 초기화되지 않아 : error 발생)
let name="123"

 

 

자료형

---

문자열

const val = 'hello'
const val = "hello"           큰 따옴표와 작은 따옴표 아무거나 사용가능
const val = "I \'m a boy"     특수문자는 \를 앞에 써준다.
const val = `hello ${변수}`   문자열에 변수 집어넣기

※`는 키보드 ESC 아래에 있는 키다.`

const a = 1
const b = 2
const str = 'hello' + a + b   문자열+숫자 = 문자열이다.
결과 : 'hello12'

str.length;                   길이 구하기
str[0]                        인덱스로 문자 가져오기
str[1] 
str[1] = "z"                  Error: 이건 불가능함

str.toUpperCase()             모든 소문자를 대문자로
str.toLowerCase()             모든 대문자를 소문자로

str.indexOf('text')           str에서 처음 등장하는 'text'의 인덱스 반환 (없으면 -1)
if(str.indexOf('text') > -1){ 이렇게 해야 정확히 동작함.
  ...
}
str.includes('text') str에서  'text'가 존재하면 true 없으면 false
if(str.includes('text')){     굳이 indexOf를 안쓰고 이렇게 하는게 낫다.
  ...
}

str.slice(n, m)     n부터 m-1까지 반환. m을 적지않으면 마지막 까지. (음수는 뒤에서 부터 카운트)
str.substring(n, m) n부터 m사이 문자열 반환. 음수는 사용 못함
str.substr(n, m)    n부터 m개의 문자열 반환.
str.trim()          문자열 앞 뒤 공백 제거
str.repeat(n)       문자열을 n번 반복함

"a" < "c" 이고
"A" < "a" 이다.
"a".codePointAt(0);       (문자 → 아스키코드) 97 
String.fromCodePoint(97); (아스키코드 → 문자) a

 

숫자

const val = 1   (number)
const val = 1.1 (number, 다른 언어처럼 float/double이 아님)

1 + 2  (더하기)
1 - 2  (빼기)
1 * 2  (곱하기)
1 ** 2 (거듭제곱)
1 / 2  (나누기)
1 % 2  (나머지)

boolean

const val = true
const val = false

특수한 자료형

let val;        (undefined, 정의되지 않음, 선언만 해둔경우임)
let val = null; (null, 값이 없음)

let val = "문자열"/2 (NaN, 숫자가 아님)
let val = 1/0 :      (Infinity, 무한대)

타입 확인

typeof 1         (number)
typeof "abc"     (string)
typeof true      (boolean)
typeof null      (object, 실제론 객체 아니지만 하위 버전과의 호환성을 위해 수정되지 않는다 함)
typeof undefined (undefined)

형 변환

자동 형변환
"10"/2 = 5

명시적 형변환
String()  (문자형으로 변환)
Number()  (숫자형으로 변환)
Boolean() (불린형으로 변환)


String(10)         "10"
String(true)       "true"
String(null)       "null"
String(undefined)  "undefined"

Number("10")       10
Number("abc")      NaN
Number(true)       1
Number(false)      0
Number(null)       0
Number(undefined)  NaN

Boolean(0)         false
Boolean('')        false
Boolean('0')       true
Boolean(' ')       true
Boolean(null)      false
Boolean(NaN)       false
Boolean(undefined) false

 

연산자

---

비교 연산자

val = 3   (대입 연산자, 변수에 값을 대입)
val == 3  (동등 연산자, 값이 같은지 비교)
val === 3 (일치 연산자, 자료형과 값이 모두 같은지 비교)

const a = 1;
const b = '1';
a == b  (true)
a === b (false)

논리 연산자

|| (OR, 첫번째 true를 만나면 평가 중단)
&& (AND, 첫번째 false를 만나면 평가 중단)
!  (NOT, false/true를 반전시킴)

 

조건문

---

if

const val = 5;
if(val > 10){
  console.log('big');
} else if(val === 10){
  console.log('equal');
} else {
  console.log('small');
}

switch

switch(val){
  case '1':
    console.log('1');
    break;
  case '2':
    console.log('2');
    break;
  case '3':
  case '4':
  case '4':
    console.log('3');
    break;
  default :
    console.log('100');
}

 

반복문

---

for / while / do while

# for 문
for (let i=0; i<5; i++){
  console.log(i);
}

# while 문
let i = 0;
while (i<5){
  console.log(i);
  i++;
}

# do while 문
let i = 0;
do 
  console.log(i);
  i++;
} while (i<5)

# 결과
0
1
2
3
4

 

break, continue

break    (만나는 순간 반복문을 빠져나옴)
continue (만나는 순간 현재 반복문 중단하고 다음 반복문을 수행함)

while(true){
  let val = confirm('계속 하려면 확인버튼 클릭');
  if(!val){
    break;
  }
}