내가 고등학교를 다닐때만 해도 문과는 미적분을 배우지 않았다.
그래서 변수, 상수, 매개변수라는 말을 처음 들었을때 개념이 와닿지 않았다.
문과형 인간인 나는 새로운 개념을 배울 때 단어의 속뜻에 집착하는 경향이 있다.
단어를 뜯어보면 개념을 이해할 수 있다.
변수는 var와 let으로, 상수는 const로 선언한다. var, let, const는 각 유효 범위(Scope)가 있다. 이 범위라는 것은 함수 안에서 선언한 변수를 함수 밖에서는 출력할 수 없다던지, 최상단에서 선언한 변수를 함수 안이든 바깥이든 출력할 수 있다던지 하는 사용 가능 범위를 말한다. 흔히 전역변수와 지역변수라고 이름을 붙여 구분한다.
기본 개념 정의
1. 변수(변하는 수. 한자는 변할 변, 셈 수.) *var, let
프로그램이 실행되는 동안 두 개 이상의 값을 가질 수 있는 데이터 항목
2. 상수(변하지 않는 수. 한자는 항상 상, 셈 수.) *const
주어진 조건 하에서 변수의 값이 어떻게 변하든 그 값이 변하지 않는 매개변수 또는 양
const가 상수 데이터로 쓰일때
const MAX_COUNT = 7;const가 재할당 불가능한 상수변수 또는 변수로 쓰일때
let myDog = {
name: '한강',
breed: 'welsh corgi',
age: 6,
};
myDog.age = '7';
//변수가 가리키고 있는 특정한 object의 값은 변경 가능| 비교 내용 | var | let | const |
|---|---|---|---|
| 재할당 | O | O | X |
| 변경 | O | O | O |
ES6 이전에는 var 만 있었기 때문에 제이쿼리로 구현된 사이트들 대부분 스크립트에서 변수가 var로 선언되어 있는 경우가 많았다. 변수 선언과 할당이 중복으로 가능하기 때문에 디버깅이 힘든 단점 때문에 var 사용은 지양되며 const를 주로 쓴다.
4. 전역변수와 지역변수
전역변수(Global Variables): 함수 밖에서 선언되어 어디서든 사용 가능
지역변수(Local Variables): 함수 내에서 선언되어 함수 내에서만 사용 가능
var myAge = 25; // 전역변수: 함수 밖 선언, 어디서든 사용
function newFunction() {
var yourAge = 30; //지역변수: 함수 내 선언, 함수 내 사용
console.log(yourAge); // 30
console.log(myAge); // 25
}
console.log(yourAge); // error: undefined
console.log(myAge); // 25자바스크립트에서 변수는 왜 존재하는가?
input(입력: 주로 data 입력을 받겠죠,,?) -> process(처리) -> output(출력)
코드를 통해 어떤 동작을 처리하는 과정은 위와 같이 이루어짐
사용자에게 입력받은 데이터를 임시로 저장해서 연산이든 뭐든 어떤 방식으로든 처리를 하기 위해서 존재하는게 변수. 이름이 존재하는 데이터 기억장소라고 보면 됨.
let a (변수 선언) = 0 (값 할당);
a = 20; (값 재할당)
📌 규칙
- 최대한 의미 있게 구체적으로 쓰는 게 좋음. number1, number2 이런식은 비추
- 변수명에 쓸 수 있는 특수문자는 _(언더스코어), $(달러) 두개 뿐
- 숫자가 아닌 영문자로 시작할 것. 숫자는 중간이나 뒤에 쓸것.
- 자바스크립트의 keywords_예약어(if, else, switch, typeof 등)는 쓸 수 없음
🔍 참고: MDN JS 예약어 종류
데이터 타입
- 단일 데이터(원시 primitive) : number, string, boolean, null, undefined, Symbol
- 복합 데이터(객체 object) : object(array), function
숫자(Number)와 문자(String)
let integer = 1;
let negative = -1;
let decimal = 0.1;
let string = "문자열";
let lineBreak = "줄바꿈은\n이렇게"
let tab = "탭은\t\t 이렇게"
console.log(string);
console.log(lineBreak);
console.log(tab);
자바스크립트 문자열 데이터 안에서 줄바꿈(개행)과 탭은 저런 방식으로 적용해 볼 수 있다. 하드코딩이 아닌 데이터 안에서 줄바꿈(개행)과 탭을 처리하고 싶을 경우 유용하니 기억해두면 좋다! 🔍 참고: MDN String
템플릿 리터럴 (Template Literal)
큰 따옴표 "" 나 작은 따옴표 '' 대신 백틱 `` 을 사용하여 표현식이나 문자열 삽입. ES6 때 도입됨. + 를 사용하여 문자열을 연결해주는 것 보다 가독성이 더 좋다.
//ES6 이전
let userId = 'devjisun';
let loginActive = "안녕하세요," + userId + "님, \n로그인이 완료되었습니다."
console.log(loginActive);
//ES6 이후
loginActive = `안녕하세요, ${userId}님,
로그인이 완료되었습니다.`
console.log(loginActvie);
불리언(Boolean) _true or false
불리언이 사용되는 예 : isActive가 true 일때 버튼이 활성화되고 false 일때 버튼이 비활성화 되게 한다
const isActive = false;
const isLiked = true;거짓(fales)
0, -0, ''(텅 빈 문자열), null, undefined, NaN
참(true)
1, -1, '문자열', {}, [배열...], Infinity
double NOT !!으로 참, 거짓 출력 가능
console.log(Boolean(0));
console.log(!!0); 
+ 숫자가 아닌 타입을 넣으면 어떤 값이 나오는지 확인 가능
console.log(+false);
console.log(+null);
console.log(+'');
console.log(+true);
console.log(+'text');
null(empty object), undefined
변수 초기화만 하고 값을 할당하지 않으면 undefined, 정의되지 않은 상태.
null을 할당하면 null, 확실하게 비어있는 상태.
let myAge;
console.log(myAge);
let myAccount = null;
console.log(myAccout);
console.log(typeof null);
console.log(typeof undefined);
null은 빈 객체(empty object) 이다.
📌 타입이 정적으로 지정되는 java와는 달리 자바스크립트의 타입은 동적으로 변화한다. let으로 변수를 선언하고 number 타입의 값을 할당한 뒤 또 다시 string 타입으로 재할당했을 경우 타입은 바뀐다. 자바스크립트 공식문서에 자바스크립트를 dynamic language라고 명시한 이유 중 하나!
객체 Object {key: value}
많은 value 값을 하나의 변수에 저장
let myDog = {
name: '한강',
breed: 'welsh corgi',
age: 6,
};
console.log(myDog);
console.log(myDog.name);
console.log(myDog.breed);
console.log(myDog.age);
특정 key의 value값을 꺼내올 때는 variables.key 로 가져옴
원시값과 참조값
단일데이터를 담을 수 있는 원시타입은 변수당 하나의 값을 가진다.
복합데이터를 담을 수 있는 객체타입은 여러가지 원시데이터를 묶어서 표현하는 상태뿐만 아니라 이 상태와 연관된 행동 즉 함수를 함께 묶어둘 수 있다.
변수에 값을 할당하면 메모리셀에 값 자체가 들어가고 메모리 주소를 가르키는 곳에 값이 직접적으로 들어가 있음.
App 안에 Code, Data, Stack, Heap 이라는 저장소들이 있는데
원시타입은 Data나 Stack에, 객체는 사이즈가 정해져있지 않고 동적으로 크기가 줄었다 늘어났다가 할 수도 있기 때문에 Heap이라는 곳에 보관되어짐.
Data와 Stack 은 셀 하나당 데이터 하나.
Heap은 객체 데이터가 여러 셀을 차지하면서 저장되게 됨. 그러면 시작하는 셀의 메모리 주소가 해당 object의 변수가 가리키고 있는 Data 셀에 저장됨.
즉, 원시타입은 값이 복사되어 전달되고 객체타입은 참조값(메모리 주소, 레퍼런스)가 복사되어 전달.
