About JavaScript

• 자바스크립트의 일반적인 용도는 이미지 조작, 양식 유효성 검사 및 콘텐츠의 동적 변경이다.
• HTML의 <script> 태그가 클라이언트 측 스크립트(JavaScript)를 정의하는 데 사용된다.
• <script> 요소는 스크립트문을 포함하거나 src속성을 이용해 외부 스크립트 파일을 가리킨다.

console 객체

console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공한다.

var, let, const

변수를 선언시 사용한다.

var: 중복 선언 + 재할당 o
let: 중복 선언 x + 재할당 o
const: 중복 선언 x + 재할당 x

변수의 참조 범위 (scope)

var: 함수 레벨 스코프
let: block 레벨 스코프
const: block 레벨 스코프
➡️ 참조하지 못하면 not defined error 발생

호이스팅 (Hoisting)

호이스팅: 무언가를 들어 올리거나 끌어올린다.

➡️ 자바스크립트에서 호이스팅이란, 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬범위(유효범위)의 맨 위로 들어올려지거나 끌어지는 경우이다.

var 선언문 호이스팅

• js는 인터프리터가 위에서부터 한 줄씩 읽으며 변수 생성을 선언/할당 단계로 나눈다.
• 변수 생성 2단계

console.log(greeting);
var greeting = "hello";

1) 선언 단계: undefined 할당
2) 할당 단계: hello 값 할당

• var greeting = "hello"; 가 호이스팅되었기 때문에 에러가 발생되지 않는다.
• 즉, 초기화되기 전에 greeting 변수를 사용할 수 있다.

함수 선언문 호이스팅

• 함수 선언문도 함수 선정 전에 호출하면 올바로 출력된다.

let/const 호이스팅

• let/const도 호이스팅 된다.
• but, undefined 값이 할당되지 않는다.
• 따라서 값이 할당되기 전에 콘솔로 출력하려 하면 에러가 난다.
• TDZ(Temporal Dead Zone) : 변수를 사용할 수 없는 일시적 비활성 상태

변수의 현명한 사용이 필요하다.

✅ 변수를 생성할 때 재할당이 필요없다면 const 사용
✅ 재할당 필요시 let 사용
✅ 즉, 변수의 scope를 최대한 좁게 만들어서 사용

자바스크립트 타입

원시타입 (Primitive Types)

Boolean, String, Number, null, undefined, Symbol (불변성)

• Call Stack에 저장

참조타입 (Object Types)

Object, Array

• Heap
• 주소가 Call Stack에 저장

자바스크립트는 동적 타입이다.

• 느슨한 (loosely typed) 동적(dynamic) 언어이다.
• 같은 변수가 여러개의 타입을 가질 수 있다.
• 타입 명시 불필요
• typeof 로 타입 확인 가능
• Array.isArray()로 배열 타입 여부 확인 (typeof 불가)
• 선언하지 않으면 undefined가 된다.
• array: [] object: {}

자바스크립트 타입 변환

1) 함수를 사용하여

String

• String(value)
• .length 사용하여 길이 확인
• (value).toString()

val = String(new Date())

Number

• Number(value)
• true는 1, false는 0
• 배열은 NaN(Not a Number)
• paseInt(value)
• paserFloat(value)

2) JavaScript에 의해 자동으로

• String과 Number의 합 연산을 할 때 자동으로 String으로 바꾸어준다.

자바스크립트 연산 및 Math Object

• Math.E: Eural num
• Math.PI: pi
• Math.round(value): 가장 가까운 정수로 return
• Math.ceil(value): 올림
• Math.floor(value): 내림
• Math.abs(value): absolute value (절대값)
• Math.min(values...): 최솟값
• Math.max(values...): 최댓값
• Math.random() : return between 0 and 1
• Math.floor(Math.random() * 20 + 1: 1~20 int random return

Template Literals

Template Literal: backtick(`) 문자를 사용하여 문자열을 표현한 것
1) 줄바꿈 쉽게 표현 (\n필요 없이 직접 엔터를 친다)
2) 문자열 내부에 표현식 포함 (""로 묶어서 나눠줄 필요가 없이 ${}사용)

console.log(`Fifteen is ${a+b}`);

Loops

loop: 코드블록을 여러번 실행할 수 있다.

for

코드블록을 여러번 반복
for(stat1; stat2; stat3)
stat1: 루프가 시작되기 전에 실행
stat2: 루프를 실행하기 위한 조건
stat3: 루프 실행된 후마다 실행

continue: 다음 블록들을 모두 생략하고 다시 for로
break: 모든 반복 종료

// FOR LOOP
for (let i = 0; i < 10; i++) {
    if (i === 3) {
        console.log('It is 3');
        continue;
    }

    if (i === 5) {
        console.log('5 Stop the loop');
        break;
    }
    console.log('Number ' + i);
}

for/in

객체의 속성을 따라 반복

// FOR IN LOOP
const user = {
    name: 'Han',
    province: '경기도',
    city: '성남시'
}

for (let x in user) {
    console.log(`${x} : ${user[x]}`);
}

while

지정된 조건이 true인 동안 코드블록 반복

// WHILE LOOP

let i = 0;

while (i < 10) {
    console.log('Number ' + i);
    i++;
}

do/while

먼저 한 번 실행하고나서 조건 이행 (while 루프의 변형)

// DO WHILE

let i = 0;

do {
    console.log('Number ' + i);
    i++;
}

while (i < 10);

map

// MAP
locations.map(function (location) {
    console.log(location);
});

for vs forEach

• forEach: 배열 요소를 반복하는 새로운 접근 방식
• break, continue 사용 불가
• For는 await과 함께 작동하지만, forEach는 await과 완벽하게 작동하지 않음
• For 루프가 더 빠를 수 있음

// FOREACH
locations.forEach(function (location, index, array) {
    console.log(`${index} : ${location}`);
    console.log(array);
});