코드 스테이츠 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변수를 하나만 선언해도 상관없겠구나.
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
*/
'JavaScript, HTML, CSS' 카테고리의 다른 글
[HTML, 코드 스테이츠]01. HTML, CSS 기초 (0) | 2019.09.01 |
---|---|
[JS, 코드 스테이츠]05. Closure, Parameter, new 키워드와 객체지향 JavaScript (0) | 2019.08.26 |
[JS, 코드 스테이츠]04. 변수의 전달, Scope (0) | 2019.08.23 |
[JS, 코드 스테이츠]03. Number Methods, Math Methods (0) | 2019.08.18 |
[JS, 코드스테이츠]02. 문자열(String Methods), 배열(Array Methods) (0) | 2019.08.06 |