변수
변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름 (값의 위치를 가리키는 상징적인 이름)
let a = 10;
const b = 10 + 5; // 15<<memory>> |
|---|
10(메모리 주소.. 0X0000F2) |
| ... |
| 5 |
| ... |
| 15 |
| { name: ‘Kim’, age: 12 } |
- 5, 10은 임의의 메모리 주소에 저장되고 CPU가 값을 읽어서 연산을 수행한다.
10 + 5연산이 수행되어 생성된 15라는 값도 임의의 메모리 주소에 저장되고15라는 값을 재사용하기 위해 변수a에 값을 할당한다.- 메모리에 직접 접근을 허용하지 않는 이유 : 사람은 실수하기 마련이다. 메모리에 직접 접근하여 시스템에 심각한 오류를 유발하는 가능성을 사전에 막기 위함
- 변수를 왜 사용하는가? 재사용하기 위해서
JavaScript의 데이터 타입
자바스크립트의 변수는 자료형과 관련없이 모든 값이 할당될 수 있다. 이처럼 동적으로 타입이 변경될 수 있는 언어를 '동적 타입 언어'라고 부른다.
데이터 타입은 왜 필요한가?
- 메모리 공간 확보를 위해
- 값은 메모리에 저장되고 참조될 수 있어야 한다. 단, 메모리에 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야 한다. (메모리 공간 낭비를 방지하기 위해)
- 문자열이나 숫자 각각 할당된 메모리 용량의 크기가 정해져 있다.
- 값은 메모리에 저장되고 참조될 수 있어야 한다. 단, 메모리에 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야 한다. (메모리 공간 낭비를 방지하기 위해)
- 값을 참조할 때 한 번에 읽어야 할 메모리 공간의 크기를 결정하기 위해
- 메모리에서 읽어 들인 2진수를 어떻게 해석해야 할지 결정하기 위해
데이터 타입 종류
- JavaScript의 모든 값은 데이터 타입을 갖는다.
- JavaScript (ES6) 기준 데이터 타입은 7개
- (원시 타입) number : 정수, 실수 구분 없음
- (원시 타입) string : 문자열
- (원시 타입) boolean : true / false
- (원시 타입) undefined : var 키워드로 선언된 변수에 암묵적으로 할당되는 초기 값
- (원시 타입) null : 값이 없다는 것을 명시적으로 나타낼 때 사용하는 값
- (원시 타입) symbol : 객체의 고유한 식별자를 만들 때 사용
- (객체 타입) object : 객체, 함수, 배열 등
- (원시 타입) BigInt : 길이에 상관없이 정수를 나타낼 수 있음
BigInt
암호 등 큰 숫자가 필요하거나 높은 정밀도를 요하는 작업엔 일반 number(-(253-1) < num < (253-1)(9007199254740991)) 이상의 숫자가 필요하기 때문에 BigInt를 사용한다.
null vs. undefined
undefined는 자바스크립트 엔진이 값의 초기화를 위해 넣는 값(개발자의 의도적 할당X)
null은 값이 비어있음을 표시하기 위해 개발자가 의도적으로 할당한 값
원시 값은 불변 값
- 원시 값은 불변 값이다.
- 원시 값 메모리에 할당하면 변수에 실제 값이 저장된다.
let a = 1;
console.log(a); // 1
a = 2;
console.log(a); // 2- 기존에 바라보던 값이 변경된 것이 아니라 ‘바라보고 있는 메모리 주소’가 바뀐 것이다.
- a가 바라보고 있는 메모리 주소는 변경된 상태
객체는 변경 가능한 값
- 객체는 다양한 타입의 값(원시 값 or 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조
- 객체를 변수에 할당하면 변수에 참조 값이 저장된다.
- 객체는 0개 이상의 프로퍼티로 구성된 집합, 프로퍼티는
key-value로 구성되어 있다.
const student = {
name: 'Kim',
age: 12
};- key :
name,age - value :
'Kim',12
객체는 변경 가능하다
const student = {
name: 'Kim',
age: 12
};
console.log(student.name); // 'Kim'
console.log(student['name']); // 'Kim'
student.name = 'Lee';
console.log(student.name); // 'Lee'student라는 변수가 바라보고 있는 메모리 주소는 바뀌지 않았다.- 해당 메모리의
name이라는 key의 value가 변경된 것
배열이란?
배열은 여러 값을 순차적으로 나열한 자료구조 (index로 값을 찾는다)
- 객체는 프로퍼티 키로 값을 찾는다.
const arr = [1, 2, 3]; // 배열
const obj = { a: 1, b: 2 } // 객체
console.log(arr[1]); // 2
console.log(obj.b); // 2
console.log(obj['b']); // 2JavaScript 형 변환
자바스크립트는 타입 변경이 자유롭고 자바스크립트 엔진이 코드를 평가하는 중 개발자의 의도와 무관하게 암묵적 타입 변환이 발생하거나 개발자가 의도를 갖고 명시적 타입 변환을 할 수 있다.
암묵적 타입 변환
- string 타입으로 변환
1 + '2' // '12' 1 + '' // '1' -1 + '' // '-1' 0 + '' // '0' -0 + '' // '0' NaN + '' // 'NaN' true + '' // 'true' false + '' // 'false' null + '' // 'null' undefined + '' // 'undefined' [] + '' // '' [1, 2] + '' // '1, 2' - number 타입으로 변환
+ '' // 0 + '0' // 0 + '1' // 1 + true // 1 + false // 0 + null // 0 + undefined // NaN - boolean 타입으로 변환
if('') // false if(true) // true if(0) // false if('name') // true if(null) // false
명시적 타입 변환
-
string 타입으로 변환
String(1) // '1' String(true); // 'true' -
number 타입으로 변환
Number('1') // 1 parseInt('1') // 1 -
boolean 타입으로 변환
Boolean('a') // true Boolean('') // false Boolean('false') // true Boolean(null) // false -
==, ===
== 는 값이 일치하는 지 확인하고, === 는 값과 타입이 모두 일치하는지 확인한다.
-
느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
또한 자바스크립트는 자료형을 미리 선언하는 것이 아니라 런타임에 타입이 결정되는 동적 언어로 의도치 않은 타입 변경이 발생할 수 있다.
- let보다 const 키워드로 변수를 선언하여 값의 변경을 방지한다.
- 전역 변수 사용을 피한다. 전역 변수는 어디서든 참조, 변경이 가능하기 때문에 의도치 않은 값의 변경이 발생할 수 있다.
- 변수의 유효범위(스코프)를 최대한 좁게 만든다.
if문을 사용한 조건 처리
if문은 (...) 조건문을 평가하고 결과를 boolean으로 return한다.
- falsey한 값 : number 0, string '', null, undefined, NaN (boolean으로 변환할 때 false인 값)
- truthy한 값 : falsey한 값을 제외한 값 (boolean으로 변환할 때 true인 값
if (year == 2015) {
alert( "정답입니다!" );
alert( "아주 똑똑하시네요!" );
}논리 연산자
|| (or)
피연산자 중 하나라도 true이면 true 반환, 피연산자 모두 false이면 false 반환
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false&& (and)
모든 피연산자가 true이면 true 반환, 그 외에는 false 반환
// 첫 번째 피연산자가 truthy이면, AND는 두 번째 피연산자를 반환
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
// 첫 번째 피연산자가 falsy이면, AND는 첫 번째 피연산자를 반환하고 두 번째 피연산자는 무시
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0if를 ||나 &&로 대체하지 말 것
let x = 1;
(x > 0) && alert( '0보다 큽니다!' );- &&의 오른쪽 피연산자는 평가가 && 우측까지 진행되어야 실행되고 즉, (x > 0)이 참인 경우에만 alert문이 실행된다.
(if문)
let x = 1;
if (x > 0) alert( '0보다 큽니다!' );AND 연산자 &&를 if문을 ‘짧게’ 줄이는 용도로 사용하는 경우가 있다. &&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋다.
(원래 개인적으로 자주 쓰던 방식이었는데 왠만하면 안 써야겠다. 안 좋은 방식이라는 걸 이제야 알았다.)
! (not)
NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행한다.
- 피연산자를 불린형(true / false)으로 변환한다.
- 1에서 변환된 값의 역을 반환합니다.
`
alert( !true ); // false
alert( !0 ); // true?? (nullish 병합 연산자)
함수
함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다.
자바스크립트의 함수는 일급 객체이다.
- 무명의 리터럴로 표현 가능
- 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다. (자바스크립트에서 함수 또한 값이기 때문에 변수에 할당 가능하다.)
- 함수의 매개변수로 전달할 수 있다.
- return 값으로 사용할 수 있다.
함수 선언문 vs. 함수 표현식
함수 선언문
- 함수명 생략 불가
- 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
- 함수 호이스팅이 발생한다.
- 함수 선언문은 자바스크립트 런타임 전 코드 평가 단계에서 평가되어 함수 선언, 초기화, 할당이 한번에 이루어져 메모리에 할당되기 때문에 함수 선언문 위에서 호출 가능하다.
function square(number) {
return number * number;
}함수 표현식
- 함수명 생략 가능 (변수에 할당할 수 있기 때문이다. 이를 익명 함수라 하며, 함수 표현식은 일반적으로 함수명을 생략한다.)
- 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다.
- 함수 표현식은 자바스크립트 런타임 전 코드 평가 단계에서는 변수 선언만 등록되고 런타임 중 실행 컨텍스트 스택에 올라갔을 때 함수가 평가되어 실행된다. 따라서 함수 표현식 위에서 호출할 수 없다.
const square = function(number) {
return number * number;
};화살표 함수
화살표(=>)를 사용하여 기존 함수 표현식보다 간결한 방식으로 표현한 함수
// 화살표 함수
const func = (arg1, arg2, ...argN) => expression
// 함수 표현식
const func = function(arg1, arg2, ...argN) {
return expression;
};- 화살표 함수는 익명 함수로만 사용할 수 있기 때문에 화살표 함수를 호출하려면 변수에 함수를 할당하는 함수 표현식을 사용해야 한다.
- 화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지고, prototype 프로퍼티가 가리키는 prototype 객체의 constructor를 사용하는데 화살표 함수는 prototype 프로퍼티를 갖고 있지 않기 때문이다.
함수와 this 바인딩
- 자바스크립트의 함수는 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다.
-- 일반 함수 호출 : 전역에 바인딩
- 메서드 호출 : 함수가 객체의 프로퍼티 값인 경우 메서드로 호출된다.
- 화살표 함수는 함수를 선언할 때 this에 바인딩되는 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
참조
https://ko.javascript.info/first-steps
https://poiemaweb.com/js-data-type-variable
https://poiemaweb.com/js-function
https://poiemaweb.com/js-this
