TIL :: JavaScript / replit. 1~10

⁍01. Introduction to JavaScript

◎ 알림 창 띄우기 

alert()

: 알림 창을 띄워주는 코드.

: 사용자에게 안내하고 싶은 텍스트를 보여준다.

alert();

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

◎ console.log() 

console.log()

: alert(); 함수와 비슷한 역할.

: 개발자가 확인하고 싶은 내용 출력! ('개발자 도구'를 통해 확인 가능.)

---

Assignment

아래에 나와있는 사항을 이행해주세요.

• 콘솔 창에"I love wecode!" 메세지가 출력되도록 해주세요.
• 기존에 있던 코드들은 모두 삭제하고 "I love wecode!" 만 출력되도록 해주시면 됩니다.

console.log("I love wecode!");

---

⁍02. 주석

◎ 주석 형태 

//

: slash 두 개(//)로 시작한 줄은 주석입니다.

 

/* ... */

: 여러 줄을 한 번에 주석 처리하고 싶으면 아래와 같이 /* 로 시작해서 */ 로 끝냅니다.

---

⁍03. 변수 (Variables)

var name  = "김개발";
//var(키워드), name(변수선언), "김개발"(변수에 할당된 값)
var job = "frontend developer";
//var(키워드), job(변수선언), "frontend developer"(변수에 할당된 값)

◎ 변수 앞 키워드 

var / let / const  - 키워드

• var : 이전 버전에서 사용됨.
• let

: 변수 값 수정 가능.

: 변수 이름 중복 불가, 값은 중복 가능.

: let 키워드는 변수를 새로 생성할 때  let 키워드 사용.  값을 수정할 때는 let 키워드 사용 안 함.

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

name = "김코딩"; //값 수정할때는 let 키워드 사용x
job = "목수"; //값 수정할때는 let 키워드 사용x

• const : 변수 값 수정 불가능.

◎ 변수(선언, 할당) 분리 가능 

let address; 
console.log('address : ', address);
//undefined

address = "선릉";
console.log('address : ', address);
//선릉

---

Assignment

아래 과제들을 수행해주세요.

• index.js 에 variables 라는 함수가 있습니다.
• 그 안에 myAge 라는 변수가 이미 선언되어 있습니다.
• yourAge 라는 변수를 새롭게 선언하고 나이를 할당해주세요.
• myAge 와 yourAge 변수의 합이 50이 될 수 있도록 yourAge 의 값을 정해주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function variables() {
  // 다음 코드는 수정하거나 지우지 마세요.
  const myAge = 21;
  // 아래에 코드를 작성해 주세요.
  const yourAge = 29;  // 다음 코드는 수정하거나 지우지 마세요.
  return myAge + yourAge;
}
console.log(variables());
// 아래의 코드는 절대로 수정하거나 삭제하지 마세요.

---

⁍04~05. Function(함수) - 기본

함수란?

: 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록.

 

◎ 함수의 반환 

: 모든 함수는 반환(return)을 합니다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다.

let result4 = noParameter(); // result4 라는 변수에 noParameter 함수 호출한 결과값을 할당
console.log(result4); // console.log로 확인

console.log(noParameter()); // 호출한 함수를 바로 console.log로 확인 확인도 가능!

❖ 모든 함수가 return을 포함 해야하는건 아니다. (return 키워드 생략 가능)

❖ but, 이 경우에도 함수는 무언가를 반환하고 있다.

❖ 반환을 생략하면 undefined를 반환한다.

 

◎ 함수 - 매개변수(parameter) & 인자(argument) 

매개변수(parameter)

:  함수 이름 옆, ( )소괄호 자리에 적혀 있는 단어. 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할

function getName(name) {   // (name): 파라미터
  return name + '님';
}
let result1 = getName('개발자'); // ('개발자'): 인자

console.log(result1);

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

//*반환 값을 저장해두면 여러번 호출할 수 있다.

---

Assignment

아래의 설명을 읽고 함수를 작성해주세요.

• 함수 이름은 checkYear로 해주세요.
• 올해 년도를 return 합니다.
• 년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.

// Assignment 를 작성해주세요.
function checkYear() {
  let thisYear = 2022;

  return thisYear; 
}

 

Assignment

함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.

• 함수 이름은 addTen 입니다.
• 받은 parameter에 10을 더해서 반환(return)해주세요.

function addTen(num) {
  return num + 10;
// 코드를 작성해주세요
}
let result = addTen(20)
console.log (result);

---

⁍06. Math Expressions

let myNumber1 = 6;
let myNumber2 = 3+3;

let a = 1.3;
let b = 2;
let c = -10;
console.log(a + b);  // 3.3
console.log(b * c / 10);  // -2
console.log(a + 10);  // 11.3
console.log(450 - 30);  // 420
console.log(a + 10 * b * b / 2 + 3);  // 24.3

◎ 생소한 수학 표현식

• num++ = +1
• num-- = -1

let num = 1;
num++; //  num+1 과 같다.
console.log(num);  // 2

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

// 1단계 : newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고
// 2단계 : 그 후 num++; 가 실행되어 변수 num이 2가 되었습니다.

---

Assignment

• index.js 에 작성 되어 있는 mathExpression 함수의 결과 값이 22가 나오도록 수정해 주세요.

🧐 Hint
10 + 2 * 3
이 수식은 실제 학교배웠던 수학계산과 같이,
*(곱하기), /(나누기) 계산을 먼저 하고 +(더하기), -(빼기)는 계산에서 우선순위가 나중 이기 때문입니다.
보기좋게 표현하면 위의 수식은 아래와 같습니다.
10 + (2 * 3) = 10 + 6 = 16 이렇게 하여 16이라는 결과가 나왔습니다.
혹시 36이라는 결과를 얻고 싶다면, () 표기로 먼저 계산할 수식을 묶어줄 수 있습니다. (10 + 2) * 3 = 12 * 3 = 36
입니다!

// 코드가 계속 아래로 내려가도 괜찮습니다.
// Assignment - 다음 함수 안에 코드를 작성해 주세요.
function mathExpression() {
  // 다음 코드의 값이 22가 되도록 수정해주세요.
  let result = (5 + 6) * (10 / (2 * 2.5));
  
  // 다음 코드는 수정하지 마세요!
  return result;
}
console.log(mathExpression())

---

⁍07. 텍스트 문자열의 연결

---

Assignment

• index.js 에 textConcatenation 함수를 수정하여서 다음 문장이 리턴 될 수 있도록 해주세요.

"2 더하기 2는 4"

 

• hint : 뒤의 2 + 2 수학식이 먼저 계산되도록 묶어주세요.

// Assignment - 다음 함수 안에 코드를 구현하세요
function textConcatenation() {
  // 다음 코드를 수정 하여
  // 아래의 문장이 올바른 값이 될 수 있도록 해주세요.
  let text = "2 더하기 2는 " + (2 + 2);
  
  // 다음 코드는 수정하지 마세요!
  return text;
}
alert(textConcatenation())

---

⁍08. if문 (조건문)

: 만약에 ~하면 ~하다.  가 컴퓨터로 반환된 것. 

 

let answer = 3 + 3;

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

 

* 조건문은 위에서 부터 차례대로 조건을 체크하며 내려온다!

let answer = 3 + 3;

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

---

Assignment

조건에 맞게 함수를 구현해주세요.

• myFavoriteColor 함수는 "색깔"을 인자로 받고 3가지 결과 값을 리턴합니다.
• if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.
  • color 가 "navy" 이면 "Good!" 리턴
  • color 가 "yellow" 이면 "Bad!" 리턴
  • 그 외의 경우 "Whatever!" 리턴

// Assignment - 다음 함수 안에 코드를 구현하세요
function myFavoriteColor(color) {
  if(color === "navy"){
   
    return "Good!";
  }else if(color === "yellow"){
    
    return "Bad!";
  }else{
   
    return "Whatever!";
  }
}
let whatColor = myFavoriteColor("navy");
console.log(whatColor);

---

⁍09. 비교 연산자

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

 

• 동치연산자 : 다양한 데이터 타입을 비교

일치 : == ,  === 
불일치 :  != ,  !== 

 

• 관계연산자 : 문자열과 숫자 데이터타입을 비교

> ,  < ,  >= ,  <=

---

Assignment

•  

index.js를 보고 아래 조건에 맞는 함수를 구현해주세요.

• 우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
• canIDrinkSoju 함수 안에 비교 연산자를 사용하여 다음의 경우들이 구현될 수 있도록 해주세요.
  • age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
  • age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
  • 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴

// Assignment - 다음 함수 안에 코드를 구현하세요
function canIDrinkSoju(age) {
  if (age < 20) {
    return "애야 가서 공부나 해라!";
} else if (age >= 50) {
    return "건강을 위해서 술은 적당히 마시세요!";
} else{
    return "소주에는 곱창 어떠신가요?";
}
}
let yourAge = canIDrinkSoju(10);
console.log(yourAge)

---

⁍10. 논리연산자

|| : or
&& : AND
! : NOT

---

Assignment

index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요.

• rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해주세요.
• 가능하면 || 와 && 연산자 둘다 사용해주세요.
• player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
• 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
• 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.
• player1 과 player2 의 값은 다음 셋 중 하나 입니다.
  • "가위"
  • "바위"
  • "보"
• 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.

// Assignment - 다음 함수 안에 코드를 구현하세요
function rockPaperScissors(player1, player2) {
//  예시:
  if ( (player1 === "가위" && player2 === "보" ) 
      || (player1 === "바위" && player2 === "가위") 
      || (player1 === "보" && player2 === "바위")
      || (player1 === "가위" && player2 === "가위")
      || (player1 === "바위" && player2 === "바위")
      || (player1 === "보" && player2 === "보")
     ) {
    return "player1";
  } else {
    return "player2";
  }
}
let yourChoice = (rockPaperScissors("가위", "가위"));
console.log(yourChoice)

---