이번 주 아티클은 JS에 대한 기초적인 문법들을 공부한다.
1. JS 변수 선언, 대입 연산자
1) 변수 선언
JavaScript에 변수 선언 키워드는 var, let, const 세 가지가 있다.
키워드의 우측에 변수의 이름을 작성한다. (ex. var valueName;)
var 키워드는 존재한다는 것만 이해하고 사용하지 않는 것을 권장하고 있는데, 그 이유에는 var 키워드의 단점들을 예시로 들 수 있다.
(1) var 키워드는 함수 스코프를 가지는데, 이는 변수가 선언된 함수 내 어디서든 접근할 수 있다는 것을 의미한다. 함수 스코프는 예기치 않은 변수 값 변경이 발생할 경우 문제가 발생할 수 있다.
let 키워드는 한 번 선언한 변수를 여러 번 변경할 수 있다.
const 키워드는 한 번 선언한 변수 값을 변경할 수 없다.
스코프가 무엇인가?
- 스코프는 변수, 함수, 객체 등 유효 범위를 결정한다.
1) 함수 스코프는 변수가 함수 내에서 선언되었을 때 그 함수 내에서만 유효한 스코프. 함수 스코프를 가지는 변수는 함수가 종료되면 접근 불가능
2) 블록 스코프는 변수가 블록 '{}' 내에서 선언되었을 때 그 블록 내에서만 유효한 스코프, 블록은 보통 if, for, while등의 제어문이나 중괄호 {}로 둘러싸인 코드 블록 의미함
2) 대입 연산자: =
대입 연산자 = 키워드의 좌측에는 대입할 변수, 키워드 우측에는 대입할 값을 작성한다. (ex. let valueName = 25;)
대입 연산자에는 추가로 +=, -=, variable++, variable-- 같은 것도 존재한다.
2. 비교 연산자
비교 연산자에는 ===, !==, >, >=, <, <=, ==, !=가 있다.
=== 연산자는 양쪽에 위치한 값이 같은 경우 true, 다를 경우 false
!== 양쪽 위치한 값이 같은 경우 false, 다른 경우 true (!가 값을 부정하는 not의 의미로 사용됨)
※ ===과 ==, !==과 !=은 서로 같은 기능을 하는 연산자지만 사용하지 않는 것을 권장하고 있다.
JavaScript에는 자동 형변환이란 기능을 가지고 있는데, 가볍게 보면 매우 편리한 기능이지만 버그를 만들기 쉬운 위험한 문법이다.
자동 형변환이 적용되는 경우 '10' == 10의 결과가 true로 평가된다. 숫자 자료형을 가진 값(숫자 10)에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다 여겨 숫자 10이 문자 '10'으로 변환되어 '10'==='10'처럼 동작하게 된다.
그러므로 ==, !=는 위의 연산자와 같은 기능을 하지만 버그가 발생되기 쉽기 때문에 되도록이면 안쓰는 것을 권장하고 있다.
또한 >, <, >=, <=은 수학에서의 비교 기호와 같은 기능을 한다.
>의 경우 오른쪽에 있는 값이 왼쪽에 있는 값과 비교해서 작으면 true, 크면 false 이런 식으로 비교해서 값을 내는 연산자다.
3. 자료형
1) Boolean
원시 자료형 중 하나로, true or false 값으로만 표현이 가능하다.
리터럴을 사용해 생성하거나, Boolean 객체 생성자를 사용해서 값을 표현 할 수 있다.
- 리터럴 형태
let isTrue = true;
let isFalse = false;- boolean 객체 생성
let isTrue = Boolean(true);
let isFalse = Boolean(false);
2) String
원시 자료형 중 하나로, '값' or "값"와 같이 따옴표, 쌍따옴표를 사용해 값을 묶어서 표현해야 한다.
- 리터럴 형태
let str1 = "Hello, world!";
let str2 = 'Hello, world!';- String 객체
let str = new String("Hello, world!");
3) Number
원시 자료형 중 하나로, 10처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로만 표현한다.
10 !== '10' 두 값은 서로 다른 자료형을 가지기 때문에 같다고 볼 수 없음
undefined 원시 자료형 중 하나, 값이 할당되지 않은 변수는 기본적으로 undefined 값 가짐
- 리터럴 형태
let intNum = 42;
let floatNum = 3.14;- Number 객체 생성
let num1 = Number(42);
let num2 = Number("3.14");
4) null
원시 자료형 중 하나로, 어떤 변수가 비어있음을 의도적으로 표현할 때 사용한다.
※ typeof null의 결과가 object로 나오는 이유?
자바 스크립트의 typeof 키워드에서 null에 대한 예외 처리가 되어있지 않은 버그가 있었지만, typeof를 사용하는 모든 웹사이트에 영향 끼칠 수 있기 때문에 수정되지 않고 있음
5) Object (객체)
{key1: value, key2: value}의 형태 표현, value에는 모든 자료형의 값을 담을 수 있음
다른 언어에서는 이와 같은 자료형을 Dictionary로 부르기도 하지만 JS에서는 Object라는 명칭을 사용한다. Object는 key를 기준으로 객체에 있는 value에 접근하는 형식이다.
객체의 key에 접근하는 방법은 두가지 표현이 존재 obj.key, obj['key']
- 리터럴 형태
let person = {
name: "John",
age: 30,
isEmployed: true,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};- Object 생성자 생성
let person = new Object();
person.name = "John"; //person 객체의 name 키의 value는 "John"
person.age = 30;
person.isEmployed = true;
person.greet = function() {
console.log("Hello, my name is " + this.name);
};
6) Array (배열)
[value1, value2, value3]의 형태로 여러 개 항목을 순서대로 저장하는 데이터 구조로 표현한다. value에는 모든 자료형의 값을 담을 수 있음, 다른 언어에서는 이와 같은 자료형을 List로 부르기도 하지만 JS에서의 공식 명칭은 Array
JavaScript의 배열은 동적으로 크기가 조정되며, 여러 가지 메소드를 통해 배열을 조작할 수 있다.
배열에는 Index라는 개념 존재, value에 접근 가능하게 해주는 식별자
- 리터럴 형태
let fruits = ["apple", "banana", "cherry"];- Array 생성자 생성
let numbers = new Array(1, 2, 3, 4, 5);- 빈 배열 생성
let emptyArray = [];
7) NaN
JavaScript에서 "Not-a-Number"를 나타내는 특수한 값으로, Number 자료형에 속하지만 따로 짚고 넘어가는 게 났다. 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환 (주로 수치 연산에서 발생할 수 있는 오류 상황을 나타내기 위해 사용)
- 연산
let result = 10 / "apple";
console.log(result); // NaN- parseInt()함수에서 변환할 수 없는 문자열 처리할 때
let num = parseInt("hello");
console.log(num); // NaN
NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않다.
(이 세상의 유일한 값?)
NaN 판별은 Number.isNaN( ) or isNaN( )을 이용하면 제일 분명하게 판별이 가능하다.
8) Function (함수)
Function은 코드를 재사용하고 조직화하기 위한 핵심적인 구성 요소로, 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용한다. 함수는 일련의 문장(코드)들을 그룹화하고, 필요할 때 호출해 실행할 수 있다.
함수는
function greet(name) {
console.log("Hello, " + name + "!");
} 이렇게 함수를 정의하고
greet("Alice"); // 출력: "Hello, Alice!"
이렇게 함수를 출력한다.
이렇게 오늘 JS의 문법 중 기초 부분에 대해 공부를 해보았다.
생각보다 많았다는 점이 조금 힘들긴 했다. 그리고 다른 언어와 계속 헷갈리는 바람에 문제가 좀 있는 것 같다.
예를 들면 변수 선언 같은 경우 c언어 같은 경우 string이라는 키워드를 이용해 변수를 선언하지만, JS에서는 모든 키워드가 let, const로만 이루어져 있기 때문에 조금 익숙해져야 하는 감이 있는 것 같다.
