Java Script

1. Introduction to Javascript

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어로서, 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할을 한다.

1.1. alert()

• alert() 함수는 사용자에게 안내하고 싶은 텍스트
• 알림창 띄우기

alert("안녕하세요!");

1.2. console.log()

• 함수는 개발자가 확인하고 싶은 내용을 출력하는 함수
• '개발자 도구' 를 통해서만 확인 가능

console.log("안녕하세요!"); 

2.주석(Commenting)

• 브라우저에서 해당 코드를 실행시키지 않게 처리

형태

1. 한 줄 주석 - slash 두 개(//)로 시작

// 한줄 주석

2. 여러 줄 주석 - /* ... */

/*
    여
    러
    줄
    주
    석
*/

3. 매개변수(parameter)와 인자(argument)

3.1 매개변수(parameter)

• 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할
• 함수 외부로부터 들어온 값이 담길 '자리' 혹은 '변수의 이름'

function test(num1) {
 console.log(num1);
}

let num2 = 5;
test(num2);

// num2라는 그릇에 있는 값은 num1이라는 그릇에 옮겨지는 것...!
// 즉, 매개변수(파라미터)가 다르게 정의되어도 전달되는 값은 변화가 없다. 📝

📍 TIL

매개변수(파라미터)에 대한 개념이 흔들리니 이후에 진행되는 함수 파트에서 많이 흔들려서 고생했다. 하지만 매개변수(파라미터)를 '그릇'이라고 생각하니 빠르게 이해가 가능했다. 매개변수(파라미터)는 값을 전달하는 '그릇'일 뿐 그릇 안의 값은 변하지 않는다는 것이다. 매개변수(파라미터)가 보통 문자열로 정의되다보니, 여러 매개변수(파라미터)가 나올 때, 혼란스러웠다.

하지만 위의 예제를 통해 좀 더 명확하게 매개변수(파라미터)에 대하여 이해를 하였다. num2를 5로 정의-> 숫자 5라고 정의된 num2 -> num1로 전달 되어 5라는 값을 출력하게 된다.

3.2 인자(argument)

• 실질적인 값을 인자
• 자리에 들어갈 구체적인 값

3.2.⚠️ 주의 사항

함수 내부에서 인자로 받은 변수에 새로운 값을 넣지 않는다.

//Example
function alertSuccess(name) {   
  let name = "수정";
  alert(name + "님 로그인 성공!"); 
}

// 위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("수정")을 넣으면 안 됩니다!

alertSuccess("수정"); // 이렇게요!

4. 비교 연산자

4.1. 비교 연산자

비교 연산자는 연산자 양쪽에 있는 두 값, 즉 좌항과 우항을 비교하는 연산자.

• 비교 연산자의 종류에는 동치 연산자(==, ===, !=, !==)와 관계 연산자(>, <, >=, <=)가 있다.
• 관계 연산자는 문자열(사전순으로 비교)과 숫자(크기로 비교) 데이터 타입을 비교할 때 사용.
• 동치 연산자는 다양한 데이터타입을 비교하는 경우 사용

4.2. 일치 연산자(===)

• === 연산자는 값과 타입이 같은지를 비교하는 동등 비교 연산자(equality operator)
• ===는 엄격한(identity/strict) 비교연산자

4.3. 불일치 연산자(!==)

!== 를 사용해서 서로 '같지 않음'을 비교.

4.4. 동등 연산자(==)

==는 타입을 제외하여 비교하는 느슨한 비교연산자

📍 TIL

문제

myFavoriteColor 함수는 "색깔"을 인자로 받고 3가지 결과 값을 리턴합니다.
if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.

color 가 "navy" 이면 "Good!" 리턴
color 가 "yellow" 이면 "Bad!" 리턴
그 외의 경우 "Whatever!" 리턴

나의 코드

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

➡️ 일치 연산자 대신 동등 연산자를 사용하니 값이 return 되지 않았다.
➡️ why? type까지 비교해주어야 한다.

정답

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

5. 논리 연산자

5.1. 논리 연산자

1. ||

또는(or)에 해당하는 연산자.

2. &&

• 그리고(and)에 해당하는 연산자.
• 어떤 조건 하나만 맞으면 되는 것이아니라 모두 충족해야할 때 사용

3. 연산자를 활용한 조건문의 다양한 표현

if (age > 65 || age < 21 && res === "한국")

위의 코드는 컴퓨터가 해석하기에 왼쪽으로 부터 실행되어,

age > 65 이거나 age < 21 && res === "한국" 

이라는 해석을 가져오게 된다. 이럴 때 괄호()를 사용하여 가독성 있는 코드를 만들면 좋다.

if (age > 65 || (age < 21 && res === "한국"))