JavaScript 기본 문법

• 변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 메모리 공간을 식별하기 위해 붙인 이름

JavaScript는 개발자가 직접 메모리 제어를 하지 못함(managed language)

-> 변수를 통해 안전하게 값에 접근

const myNumber = 22;
//변수명(식별자) : myNumber
//해당 값의 위치(메모리 주소) : 00153DFAE87
//Value : 22

변수명인 myNumber은 변수의 값이 아닌 메모리 주소를 기억함

변수명 사용 -> 자바스크립트 엔진이 변수명과 매핑 된 메모리 주소를 통해 22 반환

---

• 변수 선언

JavaScript에서 변수 선언은 선언 -> 초기화 단계를 거침

선언 = 변수명을 등록하여 자바스크립트 엔진에 변수 존재 알림

초기화 = 값을 저장하기 위한 메모리 공간 확보, undefined 할당해서 초기화

 

var : 전역 변수 선언 또는 함수 범위(재선언O, 재할당O)

let : 블록 스코프 지역 변수를 선언(재선언X, 재할당O)

const : 블록 스코프 읽기 전용 상수를 선언(재선언X, 재할당X)

            선언과 동시에 초기화해야 함

 

변수 선언은 런타임에서 되는 것이 아니라, 그 이전 단계에 먼저 실행됨

-> 모든 선언문을 찾아내서 다른 코드들보다 먼저 실행됨(=호이스팅)

 

변수 선언은 호이스팅 되어 런타임 이전에 실행,

값 할당은 런타임시 실행

var name;	//변수 선언
console.log(name);	// output: undefined

name = "heedong";	//값 할당
console.log(name);	//output: heedong

var name = "heedonguri";	//변수 선언과 할당
console.log(name);	//output: heedonguri

---

• Scope

어떤 함수의 밖에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수 사용 가능

=> 전역변수

함수 내부에 변수 선언하면, 그 함수 내에서만 사용 가능

=> 지역변수

if (true) {
  var x = 5;
}
console.log(x);	//5

if (true) {
  let x = 5;
}
console.log(x);	//RefereneceError : x is not defined

ReferenceError -> 변수가 선언되기 전에 블록 안에서 변수를 참조

 

모든 코드 블록(if,for,while,try/catch ..)을 지역 스코프로 인정 -> 블록 레벨 스코프

var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정 -> 함수 레벨 스코프

 

var a = 1;

if(true) {
  var a = 5;
}

console.log(a);		//output: 5

위의 코드를 보면 a를 var 키워드를 사용해서 함수 밖에 선언했기 때문에 전역변수로 취급함

 

코드가 길어질수록 이런 문제를 찾기 어려우므로

const와 let을 사용하는 것을 권장

---

• 타입

데이터 타입이란 사용할 수 있는 데이터의 종류

 

① 원시타입

∘ Number

 ▹64비트 부동소수점 형을 따름(-(2⁵³ -1) ~ 2⁵³ -1) 

 ▹모든 수를 실수로 처리함 -> 정수로 표시된다해도 사실은 실수임

 

∘ String 

 ▹변경 불가능(immutable)

var str = 'Hello';
str = 'world';

첫번째 줄이 실행되면 메모리에 'Hello'가 생성되고 식별자 str은 'Hello'의 메모리 주소 가리킴

두번째 줄이 실행되면 'Hello'를 수정X, 새로운 문자열 'world'가 메모리에 생성되고 str은 'world'의 메모리 주소 가르킴

=> 문자열 'Hello'와 'world' 모두 메모리에 존재

 ▹배열처럼 인덱스로 접근 가능(유사배열), 변경은 불가능 함

 ▹재할당은 가능

 

∘ Boolean

 ▹값은 참, 거짓을 나타내는 true와 false 뿐임

 ▹프로그램의 흐름을 제어하는 조건문에서 자주 사용

 

∘ null

 ▹의도적으로 변수에 값이 없다는 것을 명시할 때 사용

 ▹함수가 호출되었으나 유효한 값을 반환할 수 없는 경우, null 반환

 ▹null 타입 확인 시 일치 연산자(===) 사용해야 함

 

∘ undefined

 ▹선언은 되었지만 값을 할당하지 않은 변수

 ▹존재하지 않는 객체 프로퍼티

 ▹개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값

 

∘ Symbol

 ▹이름의 충돌 위험이 없는 객체 프로퍼티 키를 만들기 위해 사용

const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");

sym1 === sym2;	//false

 

∘ BigInt

 ▹Number보다 큰 정수를 표현할 수 있는 내장 객체

 ▹모든 정수 리터럴에 n을 추가해서 사용하거나 BigInt() 호출해서 사용

      ex) 235n * 15464n; 또는 BigInt(6546846687);

 

원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달)

 

② 객체타입

객체란?

이름과 값을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체

 

∘ Object 

 ▹거의 "모든 것"이 객체

 ▹원시 타입을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체

 ▹pass-by-reference(참조에 의한 전달) 방식으로 전달

 

 

---

• 조건문

∘ 조건식 거짓으로 취급하는 값

 ▹ false, undefined, null, 0, NaN, the empty string("")

 

∘ 삼항 연산자

(조건) ? value1 : value2

조건이 참인 경우 value1이 실행, 거짓이면 value2가 실행됨

 

∘ 다중 삼항 연산

const info = 22;
const message = (info <= 10) ? "10 이하입니다."
	: (info <= 20) ? "20 이하입니다."
    : (info <= 30) ? "30 이하입니다."
    : "30보다 큽니다.";

console.log(message);	//30 이하입니다.

 

---

• 반복문

for문, while은 많이 사용해봤으니 생략

 

∘ for-in 문: 객체 프로퍼티 키 열거 전용

-> for(const key in 객체) {..반복 수행 코드..}

객체 key 값의 개수만큼 반복

let profile = {name : "heedoguri", age : 22};
for( const key in profile) {
  console.log(profile[key]);	//heedonguri, 22
}

 

∘ for-of 문: 이터러블 순회 전용

-> for(const item of 이터러블) {..반복 수행 코드..}

이터러블 = String, Array, Map, Set 등등

const arr = [10, 20, 30];
for (const item of arr) {
  console.log(item);	//10, 20, 30
}

∘ forEach(): 배열 순회 전용 메서드

-> 배열.forEach(function(value, index, array) {..반복 수행 코드..})

value에 요소값, index에 인덱스, array에 원본배열

const arr = [1, 2, 3, 4, 5];
arr.forEach((element, index, array) => {
	console.log('${index} : ${value}');		//0 : 1, 1 : 2, 2 : 3
})

 

---

• 함수

∘ 형태

function 함수이름(매개변수1, 매개변수2) {
  함수 호출 시 실행되는 실행문;
}

 

∘ 반환문

반환문은 함수의 실행을 중단, return 키워드 다음에 명시된 표현식의 값을 반환함

반환문은 배열,객체를 포함한 모든 타입의 값 반환 가능

function addNum(x, y){
  return x+y;
}

var num = addNum(1, 2);
console.log(num);	//3

 

∘ 값으로서의 함수

문법적 구문일뿐만 아니라 값(value)이기도 함

함수가 변수에 대입될 수 있고, 다른 함수의 인수로 전달될 수도 있음

function sqr(x){
  return x * x;
}

var squNum = sqr;
console.log(sqr(4));	//16
console.log(squNum(4));		//16

∘ 함수를 정의하는 여러가지 방법

// 함수 선언식
function getRectangleArea(width, height) {
  let rectangleArea = width * height;
  return rectangleArea;
}
// 함수 표현식
const getRectangleArea = function(width, height) {
  let rectangleArea = width * height;
  return rectangleArea;
}
// 함수 표현식 - 화살표 함수
const getRectangleArea = (width, height) => {
  let rectangleArea = width * height;
  return rectangleArea;
}
// 함수 표현식 - 화살표 함수 (생략형)
const getRectangleArea = (width, height) => width * height;