변수 , 연산자(Javascript)

변수

변수는 데이터를 담기 위한 메모리 공간

선언자 종류

var : 일반적인 변수 선언자

let : 블록 유효 범위를 가지는 지역변수를 선언

const : 블록 유효 범위를 가지면서 한 번만 할당 할수 있는 변수(상수)를 선언

const로 선언한 상수는 let문으로 선언한 변수처럼 동작 단, 반드시 초기화해야 한다는 차이점

const 문으로 선언한 변수에 다시 대입을 시도하면 타입 오류가 발생

const 문으로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로퍼티 값을 수정

 let a = "out a";
 {
 	let a = "in a";
 	let b = "in b";
 	console.log(a); // in a
  console.log(b);  // in b
 }
 console.log(a); // out a
 console.log(b); // ReferenceError: b is not defined  

const c = 2;
 c = 5; // Uncaught TypeError  

변수 선언

var a; 
 console.log(a); // -> undefined (변수를 선언하기만 하면 변수 안에는 정의되지 않았음을 뜻하는 undefined라는 값이 들어감)

var a; 
 console.log(a); // -> ReferenceError : a is not defined(오류 메시지)

var 문으로 선언하지 않은 변수 값을 읽으려고 시도하면 참조 오류가 발생 그러나 var 문으로 선언하지 않은 변수에 값을 대입할 때는 오류가 발생하지 않음

선언되지 않은 변수에 값을 대입하면?

선언되지 않은 변수를 읽으려고 하면 참조 오류가 발생합니다.

변수를 선언하지 않고 사용하는 행위는 버그의 원인이 될 수 있으니, 반드시 선언하고 사용하는 것이 좋다고 합니다.

그리고 var 문으로 선언되지 않은 변수에 값을 대입하면 오류가 발생하지 않습니다.

그 이유는 자바스크립트 엔진이 해당 변수를 자동으로 전역 변수로 선언하기 때문이라고 합니다.

변수 끌어올림(호이스팅, hoisting)

프로그램은 작성 순서에 따라 차례대로 실행되지만, 변수 선언은 이 원칙을 따르지 않고 범위에 따라 선언과 할당을 분리 시켜 위로 끌어올립니다.

✍ example : 호이스팅 전

console.log(x);
var x;

✍ example : 호이스팅 후

var x;
console.log(x);

변수 이름

• 식별자

변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자(identifier)라고 합니다.

• 변수의 명명규칙

알파벳(A-Z , a-z), 숫자(0~9), 언더바(_), 달러 기호($) 사용 가능 첫 글자로는 숫자를 사용할 수 없음.

숫자를 제외한 위의 나머지 중 하나를 사용 예약어를 식별자로 사용할 수 없음

✍ 사용 가능한 예 sum newValue width result

✍ 사용 불가능한 예 1st ❌ (첫 글자 숫자) / new-value ❌ (하이픈은 사용불가) / new ❌ (예약어)

변수 이름 짓기

변수의 이름은 식별자 규칙에 어긋나지 않는다면 자유롭게 지정

그러나 다른 사람들도 알아볼 수 있도록 되도록이면 직관적으로 짓는게 좋음

---

캐멀 표기법(camelCase)

캐멀 표기법이란, 두 번째 이후 단어의 대문자 부분이 낙타의 혹처럼 보인다고 해서 지어진 이름 두 번째 이후 단어의 첫 글자를 대문자로 하며 나머지는 소문자로 표기

✍ example

firstNum newGameId

---

파스칼 표기법(PascalCase)

파스칼 표기법이란, 프로그래밍 언어인 파스칼(Pascal)에서 사용된 표기법입니다. 각 단어의 첫 글자를 모두 대문자로 표기

✍ example

FirstNum NewGameId

---

스네이크 표기법(snake_case)

모든 단어를 소문자로 표기하며, 단어 사이사이에 언더바(_)를 넣어 표기

✍ example

first_num new_game_id

데이터 타입

• 데이터 타입이란 변수를 선언할 때, 숫자나 문자열 또는 이 외의 것들을 변수에 저장하는 데이터 종류를 말합니다.
• C나 Java 와 같은 프로그래밍 언어에는 정수 타입 변수(int), 부동소수점 타입 변수(double) 등이 있어 그 변수의 타입과 일치하는 데이터만 저장이 가능
• 이와 같이 변수에 타입 이 있는 언어를 정적 타입 언어(static typed language) 라고 함 하지만 자바스크립트는 변수에 타입이 없으므로, 모든 타입의 데이터를 저장할 수 있다.
• 실행할 때 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는데 이와 같은 언어를 동적 타입 언어(dynamic typed language) 라고 합니다.

var num = '471';
console.log(num); // -> 471

num = '숫자';
console.log(num); // -> 숫자

데이터 타입 종류

Primitive Type (기본형, 또는 원시 타입) : 값을 그대로 할당

• Number
• String
• Boolean
• null : 아무것도 없음을 의미
• undefined : 초기화되지 않았거나 아직 값이 할당되지 않았음을 의미
• +ES6: Symbol

Reference Type (참조 타입) : 값이 저장된 주소값을 할당 (참조함)

• Object(객체)

-Array

• Function
• RegExp(정규표현식)
• +ES6: map, set, weakmap, weakset

연산자

JavaScript의 연산자는 다음과 같은 유형으로 나눌 수 있다.

• 할당 연산자
• 비교 연산자
• 산술 연산자
• 비트 연산자
• 논리 연산자
• 문자열 연산자
• 조건 (삼항) 연산자
• 쉼표 연산자
• 단항 연산자
• 관계 연산자

산술연산자

더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)

증감연산자

• 증가연산자(++) - 숫자형 데이터를 1씩 증가

변수++; 또는 ++변수;

• 감소연산자(--) - 숫자형 데이터를 1씩 감소

변수--; 또는 --변수;

논리연산자

논리 AND (&&)	OR 연산자, 비교하는 대상 중 하나라도 true면 true가 됨
논리 OR (ll)	AND 연산자, 비교하는 대상 모두 true일때 true, 그렇지 않다면 false
논리 NOT (!)	not 연산자, 피 연산자의 값을 반대로 바꿈, true -> false, false -> true

비교 연산자

비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반

종류설명----

==	서로 같으면 true를 반환	10 == var1 , "10" == var1 , 10 == '10'
!=	서로 다르면 true를 반환	var1 != 20 , var2 != "30"
===	값과 타입이 모두 같은 경우 true를 반환	10 === var1
!==	값 또는 타입이 서로 다를 경우 true	var1 !== "7" , 7 !== '7'
>=	왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환
<	왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true를 반환
<=	왼쪽 피연산자가 오른쪽 피연산자와 같거나 작으면 true를 반환

참고

단항 연산자 && 조건 (삼항) 연산자

단항 연산자 : 오직 하나의 피연산자만 사용하는 연산입니다.

조건 (삼항) 연산자 : 세 개의 피연산자를 받는 유일한 연산자

condition ? val1 : val2;

참고: =>는 연산자가 아니라 화살표 함수의 표기법이라고 합니다.

관계 연산자

관계 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 불리언 값을 반환합니다.

in

in 연산자는 지정한 속성이 지정한 객체에 존재할 경우 true를 반환

delete

delete연산자는 객체의 속성을 삭제

 

delete object.property;

delete object[propertyKey];

delete objectName[index];

typeof

typeof 연산자는 평가 전의 피연산자 타입을 나타내는 문자열을 반환

var myFun = new Function('10 + 10');
var name = 'minjae';
var size = 10;
var animal = ['lion', 'tiger', 'wolf'];
var today = new Date();

typeof myFun;     // "function" 반환
typeof name;     // "string" 반환
typeof size;      // "number" 반환
typeof anima;       // "object" 반환
typeof today;     // "object" 반환

할당 연산자

할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=)로, x = y 는 y의 값을 x에 할당

구조 분해 할당

구문은 JavaScript 표현식 중 하나로, 객체나 배열을 생성할 때와 비슷한 구문으로 사용해서 어떤 객체나 배열에서 데이터를 추출할 수 있다

var animal = ['lion', 'tiger', 'wolf'];

// 구조 분해 없음
var lion  = animal[0];
var tiger = animal[1];
var wolf = animal[2];

// 구조 분해 사용
var [lion, tiger, wolf] = animal;

반환 값과 체이닝

일반적으로, 할당 표현식은 변수 선언(const, let, var)과 함께 쓰이거나 독립적인 명령문으로 사용

// 변수 a를 선언해서 f()의 결과로 초기화,
// a = f() 할당 표현식의 결과는 버려짐.
let a = f();

// 변수 a를 선언해서 g()의 결과로 초기화,
// a = g() 할당 표현식의 결과는 버려짐.
a = g(); // 변수 a를 g()의 결과로 재할당.

---

할당 체이닝이나, 다른 표현식에 중첩된 할당은 예상하기 힘든 동작을 보일 수 있습니다.

그래서 어떤 JavaScript 스타일 가이드에서는 할당을 체이닝하거나 중첩하는 걸 지양하라 말합니다.

어쨌든, 할당 체이닝과 중첩을 가끔 마주치게 되므로 어떻게 동작하는지는 알아두는 게 좋다고 합니다.

---

연산자 우선순위

연산자의 우선순위는 표현식을 평가할 때 연산자를 적용하는 순서를 결정

괄호를 사용하면 우선순위를 바꿀 수 있다.

우선순위가 높은 순서 -> 낮은 순서로 연산자를 나열

맴버 접근 . []

인스턴스 호출/생성 () new

증감 ! ~ - + ++ -- typeof void delete

거듭제곱 **

곱하기/나누기 * / %

더하기/빼기 + -

비트 시프트 << >> >>>

관계 < <= > >= in instanceof

동등/일치 == != === !==

비트 AND &

비트 XOR ^

비트 OR |

논리 AND &&

논리 OR ||

조건 ?:

할당 = += -= **= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=

쉼표 ,

출처 및 참고자료

[mdn : JavaScript] : (https://developer.mozilla.org/ko/docs/Web/JavaScript) 코리아IT아카데미 이용교 강사 : https://github.com/yonggyo1125/curriculum300H/tree/main/2.%EC%9B%B9%ED%91%9C%EC%A4%80(48%EC%8B%9C%EA%B0%84)