JS 개념정리 01 - 소개, 변수, 자료형

컴파일 언어 (C언어, Java 등)

프로그램 실행 전에 컴파일

번역 과정에서 문법 검사 등의 별도 처리 거치기 때문에

에러를 미리 마주하는 대신, 런타임 도중 번역 과정 없고 에러 확률 적어짐

 

인터프리터 언어 (Javascript, Python)

프로그램 실행과 동시에 한 줄 한 줄 해석하고 실행

별도의 컴파일 필요 없지만 런타임 도중 번역 과정 있고 에러 확률 높아짐

 

언어의 패러다임엔 절차형, 객체지향형, 함수형 등이 있음

 

문 (statement)

어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)

 

변수를 활용하는 이유

기억하고 싶은 값을 메모리에 저장하고, 그 값을 재사용하기 위해서

▼ 자세히

변수 활용 과정

메모리의 영역 중 "변수 영역"에서 빈 공간을 확보해 "식별자"를 저장,

"데이터 영역"에서 빈 공간을 확보해 데이터를 저장하고 그 주소를 기억,

다시 "변수 영역"에서 저장한 식별자로 검색,

"데이터 영역"에서 저장한 주소를 "변수 영역"의 값에 할당 

/* 변수명 name이 식별자, 문자값 "song"이 데이터 */
var name = "song"

 

변수 할당 : 변수에 값을 저장

변수 선언 : 변수에 관해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어옴

HTML과 script 파일을 분리하면 성능상 이점이 있는 이유

브라우저가 스크립트를 캐시(cache)에 저장

여러 페이지가 동일 스크립트를 사용하는 경우, 페이지가 바뀌더라도 새로 다운 받을 필요 없이 캐시에서 가져오기 때문에, 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라짐

 

<script>에 src 속성이 있는 경우 태그 내부의 코드는 무시

스크립트 파일을 별도로 분리하고 src 속성으로 연결한 상황에 HTML에 간단한 스크립트를 적고 싶은 경우 스크립트 태그 박스를 새로 만들어줘야 함

▼ 코드 예시

/* 1. "error!"를 출력하지 못함 */
<script src= "main.js">
	alert("error!");
</script>

/* 2. "error!" 출력 가능 */
<script src = "main.js"></script>
<script>
	alert("error!");	
</script>

Javascript는 동적 타이핑 언어

사용자가 자료형을 지정해줄 필요 없음. 하지만 자료형 개념이 존재하지 않는 것은 절대 아님

자료의 타입은 있지만, 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있는 언어

 

Javascript의 변수 (variable)

변수는 데이터를 저장할 때 쓰는 "이름 붙은 저장소"

자바스크립트에선 let을 사용해 생성. var를 활용하기도 하지만 오래된 방식

/* 변수 선언만 하는 경우 */
let name;

/* 선언 후 값 할당도 하는 경우 */
let name = "song";

 

변수의 값은 변경될 수 있고, 변경되면 이전의 데이터는 제거됨

한 변수의 데이터를 다른 변수에 할당할 수도 있음

/* 변수 값 재할당 */
let name = "song";
name = "kim"; // 기존 "song"은 제거되고 새로운 값인 "kim"이 저장됨

/* 변수에 다른 변수 데이터 할당 */
let nameA = "song"
let nameB = "kim"
nameA = nameB // "song" 값을 갖고 있던 nameA가 nameB의 값인"kim"을 갖게 됨

 

변수는 한 번만 선언할 수 있음

▼ 코드 예시

let name = "song"
let name = "kim" // 이미 name이란 이름의 변수엔 "song"이 저장돼있기 때문에 오류!

▼ 함수형 언어

함수형 언어는 변숫값의 변경을 금지함. 일단 변수가 선언된 후에 다른 값을 저장하고 싶다면 새 변수를 만드는 수밖에 없음. 제약처럼 보이지만 병렬 계산 등의 영역에선 유효하게 작용하는 특성. 함수형 언어엔 대표적으로 스칼라(Scala)와 얼랭(Erlang)이 있고, 중대한 개발에 적합한 언어임.

Javascript의 변수 명명 규칙

오직 문자와 숫자, 그리고 "$"와 "_"만 활용할 수 있고, 첫 글자엔 숫자가 위치할 수 없음

변수명의 대소문자를 구별함. name과 NAME은 다른 변수

▼ 카멜 표기법 (camelCase)

첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성. 자바스크립트에서 흔히 활용하는 방식

▼ 예약어

예약어 목록에 있는 단어는 변수명으로 사용할 수 없음. 자바스크립트에서 이미 사용중이란 의미에서 예약어. 대표적으로 let, class, return, function 등이 있음

▼ 바람직한 변수명

변수명은 간결 명확해야 함. 실제 프로젝트에선 대부분의 시간을 기존 코드를 변경하고 확장하는데 쓰기 때문에, 코드의 가독성이 업무의 능률과 난이도를 결정

자바스크립트 압축기와 브라우저는 코드 최적화 성능이 좋기 때문에, 변수를 추가한다고 해서 성능의 저하가 생기지 않음. 새로운 변수 선언을 두려워하지 말 것

• 줄임말이나 알파벳 한 자 등의 짧은 이름은 피할 것
• 최대한 서술적이면서 동시에 간결하게
• 일관적인 규칙을 따를 것. 특히 팀에 속해 있다면 팀의 규칙을 최우선적으로

/* 나만 아는 축약어나 짧은 이름 지양 */
let un;
let a;

/* 간결하되 설명이 잘 되는 이름 지향 */
let currentUserInfo;
let recentUpdateDate;

Javascript의 상수 (constant)

변화하지 않는 변수. let 대신 const를 사용

상수는 재할당할 수 없으므로 상수를 변경하려 하면 오류 발생

const name = "song";
name = "kim"; // 오류 발생! can't reassign the constat!

 

대문자 상수

대개 기억하기 힘든 값을 상수에 할당해 별칭으로 활용. 오타 확률이 낮고, 코드 가독성이 증가함

대개 하드코딩이 필요할 때 그 값을 대문자 상수에 할당해 활용하고, 일반적으로 최초 할당 이후 값이 변하지 않는 변수는 카멜 케이스 등의 기존 표기법을 적용하는 편

/* 하드코딩 대신 대문자 상수 활용 */
const COLOR_RED = "#F00";

/* 값이 변하지 않을 변수의 선언 */
const pageLoadTime = 10;

 

Javascript의 자료형 - 1. 숫자형 (number type)

정수 및 부동소수점 숫자(floating point number), 특수 숫자 값(Infinity, - Infinity, NaN) 

Number() 함수를 이용해 특정 값을 강제로 숫자형으로 바꿀 수 있음

Number() 결과 예시

▼ BigInt

자바스크립트의 숫자형 표현 범위를 넘어가는 값을 표현해야하는 경우 활용하는 자료형.

정수 리터럴 끝에 n을 붙여 만듦

Firefox, Chrome, Edge, Safari에선 지원하지만 IE에선 지원하지 않는 호환성 이슈가 있음

const bigInt = 99999999999999999999999999999999999999999999999n; // 끝에 n 붙임!

Javascript의 자료형 - 2. 문자형 (string type)

큰 따옴표 "" 와 작은 따옴표 ''는 기본적인 경우로, 자바스크립트에선 이 둘에 차이 없음

String() 함수를 활용해 특정 값을 강제로 문자형으로 바꿀 수 있음

역 따옴표 ``(backtick)은 문자열 중간에 변수나 표현식을 표현해야하는 경우 활용

let name = "song";
/* 백틱으로 감싼 문자열 중간에 ${}를 삽입 */
alert(`제 이름은 ${name}이고, 나이는 ${40 + 5}살입니다.`)

 

▼ 글자형(character)

C언어나 Java의 char와 달리, 자바스크립트에선 글자형을 지원하지 않음 

Javascript의 자료형 - 3. 불린형 (boolean type)

논리 타입이라고도 하며, true와 false 두 값만 존재

Boolean() 함수를 활용해 특정 값을 강제로 불린형으로 바꿀 수 있음. 이때 true가 되는 값들을 truthy하다고 하고, false가 되는 값들을 falsy하다고 함

▼ falsy한 값

불린형 false / 숫자형 0, -0, NaN / BigInt형 0n / 비어있는 문자형 "", '', `` / null / undefined

이들을 제외한 모든 값은 truthy함. 특히 문자열 "0"은 truthy한 값임을 주의할 것

Javascript의 자료형 - 4. null

어느 자료형에도 속하지 않는 고유의 값.

다른 언어에서의 null은 "존재하지 않는 객체에 대한 참조"나 "null pointer" 등에 활용하는 반면, 자바스크립트의 null은 "존재하지 않는 값(nothing)", "비어 있는 값(empty)", "알 수 없는 값(unknown)"을 나타낼 때 활용

 

Javascript의 자료형 - 5. undefined

어느 자료형에도 속하지 않는 고유의 값. "값이 할당되지 않은 상태"를 의미함

undefined를 억지로 할당하는 게 가능은 하지만, 변수가 비어있거나 알 수 없는 상태를 표현하고 싶다면 null을 활용하는 것을 권장

let name;
console.log(name); // 선언은 했으나 값을 할당하지 않았기 때문에 undefined가 출력됨

 

Javascript의 자료형 - 6. 객체형 (object)

한 가지의 자료형씩만 표현할 수 있는 다른 원시(primitive) 자료형들과 달리, 데이터 컬렉션이나 복잡한 개채(entity)를 표현 할 수 있음

 

Javascript의 자료형 - 7. 심볼형 (symbol)

객체의 고유한 식별자(unique identifier)를 만들 때 사용

 

typeof

인수의 자료형을 반환함. 자료형에 따라 처리 방식을 바꾸고 싶거나, 변수의 자료형을 빠르게 알아낼 때 활용

연산자로 기능할 수도 있고, 함수로 기능할 수도 있음. 결과는 동일하고, 출력값의 자료형은 문자형임

let isString = "There is an apple.";
let isNumber = 125;

/* 연산자 typeof */
typeof isString // 출력 : "string" 

/* 함수 typeof() */
typeof(isNumber) // 출력 : "number"

 

▼ typeof 심화

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

typeof Math // 출력 : "object" 
typeof null // 출력 : "object"
typeof add // 출력 :  "function"

Math는 자바스크립트에 내장된 객체기 때문에 "object"가 출력됨

null은 고유한 자료형이지만, 자바스크립트 자체 오류로 " object "가 출력됨. 호환성 유지를 위해 수정하지 못함

함수는 자료형이 아님에도 불구하고, 피연산자가 함수면 "function"을 출력함. 역시 호환성 유지 위해 냅둠.