식별자 규칙
•
식별자는 글자나 달러 기호($), 밑줄(_), 유니코드 문자만 사용할 수 있다.
•
예약어는 식별자로 사용할 수 없다.
•
식별자는 대문자로 시작해서는 안된다.
•
밑줄 한 개나 두 개로 시작하는 식별자는 아주 특별한 상황, 내부 변수에서만 사용
자바스크립트 식별자 표기법
•
camel case
•
snake case
변수
이름이 붙은 값
값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자
자바스크립트는 동적 타입 언어로 변수 타입을 지정하지 않아도 값이 할당되는 과정에서 자동으로 변수의 타입이 결정된다. 고정된 타입이 없으므로 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다.
변수를 선언할 때 초기값을 지정하지 않으면 undefined가 할당된다.
블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.
블록 범위 읽기 전용 상수를 선언.
주소값을 할당하므로 변수 자체를 변경하는 것은 불가능하지만 변수 내부를 변경하는 것은 가능
변수를 선언. 추가로 동시에 값을 초기화.
전역변수처럼 쓰이지만 호이스팅 문제로 인해 현재는 잘 쓰지 않음
let num;
const name;
var age;
JavaScript
복사
자료형
데이터 종류를 의미
JavaScript는 선언 시 변수 타입이 지정되어 있지 않고 여러 타입의 값을 자유롭게 할당할 수 있는 동적 타입 언어
타입은 크게 2가지로 나눌 수 있다.
원시 자료형(primitive data type)
고정된 저장 공간을 차지하는 데이터, 하나의 데이터만 넣을 수 있다.
•
변경 불가능한 값 (immutable)이지만 변수에 다른 데이터 할당 가능
•
pass-by-value(값에 의한 전달) : 변수에 할당 시 값으로 저장
•
크기가 고정되어 있어 원시 자료형을 스택에 저장함
•
string, number, bigint, boolean, symbol, null, undefined
변경 불가능하다? ⇒ 불변성
원시값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시값을 변경하는 것이 아님.
새로운 메모리 공간을 확보하고 재할당할 원시값을 저장한 후 변수는 새롭게 재할당된 원시값을 가리킴
즉, 변수가 참조한 메모리 공간의 주소가 바뀌는 것!
왜 그럴까?
재할당 이외에 원시값인 변수값을 변경할 수 있다면 예기치않게 변수값이 변경될 수 있음을 의미.
상태 변경을 추적하기 어려워진다.
Number
정수 및 부동소수점 숫자를 나타내는 자료형
let num = 1;
console.log(typeof(num))
----
number
JavaScript
복사
number는 3가지 특별한 값들도 표현할 수 있는데
•
Infinity
양의 무한대를 나타냄
•
-Infinity
음의 무한대를 나타냄
•
NaN
산술 연산 불가 (Not a Number)
말이 안되는 수학 연산을 하더라도(0으로 나누기, 숫자가 아닌 변수 연산 등) 다른 언어와 달리 에러가 나지 않고 NaN이나 Infinity를 반환한다.
JS에서는 0을 -0이나 +0 두가지로 표현할 수 있다. ( +0 === -0 은 true)
Bigint
길이에 제약 없이 정수를 나타낼 수 있는 숫자 자료형
내부 표현방식으로 인해 자바스크립트에선 (9007199254740991) 보다 크거나 보다 작은 정수는 숫자형을 사용해 나타낼 수 없는데 BigInt는 이런 정수를 표현하는 자료형이다.
정수 값 끝에 n을 붙이거나 함수 BigInt를 호출하여 bigint 타입의 값을 생성할 수 있다.
bigint형은 bigint형 끼리만 연산이 가능하고 bigint형 값을 반환하므로 연산의 반환값에 소수부가 없다.
일치 연산자를 사용하여 비교하는 경우 같은 값을 비교하더라도 서로 다른 타입이라면 false를 반환하게 된다.
const bigint = 123456789012345678901234567890n
// bigint형끼리의 연산만 가능, 결과값도 bigint형 반환
alert(3n / 2n) // 1
// number형과 bigint형을 일치 연산자를 사용할 경우 타입이 다르므로 false
alert(1n == 1) // true
alert(1n === 1) // false
JavaScript
복사
String
텍스트 데이터를 나타내는 자료형
문자열을 따옴표로 묶어서 생성한다.
let word = 'apple';
let word = "banana";
let word = `carrot`;
JavaScript
복사
backtick(`)으로 문자열과 함께 ${<변수명>}을 묶으면 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다.
let name = 'Soyeon';
alert(`Hello, ${name}!`); // Hello, Soyeon!
JavaScript
복사
문자열은 인덱스를 통해 접근 가능하지만 이미 생성된 문자열은 immutable하므로 수정은 불가능하다. 문자열을 수정하려면 새로 문자열을 생성해 재할당해야한다.
let str = 'soyeon';
str[2] = 'm';
alert(str); // soyeon
JavaScript
복사
Boolean
논리적 참, 거짓을 나타내는 true / false 타입
let isTrue = true;
let isFalse = false;
JavaScript
복사
undefined
값이 할당되지 않은 상태
변수는 선언했지만 값이 할당되지 않았다면 undefined가 자동으로 할당됨.
let num;
alert(num); // undefined
JavaScript
복사
null
존재하지 않는 값, 비어 있는 값, 알 수 없는 값
다른 언어에서 '존재하지 않는 객체에 대한 참조'와 '널 포인터'를 나타내는 null과 달리
JavaScript에서의 null은 '존재하지 않는 값', '비어 있는 값', '알 수 없는 값(unknown)'을 나타냄
undefined와 달리 프로그래머가 변수에 값이 없음을 의도적으로 나타내기 위해 사용
let num = null;
JavaScript
복사
typeof(null)은 왜 'object'가 나올까?
typeof(NaN)이 'number'인 이유는 NaN은 숫자를 나타낼 때 주로 사용되며 숫자 값이 없음을 나타내는 값이기 때문이다.
undefined는
이와 마찬가지로 null은 빈 참조를 가리키고 있다는 것을 나타내기 위함이므로 'object' type으로 표시된다.
symbol
객체의 고유 식별자를 만들 때 사용
이름의 충돌 위험이 없는 유일한 객체의 property key를 만들기 위해 사용한다.
ES6에서 새롭게 추가된 타입
Symbol()
JavaScript
복사
같은 symbol을 여러 개 만들어도 심볼은 고유하므로 서로 다른 것으로 인식
HTML
복사
원시 자료형을 객체처럼 사용할 수 있음 ⇒ 원시 래퍼 객체를 만들어주기
참조 자료형(object/reference type)
데이터의 크기가 동적으로 변하는 데이터
•
프로퍼티에 다양한 종류의 값을 저장
•
함수도 저장할 수 있음
•
Pass-by-reference : 변수에 할당 시 reference;주소값으로 전달
•
크기가 동적이므로 참조 자료형은 heap에 저장함
타입마다 다른 속성과 메소드
Array (배열)
Object (객체)
복잡한 데이터 구조를 표현할 때 사용
원시형과 달리 다양한 데이터를 담을 수 있다.
객체는 중괄호 {} 를 이용해 만들 수 있으며 그 안에는 key:value 쌍으로 구성된 property를 여러개 넣을 수 있다. key는 문자형만, value는 모든 자료형이 허용됨.
// 빈 객체 만드는 방법
let box = new Object(); // '객체 생성자'
let box = {}; // '객체 리터럴'
JavaScript
복사
•
property(프로퍼티)
콜론(:)을 기준으로 왼쪽에는 key, 오른쪽에는 value가 위치한다.
property key (프로퍼티 키)는 '프로퍼티 이름' 혹은 '식별자'라고도 부름
let cat = {
name: "munji",
age: 2
}
JavaScript
복사
more about Object>
Function (함수)
typeof 연산자
인수의 자료형을 반환
typeof 1 // number
typeof('hello') // string
typeof null // object
JavaScript
복사
typeof null?
null 은 의도적으로 값이 없음을 명시하기 위한 기본 데이터 타입으로, 타입과 값 모두 null인 primitive type으로 객체가 아니다!!
하지만 막상 null의 타입을 콘솔에 출력해보면 object라는 결과값이 출력된다.
이는 자바스크립트 초기 버전의 버그로 하위 호환성을 유지하기 위해 오류를 수정하지 않고 남겨둠
함수
어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
자바스크립트의 함수는 객체 타입의 값. 따라서 함수도 함수 리터럴로 생성할 수 있음
일반 객체와 다른점은 일반 객체는 호출할 수 없지만 함수는 호출할 수 있고 함수 객체만의 고유한 프로퍼티를 갖는다.
함수는 function body라고 하는 statement로 구성됨
값은 함수에 전달될 수 있고 함수는 값을 반환한다.
name : 함수 이름
parameter : 함수에 전달되는 인수의 이름
statements : 함수의 body를 구성하는 문
반복적으로 실행되는 일이 필요한 경우 만들어 사용 → 코드의 재사용 → 유지보수의 편의성, 코드의 신뢰성 증가
•
코드의 묶음
•
기능의 단위
•
입력과 출력간의 매핑
•
호출 후 반드시 돌아옴
함수 선언 방법
•
함수 선언문
함수명, 매개변수 목록, 함수 몸체로 이루어져있음. 함수 이름을 생략할 수 없다.
호이스팅
function square(num) {
return num * num;
}
JavaScript
복사
•
함수 표현식
익명함수 할당
const square = function(num) {
return num * num;
}
JavaScript
복사
•
화살표 함수
ES6부터 도입
const square = (num) => {
return num * num;
}
// 함수의 본문(body)에 return문만 있는 경우 return과 중괄호 생략 가능
// 단!!! 중괄호 꼭 생략하기. 안하면 작동하지 않음! 소괄호는 가능
const square = (num) => num * num; // O
const square = (num) => (num * num); // O
const square = (num) => {num * num); // X
JavaScript
복사
Parameter VS Argument
매개변수 (parameter)
함수를 실행할 때 전달하는 변수로 함수를 선언할 때 사용
전달인자 (argument)
함수를 호출할 때 매개변수에 할당되는 값
function square(num) {
return num * num;
}
let result = square(5);
alert(result); // 25
JavaScript
복사
위 코드에서 parameter는 함수 선언 시 사용된 num 변수이고, argument는 함수 호출 시 num에 할당된 5 이다.