자바스크립트 기본 문법

1. 변수와 상수

변수는 어떤 정보에 이름을 붙여 저장하고 싶을 때 사용한다. 단 하나의 값을 저장할 수 있는 메모리 공간이며, 이 공간에 저장된 값은 변경될 수 있다.

var name = "heeyoon";
var age = 19;

마지막에 들어가는 세미콜론은 문장이 끝났음을 알려준다.

mike 와 같은 문자는 항상 " " 로 감싸줘야 한다.

var 은 변수를 선언할 때 사용하던 과거의 문법이다. var은 변수를 중복설정 할 경우 별도의 에러없이 가장 마지막에 선언된 값을 저장한다. 따라서 var을 사용한다면 혼자 하는 프로젝트에서는 문제가 없을 수 있으나 여러명이 공동으로 프로젝트를 진행할 경우 변수명이 겹쳐 문제가 생길 수 있다. 이를 해결하기 위해 let 과 const이 필요하다.

let의 이용

최초로 선언하는 모든 변수에 대해

let name = "heeyoon" ;

와 같이 let으로 변수선언을 하면 변수를 겹쳐서 사용하는 것을 방지할 수 있다. 왜냐하면 만약 코드를 다음과 같이 짠다면,

let name = "heeyoon" ; 
let name = "minju" ;

name이 이미 선언되었음을 알려주는 에러 메시지가 나타나기 때문이다.

let을 한 번 설정 후 다른 값으로 바꾸고 싶다면

let name = "heeyoon" ; 
	name = "minju" ;

와 같이 let을 생략하여 적으면 된다.

const의 이용

const는 절대로 변하지 않는 상수를 입력할 때 사용한다. 따라서 const로 선언된 변수를 바꾸려 하면 에러 메시지가 나타난다. 생일, 파이, 최대값 과 같이 변하지 않는 값을 입력할 때 사용한다.

const BIRTH_DAY = 1004 ;

상수는 대문자로 작성하여 다른 개발자들에게 상수임을 알려라

변수 명명 규칙

1. 변수는 문자와 숫자, $와 _만 사용한다.
2. 첫글자는 숫자가 될 수 없다.
3. 예약어는 사용할 수 없다.ex) const
4. 상수는 가급적 대문자로 작성한다.
5. 변수명은 읽고 이해하기 쉽게 선언한다.

2. 자료형(데이터 타입)

1. boolean - true와 false 두 가지 값만 표현할 수 있다.

const a = true;
const b = false;

2. null - 값이 없음을 나타낸다

3. undefined - 값이 없음을 나타낸다

null과 undefined의 차이점

undefined는 변수를 선언만 하더라도 할당되지만 null은 변수를 선언한 후에 null로 값을 설정해야 한다. 즉 null은 값이 존재하지 않음을 나타내고 undefined은 값이 할당되지 않음을 나타낸다.

let name;
console.log(name)

결과
undefined


let name = null;
console.log(name)

결과

각각 다르게 출력된다.

4.number(숫자형)

숫자형(number type) 은 정수 및 부동소수점 숫자(floating point number)를 말한다.

number는 연산이 가능하다.

console.log(1 + 2); // 더하기
console.log(10 - 3); // 빼기
console.log(3 * 2); // 곱하기
console.log(6 / 3); // 나누기
console.log(6 % 4); // 나머지

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다.

Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타낸다.
어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.

alert( 1 / 0 ); // 무한대

NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다.

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

5.string(문자형)

따옴표로 묶은 데이터를 의미한다. 따라서 숫자도 묶으면 string으로 인식된다.

따옴표는 세 종류가 있다.

큰따옴표: "Hello"
작은따옴표: 'Hello'
역 따옴표(백틱, backtick):

`Hello`

큰따옴표로 묶인 문자열 안에 또 다른 문자열을 넣고 싶으면 작은따옴표로 묶어서 표현하면 된다.

생략---- "<span style = 'color:blue'>" ---생략

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

alert( `Hello, ${name}!` ); // Hello, John!

alert( `the result is ${1 + 2}` ); // the result is 3

6.object(객체)

object란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.

예시)
정보 - 이름 : 김희윤 , 나이 : 19

위 정보를 key 와 value로 구분하면

key : '이름', '나이'
value : 'heeyoon kim' , '19'

위 정보를 javascript object로 표현해보면 아래와 같이 할 수 있다.

let user = {
	name : "heeyoon kim",
    age : 19
};

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.
이런 특징 때문에 자바스크립트에서 객체는 좀 더 특별한 취급을 받는다.

자세한 내용은 원시형을 배우고 난 후 객체에서 다룬다고 제가 배우는 페이지에서 말하네요.

7.array(배열)

지금까지 살펴본 자료형은 변수 하나에 값도 하나만 저장할 수 있지만 array는 하나의 변수에 값을 여러 개 저장할 수 있다. array 는 여러 개의 데이터 값을 하나의 array 이름으로 묶어서 선언한다.

let spring = "봄" ;
let summer = "여름" ;
let fall = "가을" ;
let winter = "겨울" ;

와 같은 코드를 array를 이용하면

let season = ["봄", "여름", "가을", "겨울" ] ;

array에 대해 더 자세한 내용 학습 필요

8. type of 연산자

typeof 연산자는 피연산자의 자료형을 알려준다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof null // "object"  (1)

typeof alert // "function"  

typeof x 또는 typeof(x) 형태로 사용한다.

(1)null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.

3.형 변환

문자형으로 변환

alert는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다. 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다.

String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있습니다.

let value = true; //value라는 상자에 true를 집어넣음
alert(typeof value); // boolean - value의 자료형은 불린형이다

value = String(value); // 변수 value엔 문자열 "true"가 저장된다.
alert(typeof value); // string

숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.
숫자형이 아닌 값에 나누기 /를 적용한 경우가 그 예이다.

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있습니다.

let str = "123"; //str에 문자형인 123을 지정
alert(typeof str); // string - 자료형은 아직 문자형

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환된다.

alert(typeof num); // number - 숫자형으로 변한됨.

아래는 숫자형으로 변환 시 적용되는 규칙이다.

전달 받은 값	형 변환 후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

Boolean 형으로 변환

불린형으로 변환 은 논리 연산 시 발생합니다. Boolean(value)으로도 변환할 수 있습니다.

불린형으로의 형 변환은 다음 규칙을 따릅니다.

전달 받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

4.연산자

산술연산자

할당 연산자

할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 쉽게 말해서 줄여쓰기다.

x += y	//x = x + y 둘이 같은 말임.

비교연산자

비교 연산자는 피연산자를 서로 비교하고, 비교 결과에 따라 논리 값을 반환한다.

논리연산자

|| : OR연산자
&& : AND연산자
! : NOT연산자

인수 중 하나라도 true가 있으면 true를 반환하고 그렇지 않으면 false를 반환한다.

o1 = true  || true       // true
o2 = false || true       // true
o3 = true  || false      // true
o4 = false || (3 == 4)   // false
o5 = 'Cat' || 'Dog'      // "Cat"
o6 = false || 'Cat'      // "Cat"
o7 = 'Cat' || false      // "Cat"
o8 = false || varObject // varObject

문자열 연산자

문자열 연결(+) 연산자는 두 문자열의 값을 서로 연결한 새로운 문자열을 반환한다.

console.log('진짜 ' + '졸리다'); // 콘솔에 "진짜 졸리다"를 기록

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

조건 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 조건 연산자는 주어진 조건에 따라 두 값 중 하나를 반환한다.

condition ? val1 : val2

만약 condition이 참이라면, 조건 연산자는 val1을 반환하고, 그 외에는 val2를 반환한다.

let status = (age >= 18) ? "성인" : "미성년자";

age가 18 이상이라면 status 변수에 "성인"을 할당하고, 그렇지 않으면 "미성년자"를 할당합니다.