JavaScript 기본

2023. 02. 09.

🍂 변수

var는 사용 X

상황에 따라 let이나 const를 사용하는 것이 좋다.

let

값의 재할당이 가능하다.

let a = 12;
console.log(a); // 12

a = 999;
console.log(a); // 999

const

값의 재할당 불가

const a = 12;
console.log(a); // 12

a = 999; // TypeError: Assignment to constant variable.
console.log(a);

변수의 호이스팅(hoisting)

호이스팅이란 변수나 함수의 선언을 최상단으로 끌어올리는 것이다.

따라서 아래 코드에서 a가 선언되기 전에 a를 호출하여도 에러가 아닌 undefined를 출력한다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

console.log(a); // undefined

var a; // 변수 선언
a = 99; // 값의 할당

console.log(a); // 99

변수 선언과 값의 할당을 하나의 문장으로 축약하여 표현하더라도 자바스크립트 엔진은 이를 2개의 문으로 나누어 각각 실행하므로 결과에는 변함이 없다.

console.log(a); // undefined

var a = 99; // 변수 선언과 값의 할당

console.log(a); // 99

let과 const의 호이스팅(hoisting)

let과 const 변수도 호이스팅이 안되는 것은 아니다.

그러나 let과 const 변수의 경우 var 변수와 다르게 변수의 선언 단계와 초기화 단계 사이에 일시적 사각 지대(Temporal Dead Zone)가 존재한다.

이런 방법으로 초기화되지 않은 값을 호출하는 것을 막는다.

예약어 (Reserved Word)

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

그 외 예약어들

var의 문제점

중간에 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌운다.

var name = "장경은";
var name = "경은";

console.log(name);
// 경은

let이나 const는 위와 같이 사용하면 “already been declared”라고 에러를 띄워준다.

🐚 자료형

String

문자형 데이터이다.

백틱(`) 안에서는 ${}를 이용하여 그 안에 변수명이 인식되도록 사용할 수 있다.

let myName = "Kyung-eun";
let hello = `Hello, ${myName}`;

console.log(hello);
// Hello, Kyung-eun

Number

숫자형 데이터이다.

BigInt는 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체이다.

뒤에 n이 붙어서 리턴된다.

let num1 = 123;
let num2 = 0.1;
let bigNum = BigInt(9007199254740991);

console.log(num1 * num2); // 12.3
console.log(bigNum); // 9007199254740991n

Boolean

참, 거짓 데이터이다.

let bool1 = true;

if (bool1) {
  console.log(bool1); // true
}

Undefined

값이 할당되지 않은 상태를 표기 (C언어에서의 쓰레기값)

let undef;
let arr = [1, 2, 3];

console.log(undef); // undefined
console.log(arr[3]); // undefined

Null

어떤 값이 의도적으로 비어 있음을 의미할 때 사용

let empty = null;

console.log(empty); // null

Array

여러 데이터를 순차적으로 저장하는 자료형 (배열)

let data = [1, "Apple", false, null, undefined];
let arr = new Array(5);

console.log(data[0], data[1], data[2], data[3], data[4]);
// 1 'Apple' false null undefined
console.log(arr);
// [ <5 empty items> ]
console.log(arr[0]);
// undefined

Object

객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합이다.

객체를 배열에 담아서 쓸 수도 있다.

let student = {
  name: "장경은",
  age: 27,
  hobby: ["basketball", "music"]
}

console.log(student);
// { name: '장경은', age: 27, hobby: [ 'basketball', 'music' ] }
console.log(student.name);
// '장경은'
console.log(student['name']);
// '장경은'

typeof

자료형을 알려준다.

let num = 1;
let str = "장경은";
let bool = true;
let undef = undefined;
let nul = null;
let arr = [1, 2, 3];
let obj = {
  num: 1,
  str: "String"
}

console.log(typeof num);
// number
console.log(typeof str);
// string
console.log(typeof(bool)); // 괄호로도 사용 가능. 띄어쓰기 주의
// boolean
console.log(typeof undef);
// undefined
console.log(typeof(nul)); 
// object
console.log(typeof(arr));
// object
console.log(typeof obj);
// object
console.log(typeof "장경은");
// string (변수명으로 사용하지 않아도 가능)

형변환

String(), Number(), Boolean()

// 문자 데이터로 변환
let num = 123;
num = String(num);
console.log(typeof num); // string

// 숫자 데이터로 변환
num = Number(num);
console.log(typeof num); // number
console.log(Number("abcdefg")); // NaN

// Boolean 타입으로 변환 
console.log(Boolean(1)); // true
console.log(Boolean(2)); // true
console.log(Boolean(-1)); // true
console.log(Boolean(0)); // false

console.log(Boolean("장경은")); // true
console.log(Boolean("0")); // true
console.log(Boolean("")); // false
console.log(Boolean(" ")); // true

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

parseInt()와 Number()의 차이

parseInt는 정수로 만들어 출력한다.

let test = '10.12345';
parseInt(test); // 10
Number(test); // 10.12345
parseFloat(test); // 10.12345

parseInt는 문자열이 뒤에 붙어있어도 숫자를 뽑아낸다.

let test = '2020년도';
parseInt(test); // 2020
Number(test); // NaN

그러나 문자로 시작하면 NaN가 나온다.

let test = '제1회';
parseInt(test); // NaN
Number(test); // NaN

💫 연산자

기본 연산자

사칙연산: +, -, *, /

%: 나머지 연산자

**: 거듭 제곱

증가, 감소 연산자

연산자 줄여서 쓰기

비교 연산자

비교연산자(==) 대신 일치연산자(===) 사용을 생활화!

비교연산자 종류

논리연산자 종류

🌷 조건문

If문

if (true) {
  console.log("true 입니다.");
} else {
  console.log("어차피 출력 안됨");
}

Switch문

let gender = "F";

switch (gender) {
  case 'F':
    console.log("여성입니다.");
    break;
  case "M":
    console.log("남성입니다.");
    break;
  default:
    console.log("외계인입니다.");
    break;
}

Switch문은 잘 사용하지 않았는데 나중에 Redux에서 Switch문을 쓸 일이 있다고 한다.

🔮 반복문

For문

for (let i = 0; i < 10; i++) {
  console.log(`인사🙇‍♂️ ${i}번째`);
}

While문

let i = 1;

while (i <= 10) {
  console.log(`인사🙇‍♂️ ${i}번째`);
  i++;
}

Do While문

조건에 관계없이 최소 1번은 실행된다.

let k = 1;
do {
  console.log(`인사🙇‍♂️ ${k}번째`);
  k++;
} while (k <= 10);

break

멈추고 해당 반복문을 빠져나온다.

let j = 1;
while (true) {
  if (j === 11) {
    break;
  }
  console.log(`인사🙇‍♂️ ${j}번째`);
  j++;
}

countinue

if 안에 continue를 사용하면 if문이 작동할 때만 해당 인덱스의 실행을 스킵한다. (멈추지 않고 계속 진행)

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

// 1
// 2
// 4
// 5

🐝 함수

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

function sayHello(name) {
	console.log(`안녕하세요 ${name}님!`);
}