[JS, 코드 스테이츠]01. JavaScript 입문

코드 스테이츠 Pre 코스 첫째 주 수강 후기.

 

이번 주부터 매주 코드 스테이츠 Pre코스 수강 후기를 올려보려고 한다.

배운 것들을 정리할 겸 노트에 쓰거나 워드 작업은 종종 해왔지만 블로깅을 해 보는 것은 처음이라 매우 생소하다.

지금은 어색하지만 곧 익숙해지겠지.

기왕 시작한 거, 코드 스테이츠 후기뿐 아니라 공부하는 것들을 적어볼까 한다.

 

첫 주는 JavaScript 의 기초에 대해 배웠다.

JavaScript는 아예 처음이지만 C언어를 해 본 적 있어서 생각보다 수월하게 수업을 따라갈 수 있었다.

그 둘은 비슷한 점이 많긴 하지만 다른 부분도 많아서 익숙해지기까지는 시간이 걸릴 것 같다.

이것도 역시 하다 보면 익숙해지겠지 :D

 

수업을 들으며 C언어와 JavaScript의 다른 점이 가장 인상 깊었기 때문에 그 점을 위주로 배운 것에 대해 다룰 것이다.

 

---

목차
1. 변수, 배열 선언
2. 비교 연산자
3. 함수
4. 객체

 

1. 변수, 배열 선언

C언어 같은 경우 변수를 선언하기 전에 그 변수를 어떻게 쓸 것인지 자료형부터 정해야 한다. 

int tmpInt;	//정수형으로만 사용 가능
char tmpChar;	//문자형
bool tmpBool;	//true, false만 저장 가능
int tmpArr[5];	//int형 배열

JavaScript를 배우며 놀랐던 것은 위처럼 자료형을 먼저 할당하지 않아도 된다는 것!

 

let tmp;
tmp = 'abc';
console.log(tmp);	//출력값: 'abc'
tmp = 1;
console.log(tmp);	//출력값: 1
tmp = [0, 1, 2, 3, 4];
tmp.push(5);	//tmp: [0, 1, 2, 3, 4, 5]
tmp.pop();	//tmp: [0, 1, 2, 3, 4]

tmp에다가 문자열을 넣어도 되고 이후에 숫자나 함수를 넣어도 아무런 문제가 없다. 오류가 안 난다!!

별 건 아니지만 이게 좀 충격이었다. JavaScript를 할 땐 tmp변수를 하나만 선언해도 상관없겠구나.

 

궁금해서 C언어에서 하듯 int나 char를 사용해서 변수 선언을 해봤는데 아예 Syntax Error가 뜬다.

 

---

2. 비교 연산자

 

조건	C	JavaScript
a가 b초과인가	a > b
a가 b미만인가	a < b
a가 b이상인가	a >= b
a가 b이하인가	a <= b
a와 b가 같은가	a == b	a === b
a와 b가 다른가	a != b	a !== b

C와 JavaScript의 비교 연산자에 대해 비교해 보면 위와 같다.(JavaScript에서도 ==와 !=를 사용할 수 있지만 편의상 저렇게 그렸다)

 

중요한 것은 =하나의 차이. === 는 == 보다 정확한 비교 연산을 한다. 변수의 값뿐 아니라 자료형까지 비교하는 듯하다.

console.log(true == 1);	//출력값: true
console.log(true === 1);	//출력값: false

== 와 === 의 더 상세한 비교는 https://dorey.github.io/JavaScript-Equality-Table/ 에서 확인할 수 있다.

 

---

3. 함수

 

C언어의 함수:

int myFunction(int input);	//함수 선언
int myFunction(int input){
 //함수 내용
}

선언과 내용을 따로 적는 것과, 선언과 동시에 함수의 내용을 쓰는 것에는 큰 차이가 없다고 알고 있다. 개인적으로 선언과 로직을 따로 하는 것이 보기에 깔끔해서 그 편을 선호한다(main문 위에 함수가 줄줄이 있는걸 안 좋아함).

 

JavaScript의 함수:

/* 함수 선언식 */
function myFunction(input){
 //함수 내용
}

/* 함수 표현식 */
let myFunction = function(input){
 //함수 내용
}

비슷한 것 같은데 좀 다르다. 선언식은 뭔지 알겠는데 표현식은 뭐지?? 궁금해서 찾아봤다.

 

자바스크립트의 hoisting과 관련이 있는 듯하다. 관련 내용은 좀 더 공부해보고 따로 정리해야겠다.

 

아래는 구글링 하며 찾았던 사이트 중 도움이 되었던 글들의 링크이다.

Function Declarations(함수선언) vs Function Expressions(함수표현)
What is Hoisting in JavaScript?
[MDN]Hoisting
[MDN]function declaration

---

4. 객체

JavaScript는 구조체를 만들 필요 없이 대괄호 안에 선언을 하면 바로 객체가 된다. 호출도 쉽다.

let petData = {
 name: 'GuLeum',
 species: 'cat',
 owner: 'H'
}; 

console.log(petData.name);	//Dot notation. 출력: 'GuLeum'
console.log(petData['name']);	//Bracket notation. 출력: 'GuLeum'

 

Bracket notation은 아래와 같이 쓰면 객체 호출을 편하게 할 수 있을 것 같다.

let arr = ['name', 'species', 'owner'];
for(let i = 0; i < arr.length; i++){
 console.log(arr[i] + ': ' + petData[arr[i]]);
}
/* 출력
name: GuLeum
species: cat
owner: H
*/