Javascript Basic

Doyoon Lee·2020년 7월 22일

JavaScript WeCode

Javascript

목록 보기

12/23

alert 와 console.log

alert와 console.log은 자바스크립트에서 이미 정의된, 약속된 단어이다.

이렇게 약속된 단어들은 '약속어(Reserved Words)'라고도 불린다.

alert 라는 이름의 함수가 이미 존재하는 것이므로 함부로 같은 이름의 함수를 또 만들면 안된다!

Variables (변수) 지정하기

변수 이름을 정할 때 주의할 점

변수이름, 함수이름, 연산자 모두 대소문자를 구분한다.
변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
변수 이름에 일반 바(-) 는 쓸 수 없다.
camelCase 지켜서 쓸 것
변수명을 지을 때는 모호하지 않고, 변수명 만으로도 의미가 추측 가능할 수 있도록 노력해야 한다.

변수의 사용

변수에는 값을 저장할 수 있습니다. 수정 또한 물론 가능합니다.

값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다.

let 키워드는 변수를 새로 생성할 때만 사용되기 때문입니다.

값을 수정할 때 쓰는 문법

**이미 선언해둔 변수명 = 새로운 값;**

만약 아래와 같이 코딩한다면, name이라는 변수의 값을 변경한 것이 아니라 name이라는 변수를 두 번 생성한 것입니다. 이처럼 같은 변수의 이름을 중복해서 쓰면 에러가 날 것이다.

let name = "김개발";
let name = "김코딩";

변수 값(value)는 얼마든지 중복되어도 된다.

Function 함수

함수의 반환

모든 함수는 반환(return)을 한다. return 명령어를 쓰지 않은 상태에서도 기본적으로 undefined를 반환하는 것이 그런 이유이다.

함수에서 반환된 결과값을 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있다.

함수를 호출해서,
변수에 저장하고
그 변수를 console.log()로 확인하면 된다.

const checkAge = function UnderAge (age) {
	if(age =< 20) {
		return "Banned to drink";
  }
}

console.log(checkAge);

Math Expression

let num = 1;
let newNum = num++;
console.log(num); // 2 출력
console.log(newNum); // 1 출력

위의 예시에서 newNum 에 2가 올것이라고 예상했는데 왜 1이 왔을까?

앞에서부터 차례대로 스크립트가 실행되었기 때문이다.

newNum에 값이 1인 num이 할당되어 newNum은 1인 상태로 마무리가 된다.
그 후 ++로 인해 1이 증가한 num은 2가 되어 출력된다.

위의 것을 풀어서 쓴다면, 아래와 같을 것이다.

let num = 1;
let newNum = num;
num++;

그게 아니라 newNum 에다가 2를 정말 할당하고 싶다면,

**let newNum = ++num;** 이렇게 써야한다. 그렇게 해야 num 을 newNum에 할당하기 전에 +1 이 되고 그 다음에 newNum이 2가 될것이기 때문이다.

컴퓨터에서의 수학식

실제로 우리가 쓰는 수학식과 같은 순서로 계산된다.

console.log(3 + 6 * 2); // 15
console.log((3 + 6) * 2); // 18

else if

if (answer > 5) {
  alert("15보다 큰 숫자!");
} else if (answer > 10) {
  alert("10보다 큰 숫자!");
} else if (answer > 5) {
  alert("5보다 큰 숫자!");
} else {
  alert("5보다 작거나 같은 숫자!");
}

else if 는 맨 처음에 if 안의 A 조건을 실행하고, A 맞아? 아니면~ B 맞아? 그것도 아니면~ C 맞아? 이런식으로 계속 가는 것이다. else if 의 조건 중에서 맞는 조건이 있으면 그 조건에서 return 해서 나가고 그렇지 않으면 else 까지 가서 else 안에 있는 내용이 실행된다.

e.g. 1 - else if 문의 예시

function myFavoriteColor(color) {
  if (color === "navy") {
    return "Good!";
  } else if (color === "yellow") {
    return "Bad!";
  } else {
    return "Whatever!";
  }
}

myFavoriteColor("green");