#TIL wecode Bootcamp Day 2(JavaScript)

Jung Hyun Kim·2020년 5월 26일

JavaScript TIL WeCode function if문 variables

wecode

목록 보기

2/42

Javascript part.1

Chanpter 별로 많이 다뤄본 부분은 간략하게 요점만, 중요한 부분은 상세히 설명하며 넘어갈 예정 🔥🔥🔥

1. Introduction to JavaScript

1.1 웹페이지의 구조'🖼를 정의하는것이 HTML이라면 JavaScript는 웹페이지와 상호작용🔊 하도록 만들어진 언어 이다.

Java랑 Javascript는 아무런 상관이 없다. Car 와 Carpet이 다른것처럼, Java만 공유한다고 같은게 아니자나!!!!(갑자기 부부의 세계 이태오가 생각나는건 무엇..?앗 그만그만 본론으로 돌아가자'🤦‍♀️)
프론트엔드 개발자로서 뗄레야 뗄수 없는 언어가 바로 JavaScript!
JavaScript가 바로 정적인 웹페이지를 동적으로 만들어 줄 수 있게 해준다.(물론 css 애니메이션으로 어느정도 구현은 가능하지만 넘어서서, 로그인정보 넘겨주기나 서버와 대화하는 그런 의미로서도 이해가 가능함)
-기본적인 자바스크립트의 약속어(Reserved Words)는 아래와 같다 약속어 이기 때문에 내가 약속어로된 이름의 function을 임의로 만들수 없다

    - alert();//웹페이지에 뜨는 경고창, 알림장에 사용 
    - console.log();//브라우저의 개발자 도구에서 () 내용을 출력 하게 하는 것 
    - ... 더 많고 이후에 사용될 예정

2. Variables(변수)

2.1 올바른 변수의 표시법

물론 띄어쓰기를 아래와 같이 안하더라도(변수와 변수이름 사이에는 꼭해야함!) 코드 출력에는 문제가 없지만, 코드는 같이 협업하고 작성하는 만큼 통일된룰👌로 같이 작성해주는 것이 중요하다!
```
const 변수이름 = 값;
```

2.2 변수의 종류와 차이(var,let,const)

var : 버전이 업그레이드 되면서 이제 사용 안하는 변수
: 특.히. scoping rule을 어김🤦‍♀️, var는 함수 호출하기 전에 정의해도 불러오고 해서 혼선 있을수 있음! (var는 hoisting 됨)
: 해당부분의 이유에 대해서는 잘다룬 블로그가 있어 공유함
let : 사용법은 var와 같으나 hoisting 되지 않는다.let은 변수값을 수정가능✅하다.
const : 변수값을 영원히 수정할 수 업다❌

2.3 변수의 선언 vs 변수 값 할당

변수는 외상도 가능? 🤞
: 변수는 먼저 선언(declare)하고 할당은 그후에도 할수 있다

	let money;
	console.log(money);
	money="$4";
	console.log(money); // 이렇게 하면 $4가 출력된다

2.4 변수명은 중복 불가❌ 변수 값은 중복 가능✅

간단하게 생각하면 나 김정현은 세상에 한명이지만, 내가 입는 옷, 신발은 다른사람도 다 "동시에" 신을 수는 있다고 생각하면 바로 이해감!👍

const joanneKim = "나이키"
const jojoKim= "나이키"  // 이렇게 jojo와 joanne은 같이 나이키를 신을 수는 있다.

const joanneKim="나이키"
const joanneKim="아디다스"//joanne이 나이키와 아디다스 신발을 같이 신을 수는 없다.

3. 함수(function)

3.1 함수의 정의

함수는 특별한 목적의 작업을 수행하도록 만들어진 '독립적인 블록'이다.
간단하게 함수의 어원에 대해 생각하면 
함수 (상자 함, 수 수) 즉 상자🎁에 수를 넣어 새로의 수가 되게 한다는것을 의미한다.

3.2 함수의 형태

함수의 구조 structure of function

3.3 함수의 호출

호출, 즉 명하여 불러내다 라는 뜻이니 "***함수님 나오세요~" 하는것과 같다 
아래 joanneKim이라는 함수를 만들어 줬다면 불러줘야 나오는 법.

function joanneKim () {
  return "Please enter"
}

joanneKim(); //함수이름(); 이것이 호출하는 구조이다

3.4 함수의 정의 vs 함수의 실행(호출)

      꽃 🌹
      김춘수

      내가 그의 이름을 불러주기 전에는 
      그는 다만 
      하나의 몸짓에 지나지 않았다. 

      내가 그의 이름을 불러주었을 때 
      그는 나에게로 와서 
      꽃이 되었다.

김춘수 시인의 꽃의 일부분을 발췌해 보았다.😊
웬 갑자기 시? 라고 하겠지만 잘 생각해보자!

함수를 정의만 한 상태에서는 just 함수에 불과 했으나
함수를 호출해주니/실행해주니 함수가 무엇인지 보여주게 된다.

즉 3.3에서 본 예제에서

-----------------------
function joanneKim () {   // 이 하늘색 점선 사이의 내용이 '함수정의'
  return "Please enter"
}
------------------------
joanneKim(); //이 실선 아래 부분이 '함수의 실행(호출)'

자 이제 함수의 기초를 보았으니 함수를 좀 더 자세히 알아보자😎

3.5 Function(함수) - 데이터 반환하기(1)

함수의 반환(return)

함수는 정의 하고 호출해주면 실행되는데, 실행을 하려면 함수 안에서 실행되면 이걸 보여주세요🤞 하는 return 값이 있어야 한다.
함수를 열심히 만들었다 한들, 실행되면 보여주세요 라는 return 값을 주지 않으면 실행하더라도 그 함수는 undefined라는 값을 반환한다. 즉 'define되지 않은 함수야~ 다시 알려줘!!🤔' 라고 말하는 것 이다.
return은 직접 return "이걸리턴해"; 으로 명명 하기도 하고 return의 특징을 가진 console.log("이걸보여줘");도 가능하다.

반환된(returned) 함수는 어떻게 확인?

함수는 말 그대로 상자에 담겨서 보여주는 수, 즉 이 수를 다른 변수라는 상자에 담을 수도 있고, console.log();라는 함수 안에 또 넣어서 확인도 가능하다! 그게 무슨소리❔❓

const joanneKim () {
  return "I'm hangry 247!"
}

let joanneStatus = joanneKim(); 
//함수의 반환값을 joanneStatus의 변수에 넣어주면?
console.log(joanneStatus);
//console.log에서 joanneStatus변수 값으로도 확인 가능!✅
console.log(joanneKim());
//console.log에서 값처럼 확인 가능!✅

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

이제 함수에 값을 넣어 함수가 실행될때 값을 함수에 실행시켜 출력하는 법을 보려고 한다.
이 말이 어려울수 있어서 정말정말 간단히 소개된 블로그 글이 있어서 소개한다! parameter와 argument를 재미있게 소개한 블로그
쉽게 정리하면, 함수를 레시피와 비교했는데 우리가 잘 아는 파스타🍝 만들기로 생각해보면 된다!
아래 코드에 보면 function boilWater(water,pasta,pot) 에서 water,pasta,pot이 매개변수(parameter), 그리고 이 함수를 호출할 때boilWater(30,"spaghetti",120);의 30,spaghetti, 120 을 인자(argument) 라고 한다.

function boilWater(water, pasta, pot) {
  console.log("We are going to boil"+water+
              "ounces of water with"+pasta+
              "in a"+pot+"ounce pot"); }

boilWater(30,"spaghetti",120);

3.6 Math Expressions

Math Expressions에서 중요한 부분은 grouping 과 올바른++ & --사용법 이다.

Grouping

JavaScript에서의 연산도 일반 수학 사칙연산의 순서 괄호 > 제곱 > 곱하기, 나누기 > 더하기, 빼기 (➗✖➕➖) 와 동일하다.
그러므로 다양한 연산이 있을 경우 꼭 꼭 꼭 먼저 해결해야 하는 부분을 괄호안에 넣을 것😉

++(Increment) 와 --(Decrement)

이전에는 단지 1씩 더하고 1씩 빼고라고 생각했는데 집고 넘어가야하는 부분인것 같아 자세히 정리 해보려고 한다
숫자의 뒤에 붙일수도 있고 앞에 붙일수도 있는데 이에 따라 출력하는 값이 달라진다. (넹? 무슨얘기죠?🤷‍♀️) 아래의 설명을 보자!


// Increment
let a = 1;
console.log(a++);    // 1이 출력됨 
console.log(a);      // 2이 출력됨 

// Decrement
let b = 1;
console.log(b--);    // 1이 출력됨 
console.log(b);      // 0이 출력됨

console.log(a++) 나 console.log(a--)를 했지만 출력값이 여전히 1 인 이유는 ++나--를 원하는 값 뒤에 입력하면, 먼저 해당 값을 출력하고 이후에 해당 값을 출력할때 변한 값이 적용되기 때문이다!

// Increment
let a = 1;
console.log(++a);    // 2이 출력됨 
console.log(a);      // 2이 출력됨 
// Decrement
let b = 1;
console.log(--b);    // 0이 출력됨 
console.log(b);      // 0이 출력됨

console.log(++a) 나 console.log(--a) 을 입력하면 먼저 해당 값적용 된 부분을 return 한다는 의미이기 때문에 바로 적용이 된다!

잘 모르겠다면 잘 설명된 해당 블로그도 참조하면 좋겠다! (최소 참조쟁이...😂)

4. if 문

4.1 if/else if/else

"만약에 너가~(조건문) 한다면 ~ (이런코드 실행)할거야" 💁🏼‍♀️를 의미하는 말그대로 if 문이라고 볼수 있으며 구조는 아래와 같다.
if ▶ else if ▶ else의 순서로 이거면 이거, 이것도 아니면 저거 저거도 아닌 나머지는 다! 의 구조로 이해할 수 있다.
자세한 구조는 아래 코드를 찬찬히 읽어보자!

let joanneHeight = 164;

if(joanneHeight>170) {
  alert("Wow, she is actually taller than I thought !");
}
else if (joanneHeight>160) {
         alert("Yea I thought she would be aroud that height!");
}
else {
  alert("Really? I think she is not that short though!");
}

4.2 비교연산자 🆚

동등 비교연산자(equality operator)

==

if 문에서 사용되며 string끼리, 숫자끼리, 숫자와 string 끼리 비교가 가능하다

let isThisTrue = 3=="3"

이런 변수를 만들어 주고, 콘솔창isThisTrue를 입력하면 true가 출력된다. 즉 숫자3과 문자열 3은 같다고 받아들여 지는것 ! 뭐 type까지 따지지 말고 거 거의 비슷하면 맞다고 칩시다! 😅하는 아재같은 동등연산자
-이런 아재는 오류를 발생할 수 있기 때문에 사용을 안하는게 좋다!❌

엄격한 비교연산자(identity/strict operator)

===

let isThisReallyTrue = 3 ==="3"

위와 다르게 해당 변수는 false가 출력된다.
이름처럼 엄격한 비교연산자는 꼰대아재이다 type이 저건 number 이건 string 인데 어떻게 같아요!? 🤨라고 말하는 꼰대아재
하지만 이런 꼰대아재의 말이 틀린건 아니기 때문에 비교연산자는 항상 엄격비교연산자를 사용하자 🙆🏼‍

불일치 연산자

!==(Not identical)

엄격 비교연산자가 아니라면? 라는 뜻으로 해당조건이 아닐때를 필요로할때 사용한다.

let joanneWeight = 54;
if(joanneWeight !== 48) {
  alert("어머! 48키로 아니에요?");
}

4.3 논리연산자(Logical Operators)

Or에 해당하는 "||"

And에 해당하는 "&&"

let seafood = prompt("해산물 좋아하시나요?");
let spicy = prompt("매운음식 좋아하시나요?");

if (seafood === "네" && spicy === "네") {
  alert("아구찜을 추천합니다.");
} else {
 alert("아구찜은 입맛에 안맞으실것 같네요");
}

논리연산자를 읽는 순서와 grouping

논리연산자가 여러개 들어 있으면 어떻게 읽어야 하는지가 헷갈릴 수 있다!🤷‍♀️
- 그렇기 때문에 적절한 grouping은 필수! 순서는 선택! 🎶🎵🎤

if (age > 18 || age < 65 && nationality === "한국")

해당 if문에서 ||을 기준으로 나눈다면 18세가 넘거나 65세이하의 한국인 을 보는 것이고 && 을 기준으로 나눈다면 18세초과하거나 65세는미만 이면서 한국인을 보는것인데 답은 "전자" 이다.
Why? 컴퓨터 문서는 항상 왼쪽에서 오른쪽 으로 읽기 때문에 저렇게만 되어 있다면 우리가 찾고자 하는것은 18세가 넘거나 65세이하의 한국인 이다.
만약 && 을 기준으로 나누고 싶다면? 즉 18세넘고65세미만 이면서 한국인을 찾고 싶다면 GROUPING GROUPING GROUPING 을 해주도록 하자
이렇게!

if ((age > 18 || age < 65) && nationality === "한국")

다음 TIL에서는 심화된 함수, 객체 등을 더 심도있게 다루어 보도록 하자!

(사실 내가 몰라서 정리하는건 안비밀...)
👍👍

Jung Hyun Kim

코린이 프론트엔드 개발자💻💛🤙🏼

이전 포스트

#TIL wecode Bootcamp Day 1(CSS/HTML)

다음 포스트