📂 목차
📚 본문
여기선 자바와 그렇게 다르지 않은 문법들은 다루지 않는다 예를 들어 for, 산술 연산, 삼항 연산, 조건문 등이다.
Node JS 를 통한 터미널 실행
터미널을 키고 node 를 치자.
node이제 명령어들을 입력 가능하다. 기본적으로 javascript 는 인터프리터언어이기에 한 문장씩 읽고 실행하고 한다.
let, const
let 은 변수, const 는 상수 예약어이다.
let a = 1;
console.log(a);
a = 2;
console.log(a);
const b = 100;
console.log(b);
b = 101; // Uncaught TypeError: Assignment to constant variable.명령어를 칠 때마다 undefined 라는 것을 볼 수 있는데 js 에서는 undefined 라는 타입이 있다. 함수 호출이나 let, const 등 특정 코드를 실행하는 것을 입력할 때마다 함수의 반환값을 출력하는데 그게 undefined 인 것이다. 즉, const, let, console.log 는 반환으로 undefined 이지만, 대입연산자 = 은 대입 후에 자기 자신을 반환하는 것을 볼 수 있다.
데이터 타입
Number
Javascript 는 숫자를 전부 통일해놨다.
let age = 25;
let pi = 3.14;String
백틱을 통해서 변수를 집어넣을 수 있다. String.format 과도 유사하다.
let name = "Seonghun";
let greeting = `Hello, ${name}!`;Boolean
let isActive = true;
let hasPermission = false;Undefined
값이 할당되지 않은 상태임을 나타내는 타입인데, 변수를 선언만 하고 값을 넣지 않으면 자동으로 undefined 가 된다.
let x;
console.log(x); // undefined비교 연산자
비교연산자에서 === 이 있는데, 이는 값 뿐 아니라 값과 타입까지 비교하며 엄격한 비교이다. !== 도 마찬가지이다. 이게 굉장히 헷갈리는데, 다음과 같은 상황이다.
5 == "5" // true, 문자열을 숫자로 변환해서 비교
null == undefined // true, 특별 규칙 적용
5 === 5 // true, 값도 같고 타입도 같음
5 === "5" // false, 값은 같아 보여도 타입(Number vs String)이 다름
true === 1 // false, Boolean vs Number
null === undefined // false, 타입이 다름기본적으로 Number 과 String 이 각각 5를 표현한다면 이는 == 으로는 참이 되게 된다. 따라서 == 보다는 ===이 더 좋다.
JS 함수
자바스크립트는 함수 자체를 일급 객체로 다룬다. 즉, 함수는 변수에 할당할 수 있고, 다른 함수의 인자로 전달할 수 있으며, 함수의 반환값으로도 사용할 수 있다.
마치 자바에서 BiFunction, Function, Runnable 등등과도 유사한 기능들을 주게 된다.
// 함수 선언식
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // 8
// 함수 표현식
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5)); // 20따라서 밑의 표현식과 같이 변수에 할당을 할 수 있다. 또 자바에서는 -> 의 표현식으로 가능한데, 이 또한 js 에서는 => 로 쓸 수 있다.
// 기본 형태
const subtract = (a, b) => {
return a - b;
};
// 간단한 형태
const double = n => n * 2;
// 여러 줄
const greet = name => {
const message = `안녕하세요, ${name}님!`;
console.log(message);
return message;
};JS 객체
마치 json 을 쓰는 것처럼 선언할 수 있다.
// 객체 생성
const person = {
name: '김철수',
age: 25,
city: '서울',
isStudent: true
};
// 속성 접근
console.log(person.name); // 김철수
console.log(person['age']); // 25
// 속성 수정
person.age = 26;
// 속성 추가
person.email = 'kim@example.com';신기한 것은 js 에서는 구조 분해 할당이라는 것이 있어서 객체를 손 쉽게 각각 변수에 할당시키게 할 수 있다.
const user = {
username: 'john',
email: 'john@email.com',
age: 30
};
// 구조 분해 할당
const { username, email, age } = user;
console.log(username); // john
// 함수 파라미터에서 구조 분해
function printUser({ username, age }) {
console.log(`${username}님은 ${age}살입니다.`);
}
printUser(user);getter & setter
const user = {
_name: '김철수',
_age: 25,
// Getter
get name() {
console.log('name getter 호출');
return this._name;
},
// Setter
set name(value) {
console.log('name setter 호출');
if (value.length < 2) {
console.log('이름은 2글자 이상이어야 합니다.');
return;
}
this._name = value;
},
get age() {
return this._age;
},
set age(value) {
if (value < 0) {
console.log('나이는 0보다 커야 합니다.');
return;
}
this._age = value;
}
};
// 사용
console.log(user.name); // getter 호출
user.name = '이영희'; // setter 호출
user.age = -5; // 에러 메시지