Javascript 기초 문법 01 - 변수 선언, 대입 연산자, 비교 연산자, 자료형

변수 선언, 대입 연산자

[변수 선언]

• var
• let : 한 번 선언한 변수의 값을 여러 번 변경 가능
• const : 한 번 선언하면 변수의 값을 변경 불가
• 선언되지 않은 변수명을 사용하려 하면 참조 에러 발생!

let a = 2; // 이후에 a에 새로운 값을 대입하면 a의 값이 변함
const b = 2; // b는 평생 2임

 

[대입 연산자]

• = : 좌측의 변수에 우측의 값을 대입
• +=, -=, *=, /=, %= : 좌측 변수의 기존 값에 우측 값을 기호에 맞게 연산하고 그 결과를 좌측 변수에 대입

let a = 2; 

a += 1; // a가 3이 됨
a -= 1; // a가 1이 됨
a *= 2; // a가 4가 됨
a /= 2; // a가 1이 됨
a %= 2; // a가 0이 됨

 

[증감 연산자]

• ++, -- : 변수의 값에 1을 더하거나 뺌. 변수의 앞에 붙냐 뒤에 붙냐에 따라 전위와 후위로 나뉨

<증감 연산자 참고 그림>

let a = 2; 

++a; // a만 따졌을 때 전위 후위의 연산 결과는 모두 3임
a++; // 다만, (++a + a++)의 값은 5임. 후위는 아직 2고 연산 이후에 1이 더해지기 때문
--a;
a--;

 

비교 연산자

• === : 양 측의 값이 같으면 true(1), 다르면 false(0)
• !== : 양 측의 값이 다르면 true(1), 같으면 false(0)
• <, >, <=, >= : 양 측의 값을 비교해 연산자의 방향이 옳으면 true(1), 틀리면 false(0)

※ ==, != 주의 할 점

자바스크립트엔 자동 형변환 기능이 있는데, ==과 !=은 양 측의 형이 다르더라도 같게 변환해 연산함.

예기치 못한 오류를 발생시키기 좋으니 사용을 지양하도록 하자

10 == '10' // 좌측은 정수형 우측은 문자형으로 엄연히 다른 값이지만 자동 형변환 때문에 True 출력

 

자료형

• Boolean : 출력값이 true 혹은 false인 자료형 
• String : 출력값이 '문자' 혹은 "문자"인 자료형. 대체로 외따옴표로 활용
  ※ backtick (``)

문자열 안에서 변수를 보여줘야 할 경우 따옴표 대신 backtick(`)을 사용. '${변수명}'의 꼴로 활용

let first_name = '홍';
let last_name = '길동';
`제 성은 ${first_name}이고, 제 이름은 ${last_name}입니다.`
// 출력 : 제 성은 홍이고, 제 이름은 길동입니다.
// 백틱 문자열에서 ${} 안에 변수명을 넣으면 됨

• Number : 출력값이 10인 자료형. 문자형 '10'과는 다름
  ※ NaN

Not a Number. number 자료형에 속함

숫자가 아닌 값을 숫자로 변환하는 경우 그 출력값

'text' / 100; // 출력 : NaN, 문자를 숫자로 나눌 수 없기 때문
100 % 0; // 출력 : NaN, 숫자 간의 연산이 잘못됐을 경우

 

NaN은 다른 그 어떤 값과도 같지 않고, 심지어 다른 NaN과도 같지 않음

NaN === NaN; // 출력 : false

 

NaN의 판별을 위해서 Number.isNaN() 또는 isNaN()을 활용

let a = NaN;
let b = 'NaN';

Number.isNaN(a); // 출력 : true, 현재 값이 NaN이어야만 true
isNaN(b); // 출력 : true, 현재 값이 NaN이거나, 숫자로 변환한 값이 NaN이 될 경우 true

• undefined : 값이 할당되지 않은 변수가 출력하는 값
• let a; // a 출력 값 : undefined
• null : 의도적으로 어떤 값이 비어있음을 표현할 때 활용
  ※ typeof

특정 값이나 변수 등의 자료형을 알려줌

/*typeof 값*/
typeof 10; // 출력 : 'number'
typeof '10'; // 출력 : 'string'
typeof true; // 출력 : 'boolean'
typeof {value_a : key_a, value_b, key_b}; // 출력 : 'object'

/*typeof 변수나 함수*/
let a;
function add(x,y) {
	return x + y;
}
typeof a; // 출력 : 'undefined'
typeof add; // 출력 : 'function'

 

typeof가 출력해주는 값의 자료형은 문자형!

typeof typeof 10 // 출력 : 'string'
// typeof 10의 값이 'number'고, typeof 'number'를 판독하므로 최종 출력은 'string'

 

typeof null을 하면 object가 나오는 버그가 있지만, 기존 웹 사이트들에 영향을 미칠 수 있기 때문에 수정되지 않음

typeof null; // 출력 : 'object'

 

[Object 객체]

• 중괄호 {key1 : value1, key2 : value2, ...}의 형태. key를 기준으로 value에 접근할 수 있음
• 다른 언어에서는 Dictionary라 부르기도 함
• key 이름에 여백(스페이스)나 대쉬(-), 특수문자(*) 등 일반적인 변수명 선언에 허용되지 않는 문자열이 사용될 경우 외따옴표로 이름을 감싸줘야하고, 그 key의 value를 가져오고 싶을 경우 반드시 object['key'] 꼴을 사용해줘야 함

const me = {
   name : 홍길동,
   age : 45,
   'date of birth' : 1584-05-22 // key 이름에 여백이 포함되기 때문에 외따옴표로 감쌈
}

me.name; // 출력 : '홍길동'
me['name']; // 출력 : '홍길동'
me.gender; // 출력 : undefined, 객체 안에 존재하지 않는 key값이므로 undefined 출력
me.['date of birth']; // 출력 : 1584-05-22 // 외따옴표로 감싸진 key의 값을 불러올 땐 꼭 [] 사용

• 객체에서 property를 수정하는 방법

let me = {name : 홍길동, age : 45}

/* 프로퍼티 추가 */
me.height = 200; 
me['height'] = 200; 
// me = {name : 홍길동, age : 45, height : 200}
// 객체 me에 200 value를 가진 height란 key가 추가됨

/* 프로퍼티 변경 */
me.age = 30;
me['age'] = 30;
// me = {name : 홍길동, age : 30}
// 객체 me 안의 age란 key의 value가 45에서 30으로 바뀜

/* 프로퍼티 삭제 */
delete me.name;
delete me['name']
// me = {age : 30}
// 객체 me 안의 name이란 key가 속한 프로퍼티가 삭제됨

 

※ 객체 구조 분해 할당

Javascript ES6에서 새로 도입된 문법

객체나 배열을 변수로 분해할 수 있음

이 때 변수의 이름과 객체의 key 이름이 일치해야 함

const me = {name : '홍길동', age : 45};

/*객체 분해 할당*/
const {name, age, hobby} = me;

console.log(age); // 출력 : 45, 분해 할당을 통해 age란 변수에 45란 값이 대입됐음을 알 수 있음
console.log(hobby); // 출력 : undefined, 객체 me의 property 중 'hobby'란 이름의 key가 없기 때문

 

property : key : value 한 쌍을 의미. object는 property들의 집합

 

[Array 배열]

• 대괄호 [value1, value2, value3, ...]의 형태. 0부터 시작하는 고유한 index값을 통해 value에 접근 가능
• 다른 언어에서는 List라 부르기도 함

const colors = ['red', 'yellow', 'blue', 'green'];

colors[0]; // 출력 : 'red', index는 0부터 시작하기 때문에 첫 번째 value인 'red'가 출력
colors[3]; // 출력 : 'green'
colors[10]; // 출력 : undefined, 배열 colors의 index 값은 3이 최대기 때문

• 배열의 value 개수 확인하기 (배열 길이 확인하기)

const colors = ['red', 'yellow', 'blue', 'green'];
colors.lenghth; // 출력 : 4
colors[colors.length - 2]; // 출력 : 'blue', 배열의 뒤에서 두번째 값을 호출

• 배열의 value 수정하기

const colors = ['red', 'yellow', 'blue', 'green'];

/* 특정 인덱스에 추가 */
colors[10] = 'black'; // colors 배열의 10번 인덱스에 'black' 값을 추가. 이때 비어있는 4~9인덱스의 값은 undefined
// colors = ['red', 'yellow', 'blue', 'green', , , , , , , 'black']이 됨
colors.splice(1,0,'black'); // 1번 인덱스에 'black' 값을 추가. 기존 1번 이후의 인덱스 값이 하나씩 밀림
// colors = ['red', 'black', 'yellow', 'blue', 'green']이 됨

/* 배열의 마지막 인덱스 다음에 추가 */
colors.push('purple'); 
colors[colors.length] = 'purple'; // index는 0부터 시작하기 때문에 length 값은 현재 마지막 index의 값보다 1 큼
// 둘 다 colors = ['red', 'yellow', 'blue', 'green', 'purple']가 됨

/* 인덱스 기준으로 값 제거 */
colors.splice(1,2); // 출력 : ['yellow', 'blue'], index 1의 값을 시작으로 2개의 index 값을 추출하겠다는 뜻
// splice 이후 colors = ['red', 'green']가 됨

/* value 기준으로 인덱스 값 찾기 */
colors.indexOf('blue') // 출력 : 2, 'blue'가 위치한 인덱스의 값을 출력
colors.indexOf('white') // 출력 : -1, 현재 배열에 해당하는 값이 없을 때 -1을 출력

 

※ 배열 구조 분해 할당

Javascript ES6에서 새로 도입된 문법

객체나 배열을 변수로 분해할 수 있음

배열 분해에선 변수명을 임의로 선언할 수 있고, 선언 순서대로 차례에 맞는 배열 값들이 할당

const colors = ['red', 'blue', 'green'];

/* 배열 분해 할당 */
const [classroom1, classroom2, classroom3, classroom4] = colors;
console.log(classroom1); // 출력 : 'red', 첫 번째로 선언된 classroom1에 첫번째 값인 'red'가 할당
console.log(classroom4); // 출력 : undefined

[Function 함수]

• 기능의 단위를 묶거나 코드의 반복을 줄이기 위해 활용

/* 함수 생성 */
function add(x, y) { // add는 함수 이름
	return x + y; // return을 통해 함수가 반환할 값을 설정
} // 중괄호 안에 함수의 내용을 적어줌

add(2, 5); // 출력 : 7, 인자 x에 2가, 인자 y에 5가 할당됨.

/* 변수에 함수를 할당 */
const IAmAdd = function(x, y) { // 변수명 선언을 했기 때문에 함수명을 따로 짓지 않음
	return x + y;
}

IAmAdd(3, 6); // 출력 : 9