변수(Variable)의 정의
Programming = Data Processing // 프로그래밍은 데이터 처리와 동일하다.
변수(Variable)는 하나의 값을 저장할 수 있는, 이름을 부여한 저장공간을 의미한다.
구체적으로, 컴퓨터는 Memory 라는 데이터 보관함을 가지고 보관함의 크기는 모두 동일하다.
이때, 변수 선언을 통해 Memory에 변수의 저장소를 확보하고 등호(=)를 통해 특정 값을 변수에 할당할 수 있다.
ex ) let name = 'mimoh'; // let 타입의 name라는 변수를 선언하고 문자열 'mimoh'를 할당해라. (변수의 선언과 할당을 동시에 처리)
JS는 값을 반환하는 식 혹은 코드를 표현식(Expressions) 라고 하며,
해당 표현식을 해석하는 것을 평가(Evaluation) 라고 한다.
- 표현식 내부에서 변수가 사용되는 경우, 변수는 할당된 값으로 변경된 이후 표현식에 적용된다.
- 할당되지 않은 변수의 상태는 ? | 정의되지 않았다는 의미인 'undefined'
변수는 왜 사용할까?
변수는 프로그래밍을 추상화하고 간단하게 만들며 이는 코드의 재활용성 과 가독성 을 높이고 중복을 제거하여 유지보수 에 보다 용이하다.
1) 단순히 구구단을 출력하는 경우
// 구구단 중 2단의 예시
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 9
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18But, 해당 방식은 새로운 구구단을 출력할 때마다 새로운 코드를 작성해야 한다.이때 변수를 사용한다면, 변수의 값을 재할당하는 것만으로 데이터를 변경하고 코드를 재활용할 수 있게 한다.
2) 변수를 통해 구구단을 출력하는 경우
// 구구단 중 3단의 예시
// numb의 숫자를 재할당할 경우 해당 구구단으로 결과가 변경
let numb = 3;
console.log(numb * 1); // 3
console.log(numb * 1); // 6
console.log(numb * 1); // 9
console.log(numb * 1); // 12
console.log(numb * 1); // 15
console.log(numb * 1); // 18
console.log(numb * 1); // 21
console.log(numb * 1); // 24
console.log(numb * 1); // 27JS의 선언 방식
자바스크립트에서 변수 선언 방식은 다음과 같다.
var name;
let name;
const name;
해당 내용에 대한 자세한 사항은 별도로 알아보도록 하자!
타입(Type) 의 정의
변수에는 다양한 타입이 존재하며, 이는 변수에 할당된 데이터의 유형에 따라 상이하다.
타입은 크게 원시형과 참조형으로 구분되며 .. + 추가 학습
Number : 숫자형 | JS에서는 정수, 실수, 음수 구분 없이 숫자형으로 표현하며 추가로 BigInt가 존재한다.)
String : 문자열 | 'mimoh'
Boolean : 불리언 | 참(true), 거짓(false)의 값을 가진다.
Compound : 여러 타입이 섞인 자료형 | 배열 및 객체
undefined : 정의되지 않은 변수
function : 함수가 할당된 변수
.. 등등
typeof 연산자
JS는 변수의 타입을 결과값으로 반환하는 typeof(함수도 O) 연산자를 제공한다.
typeof 변수 혹은 typeof(변수)의 형태로 사용할 수 있다.
typeof ''; // String
typeof(''); // String
typeof 123; // Numbertypeof 는 연산자이므로 ()를 사용한 형태로도 가능하나 불필요한 괄호를 사용하는 것보다 연산자의 형태를 사용하는 것을 추천한다!
타입의 엄밀한 비교 (===, !==)
JS는 비교 연산에 3가지의 방식을 제공하며, 유형과 차이점은 다음과 같다.
- '=='는 두 값을 비교하기 위해 유형 변환 을 수행하고 NaN, -0, +0에 대해 예외적 으로 처리한다.
'22' == 22 // true
NaN == NaN // false
-0 == +0 // true- '==='는 '=='와 같지만 두 값을 비교하기 위해 유형 변환을 수행하지 않는다.
'22' == 22 // false
NaN == NaN // false
-0 == +0 // true- Object.is() 는 형식 변환을 하지 않으며, NaN, -0, +0에 대해 예외 처리를 하지 않는다.
'22' == 22 // false
NaN == NaN // true
-0 == +0 // false즉, 이중등호를 사용한 느슨한 비교는 개발자의 의도와 다르게 적용될 수 있고 유지보수 과정에서 보다 많은 작업 소요를 발생시킬 수 있다.
따라서, 삼중등호 (===)를 주로 사용하는 것이 좋다.
함수(function) 의 정의
함수의 형태는 다음과 같다. (keyword, name, parameter, body)
function name (param1, param2, ... ) { body };
함수는 목적 을 달성하기 위해 동작하는 코드들이 모인 블록 으로, 지시사항들의 묶음이라고도 표현할 수 있다.성
이때, 함수의 기본 특성은 다음과 같다.
- 코드들의 묶음 (반복적으로 사용되는 코드들을 등록해둔 즐겨찾기 )
- 기능의 단위 (어떠한 목적을 달성하기 위한 기능의 단위 )
- 함수는 반드시 돌아온다. (함수 내 return을 선언하지 않아도 undefined로 돌아온다)
즉, 함수는 특정 코드가 반복적 으로 실행되거나 필요한 경우 해당 코드를 재사용 하기 위해 사용된다. (이때 함수가 재사용되는 경우를 상정하고 할당해야 한다.)
이는 위에서 알아본 구구단 출력 방식에서 각 단마다 작성되어야하는 console.log 9줄을 재사용하기 위해 함수를 사용할 수 있음을 의미한다.
// 특정 구구단을 출력하는 함수, parameter로 단 수를 입력해야함.
fucntion getTt(numb) {
console.log(numb * 1);
console.log(numb * 2);
console.log(numb * 3);
console.log(numb * 4);
console.log(numb * 5);
console.log(numb * 6);
console.log(numb * 7);
console.log(numb * 8);
console.log(numb * 9);
}JS에서 함수의 선언 방식
JS는 세가지의 함수 선언 방식을 다음과 같이 제공한다.
- 함수선언식
function name(param1, param2, ...) {
return result;
}- 함수표현식
const result = function(param1, param2, ...) {
return result;
}- 화살표함수 (조건 성립시 return, 중괄호 생략 가능)
const result = (param1, param2, ...) => result;함수의 호출
다음 함수 eat의 호출(사용)은 다음과 같이 이루어진다.
// 함수 eat 선언
function eat(food) {
console.log(food + 'is Good!');
}
eat('rice'); // 함수 호출이때, 함수의 구성요소인 food를 매개변수(parameter) 라고 칭하고 함수 호출 과정에 사용하는 문자열 'rice'를 전달인자(argument) 라고 부른다.
JS에서 함수의 평가
1) 함수 실행 시 함수의 코드가 조회되고 바디의 파라미터 인자가 전달인자로 변경된다.
2) 파라미터 평가가 완료된 이후 함수의 코드가 순차적으로 실행된다.
3) 함수 호출 코드는 함수의 리턴값으로 변경된다.
출처)
CodeStates_SEB_FE 강의 자료
동치 비교 및 동일성 - JavaScript
