Week 1 - JavaScript 02. Variables

๊น€๋ฏผ์žฌยท2021๋…„ 7์›” 26์ผ
0

TIL, WeCode, Courseย 

๋ชฉ๋ก ๋ณด๊ธฐ
2/48
post-thumbnail

*๐Ÿ”Study Keyword :

โœ…: ๐Ÿ”‘๋ณ€์ˆ˜(์„ ์–ธ ๋ฐ ํ• ๋‹น)์™€ ๐Ÿ—๏ธ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…(๊ธฐ๋ณธ, ์ฐธ์กฐํ˜•)์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž์•„!

- 02. ๋ณ€์ˆ˜

-WHAT ISโ“

๋ณ€์ˆ˜๋ž€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์ƒ์„ ์˜๋ฏธํ•œ๋‹ค.

-WHY & WHNE USEโ”โ•

๋ณ€์ˆ˜๋ž€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์ƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ •ํ•œ ๊ฐ’(๋ฐ์ดํ„ฐ)์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

-HOW TO USEโ•โ“

-๋ณ€์ˆ˜ ์„ ์–ธํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ’์„ ๋Œ€์ž…ํ•˜๋Š” ๊ฒƒ์€ ๋ณ„๊ฐœ์ด๋ฏ€๋กœ ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ ๋Œ€์ž…์—ฐ์‚ฐ์ž(=)๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋Œ€์ž…์—ฐ์‚ฐ์ž๋Š” ์˜ค๋ฅธ์ชฝ ํ•ญ์— ์žˆ๋Š” ๊ฐ’์„ ์™ผ์ชฝ์— ์žˆ๋Š” ๋ณ€์ˆ˜์— ๋Œ€์ž…ํ•จ์„ ์˜๋ฏธํ•œ๋‹ค.

<script>
let myNumber = 100; //์ˆซ์ž 100 ๋Œ€์‹  myNumber๋ผ๋Š” ์‹๋ณ„์ž(๋ณ€์ˆ˜๋ช…)์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
let myNumber // ๋ณ€์ˆ˜์˜์—ญ์— ๋นˆ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜๊ณ  ํ™•๋ณดํ•œ ๊ณต๊ฐ„์˜ ์‹๋ณ„์ž(๋ณ€์ˆ˜๋ช…)๋ฅผ ์ง€์ •ํ•œ๋‹ค = ์„ ์–ธ(declare) 
myNumber = 100; // ๋ณ€์ˆ˜์— ๋ฐ์ดํ„ฐ  ๋ฅผ ๋‹ด๋Š”๋‹ค. ํ• ๋‹น(assign)
let myNumber = 100; // ๋ณ€์ˆ˜ ์„ ์–ธ๊ณผ ํ• ๋‹น์„ ์ง„ํ–‰
console.log(myNumber) // 100,์„ ์–ธ๊ณผ ํ• ๋‹น์„ ๋งˆ์นœ ๋ณ€์ˆ˜๋ฅผ ์ฐ์–ด๋ณผ ์ˆ˜ ๋„ ์žˆ๋‹ค.
</script>

๐Ÿ’กTIP)๋ณ€์ˆ˜ ์ด๋ฆ„ ๊ทœ์น™

  • ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ์ •ํ•  ๋•Œ, ์ฒซ ๋ฒˆ์งธ ๋ฌธ์ž๋Š” ๋ฐ˜๋“œ์‹œ ๊ธ€์ž๋‚˜ ์–ธ๋”๋ฐ”, ๋‹ฌ๋Ÿฌ๊ธฐํ˜ธ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
  • ๋‘ ๋ฒˆ์งธ ๋ฌธ์ž๋ถ€ํ„ฐ๋Š” ๊ธ€์ž, ๋ฐ‘์ค„, ๋‹ฌ๋Ÿฌ, ์ˆซ์ž ์ค‘์—์„œ ์ž์œ ๋กญ๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ๋ณดํ†ต ๋ณ€์ˆ˜์ด๋ฆ„, ํ•จ์ˆ˜์ด๋ฆ„์„ camelCase(์นด๋ฉœ์ผ€์ด์Šค) ๋ฐฉ์‹์„ ๊ถŒ์žฅํ•œ๋‹ค.
<script>
// camelCaseํ‘œ๊ธฐ๋ฒ•
let properCamelCase = "Variable";
let thisIsNumber = 2021;
console.log(properCamelCase, thisIsNumber)
</script>

- 02_1. ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…

WHAT ISโ“ ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ๊ธฐ๋ณธ ํƒ€์ž…๊ณผ ์ฐธ์กฐ ํƒ€์ž…์œผ๋กœ ๋‚˜๋‰œ๋‹ค.
-๊ธฐ๋ณธ ํƒ€์ž…์—๋Š” Number, sting,boolean,undefined,null ๋“ฑ์˜ ํƒ€์ž…์ด ์žˆ๊ณ 
-์ฐธ์กฐํƒ€์ž…์—๋Š” object, array, function๊ณผ ๊ฐ™์€ ํƒ€์ž…์ด ์žˆ๋‹ค.

- ๊ธฐ๋ณธ ํƒ€์ž…

โ€ฃ Number

WHAT ISโ“ ์ˆซ์ž๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ์ˆซ์ž๋ฅผ ์ด์šฉํ•ด ์‚ฌ์น™์—ฐ์‚ฐ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  • HOW TO USEโ•โ“
<script>
let number1 = 100;
let number2 = 200;
console.log(7 % 2)//1 reminder๋กœ, ๋‚˜๋จธ์ง€ ๊ฐ’
console.log(`100 plus 200 equals to ${number1+number2}`) // 100 plus 200 equals to(strging) 300(number)
console.log(`number: ${number1}`) // number1(string) : 100(number)
</script>

โ€ฃ String

WHAT ISโ“ ๋ฌธ์ž๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋ฌธ์ž์—ด์ด๋ผ ๋ถ€๋ฅธ๋‹ค.

  • HOW TO USEโ•โ“
    -'',"",``๋ฐฑํ‹ฑ์„ ๊ฐ’์‹ธ ์‚ฌ์šฉํ•˜๋ฉฐ ์•ˆ์˜ ๊ณต๋ฐฑ๋„ ์ธ์‹๋œ๋‹ค.
    -๋ฌธ์ž์—ด์„ ํ•ฉ์น  ๋–ˆ '+' ์—ฐ์‚ฐ์ž, ํ•ฉ์น  ์ˆ˜ ๋„ ์žˆ๋‹ค.
    -length๋ฉ”์†Œ๋“œ๋กœ ๋ฌธ์ž์—ด์˜ ๊ธธ์ด๋ฅผ ์•Œ์•„๋‚ผ ์ˆ˜ ๋„ ์žˆ๋‹ค.
    -num ๋ฐ์ดํ„ฐ ํƒ€์ž… + string ๋ฐ์ดํ„ฐ ํƒ€์ž… = string ๋ฐ์ดํ„ฐํƒ€์ž…์ด ๋‚˜์˜จ๋‹ค.
<script>
let firstName = "kim"
let lastName ="MinJae"
let fullName = firstName + lastName // kimMinJae, '+'์—ฑ์‚ฐ์ž๋กœ ๋ฌธ์ž์—ด ํ•ฉ์น˜๊ธฐ
console.log(fullName.length) //9, .length๋ฉ”์†Œ๋“œ๋กœ  ๋ฌธ์ž์—ด๊ธธ์ด ์•Œ์•„๋‚ด๊ธฐ
</script>

โ€ฃ Boolean

WHAT ISโ“ ๋ถˆ๋ฆฐํ˜•์€ ์ฐธ๊ณผ ๊ฑฐ์ง“์„ ๋ฐ์ดํ„ฐ๋กœ ํ‘œ์‹œํ•œ ๊ฒƒ์œผ๋กœ true์™€ false๋กœ ๋‚˜ํƒ€๋‚œ๋‹ค.

  • HOW TO USEโ•โ“ ์ฐธ๊ณผ ๊ฑฐ์ง“์„ ๊ตฌ๋ณ„ ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.
<script>
let myAns = true;
let yourAns = false;
</script>

โ€ฃ Undefined & Null

WHAT ISโ“
-Undefined : ๋ณ€์ˆ˜๊ฐ€ ์ฒ˜์Œ ์„ ์–ธ๋œ ๊ฒฝ์šฐ ์ดˆ๊ธฐ ๊ฐ’์œผ๋กœ undefined, ์ •์˜๋˜์ง€ ์•Š์€ ๊ฐ’์„ ๊ฐ€์ง€๋Š”๋ฐundefined๋Š” ์„ ์–ธ์€ ๋์ง€๋งŒ ์•„์ง value๊ฐ€ ํ• ๋‹น๋˜์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•œ๋‹ค.
-Null : null์€ '๋นˆ๊ฐ’(blank)'์„ ์˜๋ฏธํ•˜๋Š”๋ฐ ์ด๋Š” ํ• ๋‹น๋œ value์ด๋‹ค.

  • HOW TO USEโ•โ“
<script>
console.log(typeof null);       // object, ๊ฐ’์ด ์—†์Œ์ด๋ผ๋Š” ํ• ๋‹น๋œ value์ด๊ธฐ ๋•Œ๋ฌธ์— object๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.
console.log(typeof undefined);  // undefined
</script>

- ์ฐธ์กฐ ํƒ€์ž…

โ€ฃ Array

WHAT ISโ“ ๋ฐฐ์—ด์€ ๋‹ค์–‘ํ•œ ํƒ€์ž…์˜ ๊ฐ’์ด ๋‚˜์—ด๋˜์–ด ๋ชจ์—ฌ์žˆ๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด๋‹ค.

  • HOW TO USEโ•โ“ [], ๋Œ€๊ด„ํ˜ธ์•ˆ์— ์›ํ•˜๋Š” ํƒ€์ž…์˜ ๊ฐ’์„ ๊ฐ ์š”์†Œ์— ๋„ฃ์–ด์ค€๋‹ค.
<script>
let studentsName = ['jamie' , 'minjae' , 'kim'];
</script>

โ€ฃ Object

WHAT ISโ“ ๊ฐ์ฒด๋Š” ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ๋•Œ ํ‚ค(์ด๋ฆ„)์™€ ๋ฐธ๋ฅ˜(๊ฐ’)๋ผ๋Š” ํ”„๋กœํผํ‹ฐ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ชจ์—ฌ์žˆ๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด๋‹ค.

  • HOW TO USEโ•โ“ {}, ์ค‘๊ด„ํ˜ธ ์•ˆ์— ํ‚ค์™€ ๋ฐธ๋ฅ˜ ์Œ์œผ๋กœ ๋ฌถ์—ฌ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค.
<script>
let myObject = {
	name: 'jamie',
    isDeveloper : true;
}
</script>

โ€ฃ Function

WHAT ISโ“ ํ•จ์ˆ˜๋Š” ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ฑฐ๋‚˜ ๊ฐ’์„ ๊ณ„์‚ฐํ•˜๋Š” ๋ฌธ์žฅ ์ง‘ํ•ฉ ๊ฐ™์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ ˆ์ฐจ์ธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด๋‹ค.

  • HOW TO USEโ•โ“ ํ•จ์ˆ˜์€ function ํ•จ์ˆ˜๋ช… (๋งค๊ฐœ๋ณ€์ˆ˜ ๋ชฉ๋ก,...){//ํ•จ์ˆ˜๊ฐ€ ๋‹ด๋‹นํ•  ๊ธฐ๋Šฅ }์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ด ์ •์˜(=ํ•จ์ˆ˜ ์„ ์–ธ, ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๋Š” ๊ณผ์ •)ํ•˜๋ฉฐ ์ด๋ฅผ ํ˜ธ์ถœ(=ํ•จ์ˆ˜๊ฐ€ ๋ฌด์—‡์„ ํ• ์ง€ ์ง€์ •)ํ•˜๊ธฐ ์œ„ํ•ด์„  ํ•จ์ˆ˜๋ช…(๋งค๊ฐœ๋ณ€์ˆ˜ ๋ชฉ๋ก,...) ๊ณผ ๊ฐ™์ด ์“ด๋‹ค.
<script>
funcion myNameFuc() {// ํ•จ์ˆ˜ ์„ ์–ธ
	let name: 'jamie',
	console.log(name)
    return name
}
myNameFunc();// ํ•จ์ˆ˜ ํ˜ธ์ถœ
</script>

*๐Ÿ’กconclusion

๋ณ€์ˆ˜์— ๋Œ€ํ•ด์„œ ๊ทธ๋ฆฌ๊ณ  ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…๋“ค์— ๋Œ€ํ•ด์„œ ์ž˜ ์•Œ์•„๋‘์ž์ž์ž

#๐Ÿ“‘Study Source

  1. weekcode ๊ฐ•์˜ ์ค‘ ๋‚ด์šฉ
profile
์ž๊ธฐ ์‹ ๋ขฐ์˜ ํž˜์„ ๋ฏฟ๊ณ  ์‹ค์ฒœํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€