안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
첫 내용은 javascript 2편입니다.
objects
object는 기존의 array 업그레이드 버전입니다.
앞서 공부한 array는 딱희 의미에 대한 설명이 필요없는 리스트 정리에 유용했습니다.
예를 들면
한 주의 요일
1년의 각 월
대한민국의 광역시
등이죠.
object는 다른 모습을 보여줍니다.
각각의 객체가 다르고, 구별지어야 하며, 설명이 필요한 경우.
이럴때 object를 사용하는거죠.
예시를 보겠습니다.
전 대작 RPG게임을 만들어 볼거에요.
playerName = "DH"
playerLever = "6"
playerMoney = "10"
playerKill = "0"
playerLogin = "false이 정보들을 기존 방식대로 정리해볼까요?
const playerName = "DH";
const playerLever = "6";
const playerMoney = "10";
const playerPlaytime = "0";
const playerLogin = "false";
console.log(playerName);
console.log(playerLevel);
.
.
.
.
.음...
한도끝도 없겠네요.
그럼 array로 정리해봐요!
const player = ["DH", 6, 10, 2, false];
console.log(player);정리하기 아주 편해요.
하지만 문제가 있습니다.
DH가 뭔지, 6이란 숫자가 뭘 뜻하는지.
false는 어떤 내용이 false인건자.
그 외 다른 내용들은 도대체 뭔지.
그냥 하나의 리스트에 나열되있기만 할 뿐 정보가 없어요.
그래서 object가 등장합니다. : )
const player = {
name: "DH",
level: 6,
money: 10,
playtime: 2,
login: false,
};
console.log(player);
console.log(player.login);const를 사용했는데 뭔가 css같은게 추가되었네요.
앞서 봤던 const.xxx("xx", yy);
의 방식은 공통적인 주제를 가진 리스트라고 보면 됩니다.
하지만 저렇게 작성한 object는 각각의 고유값이 정해져있어요.
DH는 플레이어 네임, 6은 레벨 등이죠.
이제 저 결과를 한번 보겠습니다.
마지막에 작성한 플레이어 로그인도 잘 나와요.
그런데 우리는 게임을 하다보면 레벨업이라는걸 합니다.
플레이타임도 늘어나고, 돈도 많아질거에요.
그래서 정보를 업데이트 해주기로 결정했습니다.
const player = {
name: "DH",
level: 6,
money: 10,
playtime: 2,
login: false,
};
console.log(player);
console.log(player.login);
player.name = "Wow";
player.level = 20;
player.money = 400;
player.playtime = 13;
player.login = true;
console.log(player);
console.log(player["login"]);제일 하단에 있는 코드는 상단 player.login과 같은 코드입니다.
접근하는 또 다른 방식을 사용한거에요.
어쨋던 이름도 근사하게 바꿔줬는데, 다 수정하고 나서 생각난게 있어요.
앞서 우리는 const의 값은 수정이 불가능하다고 했습니다.
그렇다면 저 수정한 값의 결과는?!
?????????
바뀌었습니다.
이유가 무엇일까요?
바로 우리가 수정한 부분이 "object"부분이기 때문입니다.
즉, const.player에서 player 자체는 수정이 불가능하다지만,
player라는 object 내용을 수정하였으므로, 값이 변했다고 볼 수 있습니다.
만약 제가 틀린 내용이 있다면 꼭 짚어주시길 바리겠습니다.
그럼 새로운 컨텐츠를 추가하고 싶을 땐 어떻게 해야하나요?
const player = {
name: "DH",
level: 6,
money: 10,
playtime: 2,
login: false,
};
console.log(player);
player.job = "marine"
player.playtime = player.playtime + 10
console.log(player.playtime);새로운 코드가 보입니다.
player.playtime = player.playtime + 10
인데요.
직업을 10시간동안 고민하며 플레이타임이 10시간 추가되었습니다.
내용을 업데이트할 때 저렇게 할 수 있다는 걸 보여드리기 위해 넣어봤어요.
초기값을 유지하고 업데이트 결과만 바뀌기 때문에 추후 유지보수 측면에서는 더 좋아보입니다.
여튼 10시간을 고심하고 결정한 직업이 해병이라니...
결과를 볼게요.
내용이 업데이트 된 걸 보실 수 있습니다. : )
function
다음으로 배워볼 내용은 function입니다.
그럼 function은 뭘까요?
간단하게 정의하자면,
계속 반복해서 사용할 수 있는 코드 조각이라고 볼 수 있습니다.
...무슨말이지
예시를 보죠.
console.log("Aloha! My name is DH!")
console.log("Aloha! My name is AB!")
console.log("Aloha! My name is CD!")
console.log("Aloha! My name is 78!")
.
.
.
.
.다양한 이름을 나열하니 복붙이 한도끝도 없어요.
가만히 보면
console.log("Hi. My name is")까지는 동일한 내용이잖아요?
맨 뒤에 이름만 변하고 있어요.
그리고 목표는, 인사를 하고 있는 것이에요.
function sayHi() {
console.log("Aloha!");
}list와 array를 만들 때 []가 쓰였듯이,
function은 ()가 사용됩니다.
그리고 function이 실행에 필요한 코드블럭 {}도 뒤를 이어 삽입되요.
say Hi를 실행 시킬때마다,
실행 버튼을 누를 때마다,
Aloha!라는 텍스트가 실행되는것이죠.
function을 실행하는 방법은 () 이 소괄호입니다.
2번 실행시켜볼까요?
function sayHi() {
console.log("Aloha!");
}
sayHi()
sayHi()
알로하!
그런데 우린 애초에 무지성으로 인사를 할 것이 아니었어요.
console.log("Aloha! My name is DH!")
console.log("Aloha! My name is AB!")
console.log("Aloha! My name is CD!")
console.log("Aloha! My name is 78!")이렇게나 다양한 이름이 있으니까요.
그래서 우리는 인수,
argument를 내보내야 합니다.
argument는, 우리가 function을 실행할 때 어떠한 정보를 function에 보내는 역할을 합니다.
우리는 이미 앞서 이 과정을 해봤어요.
console.log(player);console.log 뒤에 ( ) 이 부분.
이 부분이 바로 function입니다.
즉, 이미 우리는 ( )를 입력하면서 이미 function을 실행시키고,
( ) 안에 뭔갈 입력하며 해당 데이터를 보내는법 까지는 알아요.
(물론, console.log("blabla");는 입력한 blabla를 그대로 출력합니다.)
즉, 우리는 function 본체에서 어떻게 표현해야 할 지 모르는게 가장 큰 문제네요.
function sayHi() {
console.log("Aloha! My name is boom!");
}
sayHi("DH");
sayHi("AB");
sayHi("CD");
sayHi("78");
열심히 이름 데이터를 보냈지만,
반영되지 않고 boom boom 계속 폭팔하고 있어요.
우리는 boom을, DH 혹은 AB 혹은 CD 등 다양하게 바꿔줘야 합니다.
보내기는 알았으니, 받는 방법을 알아볼 차례가 됐습니다.
function sayHi(NameOfMyFreind) {
console.log(NameOfMyFreind);
}
sayHi("DH");
sayHi("AB");
sayHi("CD");
sayHi("78");function sayHi() 뒤엔 문자, variable 등 어떠한 값을 넣어도 됩니다.
function sayHi(NameOfMyFreind)를 해석하면, function sayHi의 첫번째 데이터가 NameOfMyFreind라는 첫번째 variable로 간다는 것을 뜻합니다.
이후 저는 console.log(NameOfMyFreind)를 실행시켜줬습니다.
sayHi(이름)의 값들이 전부 출력되었어요!
여기서 인수, arugment는 꼭 하나가 아니어도 됩니다.
function sayHi(NameOfMyFreind, age) {
console.log(NameOfMyFreind, age);
}
sayHi("DH", 22);
sayHi("AB", 33);
sayHi("CD", 44);
sayHi("78", 55);여기서 NameOfMyFreind와 age는 저 한개의 function 안에만 존재하는 값입니다.
결과를 볼까요?
옆에 나이가 이쁘게 출력되었습니다.
그런데 우리는 각자 인사말을 다르게 하기 위해 이 코드를 작성하기 시작했어요.
function sayHi(NameOfMyFreind, age) {
console.log("Aloha! My Name Is " + NameOfMyFreind + "." + " And I'm " + age);
}
sayHi("DH", 22);
sayHi("AB", 33);
sayHi("CD", 44);
sayHi("78", 55);NameOfMyFreind와 age의 데이터를 정해줬으니, 필요한 텍스트를 포함해 인사를 해보도록 하겠습니다.
제가 원하는 대로 출력되었습니다.
주의할 점은, function 내부에는 2개의 데이터만 입력이 가능하다는 점입니다.
3개를 입력할 경우 어떻게 나오는지 볼까요?
function sayHi(NameOfMyFreind, age, location) {
console.log(NameOfMyFreind, age, location);
}
sayHi("DH", 22, Seo);
sayHi("AB", 33, Seo);
sayHi("CD", 44, Bus);
sayHi("78", 55, Gwa);
보기 싫은 오류화면이 뜨네요.
저는 초보라 아직도 헷갈리니, 다른 예시를 해보겠습니다.
function multiplication(a, b) {
console.log(a * b);
}
multiplication();전 산수를 잘 못해서 계산기를 만들어보려 합니다.
저 예시를 출력하면 어떻게 나올까요?
난?
NaN?
Not a Number의 약자입니다.
오류에요.
즉, multiplication()로 실행은 시킬 수 있지만, 무언가 데이터를 주고받아야 할 것 같습니다.
function multiplication(a, b) {
console.log(a * b);
}
multiplication(32, 65);fucntion의 a와 b는 원하는 이름으로 바꾸셔도 됩니다.
c, d, 등등...
다만, 순서는 아주 중요합니다.
예제에서는 32가 a, 65는 b가 됩니다.
결과를 볼게요.
짠. 수포자를 위한 계산기가 완성되었습니다.
function multiplication(a, b) {
console.log(a * b);
}
function devide(c, d) {
console.log(c / d);
}
multiplication(32, 65);
devide(24, 71);
멋진 계산기가 완성되었습니다. : )
만약 a를 바깥에서 실행시키면 어떻게 될까요?
function multiplication(a, b) {
console.log(a * b);
}
console.log(a);
function devide(c, d) {
console.log(c / d);
}
multiplication(32, 65);
devide(24, 71);이렇게요.
여지없이 오류가 납니다.
즉,
a와 b는 multiplication function 내부에만 존재하는 데이터이고,
c와 d는 devide function 내부에만 존재하는 데이터이므로,
외부에서 실행시킬 시 오류가 납니다.
지금까지 배워본 것들을 다 넣어볼게요.
const player = {
name: "DH",
sayHi: function (otherUser) {
console.log("Aloha! " + otherUser + "." + " Nice to meet you! : )");
}
}
console.log(player.name);
player.sayHi("AB");해석해보자면,
- player라는 object를 만들었습니다.
- player의 이름은 "DH"입니다.
- 그리고 project 내부에 "sayHi"라는 function을 만들어줬어요.
- "sayHi"라는 function이 외부에서 데이터를 받아올 곳은 "othre user"입니다.
- 그래서 우리는 "Aloha! " + otherUser + "." + " Nice to meet you! : )"라고 DH가 AB에게 인사하도록 명령했어요.
결과는?
빵끗 웃으며 인사합니다.
여러명에게 인사하도록 해볼게요.
const player = {
name: "DH",
sayHi: function (otherUser) {
console.log("Aloha! " + otherUser + "." + " Nice to meet you! : )");
}
}
console.log(player.name);
player.sayHi("AB");
player.sayHi("CD");
player.sayHi("EF");
player.sayHi("12");
정리
- 항상 const, 가끔 let, 금지 var
variable은 2가지가 존재합니다.
const와 let이죠.
const의 값은 수정이 불가능합니다.
만약, variable의 값을 업데이트하고 싶다면 let을 사용해야죠.
단, 규칙이 있습니다.
(1) 항상 const를 사용하되, 가끔 필요하면 let을 사용할 것.
const a = true;
a = false;
console.log(a);
업데이트가 필요하니, let을 사용합니다.
let a = true;
a = false;
console.log(a);
(2) var를 사용하지 말 것
var는 구형입니다.
즉, var와 let은 같은 의미이지만,
var를 사용하면 let과 const를 구별할 수 없게 됩니다.
-
boolean
숫자와 문자 외에 다른 값들도 존재합니다.
바로 true와 false입니다.
이들은 문자가 아니죠. 우린 boolean이라고 배웠습니다. -
Another value
true와 false와는 다른 개념이 존재합니다.
null이라는 값인데요.
비어있는 값을 의미합니다.
즉, 추후에 다른 것을 채울 수도 있다는 의미가 될 수도 있고,
공백을 강조하고 싶을 때 사용할 수도 있습니다.
정의되지 않은 값과 전혀 다른 의미로, 아무것도 없는 것으로 가득 채웠다는 의미입니다.
undefined도 존재합니다.
이는 변수(variable)에 아무 값을 지정하지 않은 상태이죠.
정의되지 않은 값입니다.
let hello = null;
console.log(hello);
let hello;
console.log(hello);- array
우리는 특정한 의미가 없는 것들을 정리해야할 필요가 있습니다.
그럴 때 array를 사용합니다.
대괄호 내부엔 어떠한 값도 들어갈 수 있습니다.
또한, 컴퓨터는 0부터 계산합니다!
아래 예시에서는 3이 출력되겠죠.
const me = "Wow";
const list = [true, "hi", 3, false, null, me]
console.log(list[2]);업데이트와 추가 또한 가능합니다.
const me = "Wow";
const list = [true, "hi", 3, false, null, me]
console.log(list);
list[2] = 1;
console.log(list);
list.push("computer");
console.log(list);
- obejct
array를 사용한 리스트는 공통점이 있습니다.
한 주의 요일을 정리할 땐 유용하겠네요.
하지만, 각자의 값이 필요한 경우 object를 사용합니다.
역시나 업데이트, 추가, 특정한 값만 출력하는것도 가능합니다.
const player = {
name: "DH",
age: 22
};
console.log(player);
player.name = "HDDH";
console.log(player);
player.money = 20
console.log(player);
- function
어떤 코드를 캡슐화해서 계속해 사용할 수 있게 해줍니다.
특정 입력값을 바탕으로 반복 또 반복이 가능해요.
하나의 함수로 여러가지 일을 하기 위해 사용합니다.
순서에 주의해 사용합니다!
function plus(Fox, Dog) {
console.log (Fox + Dog);
}
plus(2, 5);
plus(5, 2);
/*
윗줄은 Fox=5, Dog=2입니다.
둘쨋줄은 Fox=5, Dog=2입니다.
최종값은 7로 같지만, 순서가 달라진 경우이므로 순서에 유념해 사용해야 합니다.
*/