JavaScript 기초 공부

 

---

잠깐 사담

node.js와 같은 백엔드, 그리고 하이브리드 앱을 제작하기 위한 리액트 네이티브를 공부하기 전에 알아야할 언어 javascript... 시중에 나온 책이나 강의들 중 코딩 경험이 없는 사람들 말고 경험이 어느정도 있는 사람을 위한 것은 없나 찾아보다가 do it 시리즈에서 나온 웹프로그래밍을 위한 자바스크립트 기본편을 구매해서 공부하는 중. 영원한 스터디메이트 피바씨와 공부하던 중에 블로그에 모아서 써두면 나중에 보기 편할 것 같아서 짧게 요약 정리 해두었다. 코틀린도 매우 더디게 하고 있긴 한데, 최근에 이것저것 손대느라 바빠서 진도가 느린 편... 

---

1. 자료형

number	실수, 정수 모두 포함한 숫자
string	문자열
boolean	true, false
undefined	변수 선언하고 초기화 X시
null	값이 유효하지 않음
array(배열)	여러 값을 저장
object(객체)	속성(필드)와 함수(메소드)

 

• int, char등 자료형을 미리 지정해야하는 C언어, Java등과 달리 javascript는 값을 할당하면 컴파일러가 자동으로 지정해준다. Strong Data Type Check와 Weak Data Type Check의 개념인데 프로그래밍 언어론과 같은 과목에서 들었던 것 같다. 
• ES6버전에 추가된 예약어 let, const(var과 같이 사용 가능)

let	블록 범위를 벗어나면 사용 불가한 상수(ex. if문 블록 등)
const	변하지 않는 상수

• 템플릿 문자열

+기호로 문자열과 변수를 연결하지 않고 문자열안에 값 끼워넣을 수 있는 방법이다. 문자열들을 ` ` 로 감싸고 사이에 넣고 싶은 변수를 ${ }로 감싸서 넣으면 된다. 사용법 예시는 아래와 같다.  

const bornYear = 1999;
var currentYear = 2021;
alert(`제 나이는 ${currentYear - bornYear + 1}살 입니다.`);

출력은 이렇게 나온다. 

2. 연산자

사실 대부분의 연산자는 언어들이 다 공통이라, 그냥 몇가지만 기록해 두었다. 

 

• 숫자와 문자열을 더하는 경우는 문자열의 덧셈으로 생각해서 10020이 출력. 반대로 빼는 경우는 숫자로 바뀌어서 계산(-가 산술 연산자라서)

---

• 비교 연산자 ==과 ===의 차이는 자료형을 보냐 안보느냐. 후자는 자료형의 변환을 허용하지 않아서 false가 출력. 

---

var age = 23;
(age >= 20) ? console.log(`${age}살은 성인`) : console.log(`${age}살은 미성년자`);

• 조건 연산자의 사용방법은 위의 예제 코드처럼 (검사할 조건) ? (true시 할 일) : (false시 할 일) 이다. 20살 이상이므로 조건이 만족해서 console창에는 23살은 성인이라고 출력된다. 

 

3. 함수

function예약어를 통해 선언한다. C언어의 경우, 함수를 먼저 정의하고 아래에서 사용하던지(함수의 구조 먼저 나열), 혹은 프로토타입을 먼저 써놓고, 함수를 호출한 다음, 아래에 함수의 내용물을 정의해두던지 이 방법대로만 사용이 가능했다. (아래 코드 참고) 

int add(int a, int b) {
	return a + b;
}

int main()
{
	printf("%d", add(10, 20));
	return 0;
} // 정상 작동, 함수 호출 전 함수 구조를 미리 작성
------------------------------------------------------
int add(int a, int b);
int main()
{
	printf("%d", add(10, 20));
	return 0;
}

int add(int a, int b) {
	return a + b;
} // 정상 작동, 함수 프로토타입 미리 선언 
------------------------------------------------------
int main()
{
	printf("%d", add(10, 20));
	return 0;
}

int add(int a, int b) {
	return a + b;
} // 에러 

그러나 자바스크립트의 경우에는 다르다. 

add(10, 20);
function add(a,b) { 
    var sum = a + b;
    console.log(`덧셈 결과는 ${sum}입니다.`);
}

위 코드처럼, 함수 프로토타입을 선언하지 않고 함수 호출 먼저하고 후에 함수 구조를 서술하는 양식이 가능하다. javascript 소스 해석시에 함수 선언부분을 먼저 해석하기 때문에 가능하다. 

 

+) 추가적으로 ES6에서는 매개변수의 기본값을 지정하는 기능도 존재한다. (function(a, b = 5)이런식)

 

• 익명함수

var add = function(a,b) {
	return a + b;
}

console.log(add(10,200));

이름이 없는 함수로 함수 자체가 식이라서 위 코드처럼 add라는 변수에 할당하거나, 매개변수처럼 사용이 가능하다. 

• 즉시 실행 함수 : 아래 코드처럼 함수를 정의함과 동시에 실행이 가능함. 

console.log(function(a,b) {
	return a + b;
}(3,5));

• ES6부터의 화살표 표기법을 통한 함수 작성 

let subtract = (a, b) => a - b;
subtract(10,40);

보통 익명함수를 변수에 지정할 때 많이 사용함.