[JS] 기본적인 개념 2

//코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중//

​

사실은 어제 끝냈어야 했는데.. 해보자.

...

아직도 조금 남았어.. 정말 싱숭생숭 하군.

---

[조건문]

​

<if문>

• if 괄호안의 조건을 평가해서 true면 실행.
• 괄호 안의 값은 불린형으로 변형된 뒤에 판단.
• else는 if절이 false일 때 실행 됨.
• 그 중간은 else if로

const age = 18;
if(age >19) {
console.log("Well Come!")
} else if(age===19) {
console.log("Good Luck!")
} else {
console.log("Good Bye!")
}

 

[논리 연산자]

• || or, && and, ! not
• || or: 여러 개 중 하나라도 true면 true. 모든 값이 false일때만 false를 반환
• -> 첫 번째 true를 발견하면 즉시 평가를 멈춤.

• && and: 모든 게 true면 true. 하나라도 false면 false를 반환
• -> 첫 번째 false를 발견하면 즉시 평가를 멈춤.

• ! not: ture면 false, false면 true

​

=> so, 빨리 걸릴 것을 먼저 코당하는 것이 좋음.

예, 운전면허가 있고 시력이 좋은 여군 보다

--> 여군인데 시력이 좋고 운전면허가 있는 사람.

const age = prompt("나이가..?");
const isAdult = age > 19;

if (!isAdult) {
  console.log("돌아가.");
}

 

• 비교 연산자에 우위가 있음. &&가 ||보다 먼저 평가됨

const gender = "F";
const name = "Jane";
const isAdult = true;

if (gender === "M" && name === "Mike" || isAdult) {
  console.log("통과");
} else {
  console.log("돌아가");
} // &&가 먼저 비교 되고 false여도 ||에서 true => 통과

// 남자이고, 이름이 mike이거나 성인이면 통과는 

if (gender === "M" && (name === "Mike" || isAdult)) {
  console.log("통과");
} else {
  console.log("돌아가");
} // 이거여야 하고 결과는 => 돌아가

 

[반복문 loop]

• 동일한 작업을 여러번 반복

​

<for문>

• ;으로 구분하고 3개로 나눌 수 있음.
• for(초기값; 조건(true면 실행하고, false가 되면 멈춤); 코드 실행 후 작업)

// 1부터 10까지 로그
for(let i = 0; i <10; i++) {
console.log(i+1)
}

 

<while>

let i = 0; 
while(i <10) {
console.log(i);
i++;
}

 

<do..while>

let i = 0; 
do{ //반복 코드
i++;
}while(i <10)

 

• while과 비슷한데 조건문을 아래로 옮길 수 있음.
• 차이점은 while을 충족하지 않더라가도 코드가 적어도 한 번은 실행된다는 것.

​

<break, continue>

• break: 반복문 멈추고 빠져나옴.
• continue: 멈추고 다음 반복으로 진행.

while (true) {
  //무한반복이니까 조심히 쓰래..
  let answer = confirm("계속 할까요?");
  if (!answer) {
    break;
  }
} // 확인 누르면 계속 확인 창이 뜸. 취소 누르면 false라서 멈춤

//짝수만
for (let i = 0; i < 10; i++) {
  if (i % 2) {
    //0일때는 불리안이 false라서 continue 안되고 바로 콘솔.
    //1이면 컨티뉴라서 안 뜸
    continue;
  }
  console.log(i);
}

• 명확한 횟수가 정해졌으면 for문을 아니면 while을 사용.

​

<switch문>

• if else를 알면 그거로도 쓸 수 있지만, 더 간결해 질 수 있기 때문에 사용.

// 사과: 100원
// 바나나: 200원
// 키위: 300원
//멜론: 500원
// 수박: 500원
// 사고 싶은 과일을 물어보고 가격 알려주기.

let fruit = prompt("무슨 과일을 사고 싶나요?");
switch (fruit) {
  case "사과":
    console.log("100원입니다");
    break; //case는 break를 만나야지 멈춤
  case "바나나":
    console.log("200원입니다");
    break;
  case "키위":
    console.log("300원입니다");
    break;
  case "멜론":
  case "수박": // 같은 거는 브레이크 없으면 걍 내려오니깐 합침.
    console.log("500원입니다");
    break;
  default: //마치 if의 else 같이
    console.log("그런 과일은 없습니다.");
}

 

• 걍... array이랑 함수 써서 데려올듯..... 이게 뭔 짓임... 역시 인간은 배워야 해...

​

[함수]

• function 함수명(매개변수) {}
• 매개변수를 인자로 부르기도 하는데 구분의 의미가 현재는 없고, 있을 수 도 없을 수도 있고, 2개 이상일 때는 ","로 해주면 됌.
• 함수의 장점은 유지 보수가 쉽고, 여러 곳에서 써도 중복 안 해도 됨
• 한 번 만들면 매개 변수를 바꿔가면서 적용이 가능.

 

function sayHello(name) {
  const msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello("Tahsa"); // Hello, Tasha

// 만약에 로그인을 하지 않아서 사용자의 이름을 모른다면,

let msg = "Hello"; //함수 밖에서 전부 다 적용 가능 --> 전역 변수 global variable

function sayHello(name) {
  //let msg = `Hello, `; //msg가 달라져서 let으로 한 거고, 
// 함수 안에서만 사용할 수 있는 지역변수local variable임. 외부에서도 쓰고 싶으면 밖으로 뺴줘야 함.
  if (name) {
    msg += `, ${name}`; // msg에 이름을 더하고, 다시 msg가 되도록
  }
  console.log(msg);
}

sayHello(); // Hello
sayHello("Tasha"); // Hello, Tasha

• 전역 변수와 지역 변수 => 같은 이름으로 선언해도 서로 간섭을 받지 x

let msg = "welcome";
console.log(msg); //전역 welcome

function sayHello(name) {
  let msg = "Hello";
  console.log(msg + " " + name); //지역 Hello, tasha
}

sayHello("tasha");
console.log(msg); //전역 welcome

 

• 매개변수로 받은 값은 복사된 후에 함수의 지역변수가 됨.
• 전체 서비스에서 공통으로 봐야 되는 것을 제외하고는 지역변수를 쓰는 습관을 들이는 것이 좋음.
• 전역변수가 많아지면 관리가 힘들어짐.

 

let name = "tasha";

function sayHello(name) {
  console.log(name);
}

sayHello(); // undefined => 함수 내에 지역 변수를 선언하지 않았기 때문.
sayHello("Jane"); //Jane

• default value를 아예 할당이 가능. 매개 변수를 변수 지정하는 것처럼 넣을 수도 있음.

function sayHello(name = "friend") { //default는 이름이 없을 떄만 할당. 
  let msg = `Hello, ${name}`;

  console.log(msg);
}

sayHello(); // Hello, friend
sayHello("Tasha"); // Hello, Tasha

• return의 오른 쪽에 값을 반환 하는 것.
• return을 값 없이 쓰면 함수를 종료하려는 목적으로도 쓸 수 있음. 아래 값은 실행되지 않음.

 

//return 으로 값 변환

function add(num1, num2) {
  return num1 + num2; // return 오른쪽 값으로 반환
}

const result = add(2, 3);
console.log(result); // 5

//사실 return이 없어도 반환이 가능함.
// return을 값 없이 쓰면 함수를 종료하려는 목적으로도 쓸 수 있음.

function showError() {
  alert("에러가 발생했습니다.");
  return;
  alert("이 코드는 절대 실행되지 않습니다.");
}
const result = showError();
console.log(result);

 

• 함수나 변수는 한 번에 한 작업에 집중 好
• 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍