TIL_14_with Wecode 006 JavaScript

✔️JavaScript를 실행시키려면

• 브라우저가 존재해야하고,
• HTML파일이 있어야하고,
• HTML파일에서 JavaScript 파일을 연결시켜줘야 합니다.

✔️alert(); 알림창 띄우기

HTML, CSS 코드 없이 JavaScript 코드로 알림창을 띄울 수 있다. (다만 개발자가 디자인을 변경할 수는 없습니다. 다양한 종류의 브라우저 (ex. IE(Internet Explorer), Chrome, Safari, Firefox) 에서 기본적으로 정해진 알림창이 있으며 각각 정해진 디자인을 따르기 때문에 각기 다른 모양을 가집니다.)
alert("안녕하세요!");

✔️console.log();
console.log() 개발자가 확인하고 싶은 내용을 출력하는 console.log() 함수의 결과는 일반 사용자가 볼 수 없도록 브라우저에 내장된 '개발자 도구' 를 통해서만 확인할 수 있습니다.
console.log("아래에 나와요");

💡alert() 함수와 console.log() 함수는 자바스크립트에서 이미 정의된, 약속된 단어입니다. 이렇게 약속된 단어들은 약속어(Reserved Words) 라고도 불립니다.
💡HTML, CSS 로만 이루어진 정적인 웹페이지는 JavaScript 를 만나 동적으로 동작하게 됩니다.

✔️주석

• 한 줄 주석 - slash 두 개(//)로 시작
• 여러 줄 주석 - /* ... */

✔️변수

var name = "김개발";
var job = "frontend developer";

• name, job은 변수 입니다.
• 김개발은 name 이라는 변수에 할당된 값 입니다.
• frontend developer은 job이라는 변수에 할당된 값 입니다.

var myName = "김개발";
var fullName = "김개발";

💡변수 이름 주의 사항 (naming convention)

• 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
• 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
• 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
• 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.
  💡cf. camelCase vs. snake_case
  1) camelCase
• camelCase ****란 낙타 등처럼 울퉁불퉁하다는 소리입니다.
• 단어가 새로 시작할 때부터 대문자로 쓰면 됩니다.
  ✔️ example)
• firstSecond
• myProfileImg
• toDoListArray
  2) snake_case
• camelCase 말고 snake_case 표현도 있습니다.
• 변수이름에 - 는 사용할 수 없으므로, _ 를 사용한 것입니다. 하지만 잘 사용하지는 않습니다!
  ✔️ example)
• first_second
• my_profile_img
• to_do_list_array
  💡let vs. const
• let 키워드를 사용하면 변수 값을 수정할 수 있습니다.
• const 키워드를 사용한 변수 값은 수정할 수가 없습니다.

let name = "wecode";
const birthday = 19910223;

→ let을 쓸지, const를 쓸지는 개발자가 상황에 맞게 정하면 됩니다. 변수에 값을 할당하고 영원히 수정할 일이 없으면 const를 사용하고, 변수 값이 한 번이라도 수정될 예정이라면 let을 쓰면 됩니다. 물론 두 개 구분할 필요 없이 var를 써도 되지만, 앞으로 최신 버전에 맞는 문법을 사용하면 좋겠습니다!
let 키워드는 변수를 새로 생성할 때만 사용됩니다. 값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다.

let name = "김개발"; 
let job = "frontend developer";
name = "김코딩";
job = "목수";
//처음에 name = "김개발" 로 지정해줬다해도, 
변수이기에 결과는 두 번째로 지정해준 "김코딩" 으로 도출.

• let 키워드의 역할은 변수를 "생성"하는 것입니다.

let name = "김개발";
let name = "김코딩"; //잘못된 예

• 위의 코드는 name 이라는 변수의 값을 변경한 것이 아니라 name 이라는 변수를 두 번 생성한 것입니다.
• 같은 변수 이름을 중복해서 쓰면 안 됩니다.

let address;
address = "선릉"; //변수의 선언과 할당을 분리한 예시

• 변수명은 중복이 되면 안 된다고 하는데, 값의 중복은 가능할까요?

let company1address = "선릉";
let company2address = "선릉";
let company3address = "강남";
let company4address = "강남";
let company5address = "선릉";
company5address = "선릉";

• 네! 가능합니다. 변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능합니다.

✔️함수

function checkCorrect() {
  let hi = "안녕하세요";
  return hi;
}

함수가 정의되어 있습니다. 이름은 checkCorrect 입니다. 위와 같이 함수를 생성하고,

checkCorrect();

위와 같이 이름을 불러 호출할 수 있습니다.
💡함수를 정의만 하고 호출하지 않으면 실행되지 않으니 꼭 유의해주세요!

• function 키워드로 시작하여
• 함수 이름을 지어주고
• 함수를 알리는 소괄호(() : parentheses)를 열고 닫고
• 함수의 시작을 알리는 중괄호({ : curly bracket)을 열어줍니다.
• 실행할 코드를 중괄호와 중괄호 사이에 작성합니다. 함수의 body 라고 부르기도 합니다. 이 부분에 들여쓰기가 되어있습니다. 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기 하였습니다.
• return(반환) 할 것이 있다면 return문을 작성합니다.
• 중괄호(}: curly bracket)로 닫아줍니다. 함수의 작성이 끝났음을 알립니다.

1) add 함수 정의

function add() {
  let sum = 3+3;
  return sum;
}

2) add 함수 실행(호출)

add();

• add 함수 이름을 부르기 전까지는, sum 변수가 생성되지도 않고, 3+3 더하기도 되지 않습니다.
• 함수 내부가 실행되려면 위와 같이 함수를 호출해야합니다.
• 함수를 호출하면, 그제서야 add 함수가 실행되므로
• 그때 3+3 더하기가 되고 sum 변수에 저장되는 것입니다.
• 함수를 호출하는 형태는 아래와 같이 함수 이름에 괄호()를 여닫아주면 됩니다.
  함수이름();

✔️매개변수(parameter)와 인자(argument)

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

let result1 = getName('개발자');
console.log(result1); // 콘솔에 '개발자님'이 출력됩니다.

let result1 = getName('개발자'); // '개발자님' 출력
let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력

위와 같이 '개발자' 라는 값을 보내서 호출할 수 있고, '디자이너', '기획자' 등 또 다른 값을 넣을 수도 있습니다. '개발자'와 같은 실질적인 값을 인자(argument) 라고 합니다.
앞서 매개변수(parameter)는 '자리' 혹은 '변수의 이름'이라고 말씀드렸습니다. 반면, 인자(argument)는 그 자리에 들어갈 구체적인 값을 뜻합니다. 이 두 종류의 값을 잘 구분해주세요.

function addTen(num) { 
//함수 addTen의 매개변수는 num 이다.
  return num + 10;
}
console.log(addTen(10)); 
//addTen 인자에 10을 넣었더니, 
리턴 값에 의해 결과는 20이 도출된다.

✔️수학표현식

let num = 1;
num++;

여기서 num++ 는 num = num + 1; 와 같다.
num--; 가능.

let num = 1;
let newNum = num++;
console.log(num); //결과는 2
console.log(newNum); //결과는 1

풀어보면,
1. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고
2. 그 후 num++; 가 실행되어 변수 num이 2가 되었습니다.
풀어서 작성하면,

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

'newNum'에도 2를 할당하고 싶으면 아래와 같이 작성해야 합니다.

let newNum = ++num;

풀어서 작성하면,

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

✔️텍스트 조합

console.log("안녕" + "하세요");
console.log("안녕" + "하" + "세요");
console.log("안녕" + "하세" + "" + "요");
let hi = "안녕";
console.log(hi + "하세요");
let ha = "하세요";
console.log(hi + ha);

모두 같은 결과가 나온다.

let message = "감사합니다., ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess);

결과는 '감사합니다., 김개발님!'

console.log("2" + "2");

결과는 '22'.
쌍따옴표로 인해 숫자가 아닌 문자로 인식하였기 때문.

console.log(2 + 2); //당연히 결과는 4

alert("2 더하기 2는 " + 2 + 2); 의 결과는?

서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 합니다.
💡String과 Number형을 더하면 항상 String 형으로 변환됩니다.

예시)
function textConcatenation() {
  let text = "2 더하기 2는 " + (2 + 2);
  return text;
}
textConcatenation();

// "2 더하기 2는 4". 결과 도출.
수학식이 먼저 계산되도록 괄호로 묶어준다.

✔️if

let answer = 3 + 3;
if (answer > 5) {
  alert("5보다 큰 숫자!");
} 

1. answer 라는 변수에 3+3 계산 결과 값이 저장됐습니다.
2. 왼쪽의 값이, 오른쪽의 값보다 크다는 의미입니다.
3. if 우측 ()괄호안의 조건이 맞으면, {}괄호 안에 있는 코드가 실행됩니다.

let answer = 3 + 3;
if (answer > 5) {
  alert("5보다 큰 숫자!");
} else {
  alert("5보다 작거나 같은 숫자!");
}

• else 문은, 위의 if 문의 조건이 false일 경우 실행됩니다.
• answer 변수가 5보다 크면 if 문 내부의 코드가 실행되고,
• answer 변수가 5보다 작거나 같으면 else 문 내부의 코드가 실행됩니다.
  

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

• if 부터 마지막 else 문까지 차례대로 조건문을 실행합니다.
• 그래서 위와 같은 경우 answer가 6이므로,
• 첫 번째 if문은 15보다 작아서 지나치고,
• 두 번째 else if문도 10보다 작아서 지나치고,
• 세 번째 else if문에서! answer가 5보다 크니까 "5보다 큰 숫자!" 라는 알림창이 뜨게 됩니다.
  💡조건문을 보면 위에서부터 차례로 조건을 체크하며 내려온다는 사실을 알 수 있습니다.
  그래서 조건문은 순서가 중요합니다.

Assignment

• myFavoriteColor 함수는 'color'를 인자로 받고 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 color;
}
myFavoriteColor("navy"); 

✔️비교연산자
비교 연산자의 종류에는 동치 연산자(==, ===, !=, !==)와
관계 연산자(>, <, >=, <=)가 있습니다.
=== 엄격(일치) 비교 vs. == 추상(동등) 비교
비교연산자가 있을 때는, 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행하게 됩니다.

✔️불일치 연산자

if (answer !== "비밀") {
  alert("틀렸습니다.");
}

answer 값이 "비밀" 이 아니면, 다음 구문을 실행합니다.

function canIDrinkSoju(age) {
  if (age < 20) {
    return "애야 가서 공부나 해라!";
  } else if (age >= 50) {
    return "건강을 위해서 술은 적당히 마시세요!";
  } else {
    return "소주에는 곱창 어떠신가요?";
  } return age;
}
canIDrinkSoju(30);