• 본내용은 코딩앙마 강의를 요약정리한 것입니다.
  • 악마와 함께란? 매력적인 마성을 지니신 코딩앙마 코치님께 돌리는 구독자의 애정표현
    코딩앙마 기초강좌

악마와 함께 코딩을 Javascript 첫번째 코스

01 변수란?

변수란 특정한 이름에 위와 같은 데이터타입을 대입시켜주는 것이다. 어떻게 변수를 선언할까? 두 가지 방법이 있다.

const aa = 123;
let bb = 123;

const는 변수가 변할 가능성이 없을 때 선언하지만, let은 변수가 변할 가능성이 있을 때 선언한다고 생각하면 된다. 변수에 내용이 추가되거나, 생략될 가능성이 있다면 cons보다는 let이 적당하다.

이때, 변수의 명에는 몇가지 규칙이 존재한다.
1) 변수는 숫자와 문자만으로 기록할 수 있다는 것
2) 이때, 첫단어는 무조건 문자로 시작해야 한하는 것
3) 예약어는 사용할 수 없다는 점, 예약어란 javascript의 개발자들이 사전에 사용하기로 선언한 단어들이다.
4) 상수(변하지 않는 값)는 가급적 대문자로 알려줄 것
5) 변수명은 이해하기 쉽게 작성해야 한다는 점

02 데이터타입(자료형)에는 무엇이 있을까?

  • Number : 숫자형은 사칙연산이 가능하다.
  • String : 문자형은 "", 또는 '' 사이에 담아서 기록한다.
  • Boolean : true, false 를 값으로 가지는 자료형이다.
  • Null : 비어있는 자료형을 말한다.
  • undefined : 변수는 선언했지만, 대입연산자(=)로 아무런 값도 대입시키지 않은 자료형을 말한다.

기록된 각각의 변수들의 데이터타입은 typeof를 선언함으로 그 형태를 알아볼 수 있다. 이때, 가장 쉽게 확인하는 방법은 console.log를 이용하는 방법이다. typeof는 내가 선언하지 않은 자료형을 불러올 때 확인할 때 사용한다.

const name = "Edwin";           
console.log(typeof name);       // 결과 : string
console.log(typeof 3);          // 결과 : number
console.log(typeof true);       // 결과 : boolean
console.log(typeof null);       // 결과 : null

03 대화상자 3종세트

alert()

우리가 흔히 보는 사전에 내용이 입력된 경고창을 생각하면 된다.

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

prompt()

사용자로 하여금 어떠한 정보를 입력받는 경고창을 웹브라우저에 띄우는 것이라고 생각하자. 첫번째 코드에 기록된 하나의 인수는 사용자로부터 입력받은 경고창이 띄어질 때, 어떠한 문구를 사전에 기록하여 넣을 수 있는 무엇이다. 두번째 코드에 기록된 두개의 인수 가운데 두번째 인수는, 사용자가 입력할 공간에 기본값으로 기록해 넣을 어떠한 문구를 사전에 작성하여 넣을 수 있는 무엇이다.

prompt("argument1");
prompt("argument1", "argument2");

confirm()

사용자에게 어떠한 내용을 확인을 받을 때 사용한다. 취소와 확인 버튼이 존재한다. 취소를 누르면 웹브라우저는 false를 전달받고, 확인을 누르면 true를 그 값으로 전달받을 수 있다.

confirm("당신은 한국인 입니까?");
confirm("주문 하시겠습니까?");

3종을 사용하면, 스크립트가 일시정지되며, 꾸밀수 없다는 단점이 있지만, 많이 사용된다는 점을 기억하자.

04 자료형의 변환

문자열을 숫자열로 변환하고, 숫자열을 문자열로 변환하는 것과 같은 것이다.

const mathScoer = prompt("수학 점수는 몇점인가요?");
const englishScoer = prompt("영어 점수는 몇점인가요?");
const result = (mathScoer+englishScoer)/2;

이런식으로 전달받은 정보는 기본적으로 "문자형"으로 인식된다. 만약에 사용자가 수학점수로 100을 영어점수로 100을 입력했다면, result="100100"/2이 될 것이다. 우리가 기대하는 200/2이 되지 않는다. 그런데 javascript의 사칙연산은 독특한데 "100100"으로 된 문자열(숫자, 자동형변환)라고 하더라도 이를 숫자로 자동으로 인식하고 계산을 한다는 점이다. 그 결과 result=50050이 될 것이다. 어찌되었던 기대한 평균인 100이 산출되지 않는다는 오류를 가진다. 이러한 결과 때문에 형변환이 필요하게 된 것이다. 방법은 생각보다 간단하다.

String(형변환의대상);
Number(형변환의대상);
Boolean(형변환의대상);

이때 Number(true) 또는 Number(false)를 기록하면, true는 숫자1로, false는 숫자2로 형변환이 이뤄진다는 점에 유의하자. 왜? javascrip가 그렇단다. 여기에 Number(null)은 숫자0, Number(undefined)는 NaN으로 변환된다.

또한 Boolean(형변환의대상)의 경우 숫자0, '' 빈문자열, null, undefined, NaN은 false로 변환하고, 그 외의 값은 전부 true로 변환한다.

그렇다면 위의 성적계산기가 제대로 작동하려면 어떻게 해야할까? 다음과 같이 기록하면 될 것이다.

const mathScoer = prompt("수학 점수는 몇점인가요?");
const englishScoer = prompt("영어 점수는 몇점인가요?");
const result = (Number(mathScoer)+Number(englishScoer))/2;

05 기본 연산자

  • 더하기 : +
  • 빼기 : -
  • 곱하기 : *
  • 거듭제곱 : **
  • 나누기 : /
  • 나머지값 : %
  • 증가연산자 : ++ 1씩증가
  • 감소연산자 : -- 1씩감소

이때 기억할 증가연산자/감소연산자의 특징이 있다. 해당 위치에 따라서 산출되는 것이 다르다는 점이다.

let num = 10;
let num2 = 10++;
let num3 = ++10;

결과를 보면 num2는 10이다. 반면에 num3는 11이다. 변수가 대입연산자(=)를 통해서 대입될 때, ++연산자를 포함하고 있으면, num3가 되는 것이고, ++연산자를 포함하지 않으면 num2와 같은 결과를 얻게되니 사용함에 있어서 유의해야 한다.

06 비교연산자(==, ===, <, >, !=), 조건문(if, else)

비교연산자를 통한 return값은 항상 Boolean형(true, false)로만 산출된다는 점을 기억하자. 이때 등호는 일치연산자라고 한다. ==는 "1"(문자열) == 1(숫자열), 즉 데이터타입이 다르더라도 일치한다고 여기기 때문에, 엄격한 일치연산자인 === 를 사용하여 데이터타입까지 비교하여 일치하는지 불일치하는지 결과를 산출하는 것이 오류를 줄일 수 있는 방법이다.

const age = prompt("나이를 입력하세요.");
const agenum = Number(age);

if(agenum > 19) {
  console.log("성인입니다.")
  } else {
  console.log("성인이 아닙니다.")
  };

prompt로부터 사용자가 성별을 입력할 수 있도록 하였다. 이때 반환되는 문자열이기에, 이를 숫자열로 형변환한 agenum 변수를 통해서 19보다 나이가 많은지, 같거나 적은지에 따라서 출력되는 값을 다르게 하였다. 사용자가 20을 입력하면, "성인입니다"가 콘솔에 기록될 것이고, 10을 입력하면 "성인이 아닙니다"가 콘솔에 기록될 것이다. 만약에 조건을 3가지를 하고 싶다면 if{} else if{} else{} 순으로 코드를 작성하면 된다.

07 논리연산자(AND, OR, NOT)

  • && : and, 둘다 true 일 때 true가 된다.
  • || : or, 하나라도 true이면, true가 된다.
  • ! : not, 값을 변경해준다. true는 false로, false는 true로 말이다.

이때 기억해야 할 것이다. 논리연산자는 AND > OR 보다 먼저 작동한다는 점이다. "예를들어 남자이고, 이름이 Edwin이거나 성인이면" 통과라는 코드를 작성하고 싶다.

const a = "F";
const b = "jiny";
const c = true;

if(a === "M" && b === "Edwin" || c) {
	altet("통과")
} else {};

위의 코드가 있다고 하면, 결과는 "통과"의 경고창이 실행될 것이다. 왜냐하면 이렇게 작동하기 때문이다. (a면서 b)이거나 c인 경우 = true?false 를 묻는것이다. 먼저 작동한다는 점은 결과적으로 (a면서 b)나 c 둘 중에 하나가 참이면 참이라는 결과를 실행한다는 결과이다. 말장난 같지만, 그렇다. 원하는 값을 위해서는 or이 먼저 실행되도록 해야할 것이다.

const a = "F";
const b = "jiny";
const c = ture;

if(a === "M" && (b === "Edwin" || c)) {
	altet("통과")
} else {};

이렇게 하면, (b이거나 c)에서 c가 참이기에 다음 && 로 넘어가는데, A(M)이 아니기 때문에 이 코드는 if문의 내용이 아닌 else문의 내용을 실행하게 될 것이다. 이러한 미표한 차이가 있다는 점에 유의하자.

08 반복문(while, for)

반복문이란 동일한 작업을 여러번 반복할 때 사용된다. 콘솔에 "값?은 다음과 같습니다"라는 코드를 작성하고 싶은데, 값이 5개라면, 5번 반복해야 하는데, 이를 프로그래밍적으로 단순하게 작성하며 이를 실행할 수 있다.

while문

const a = ["값1", "값2", "값3", "값4", "값5"];
let i = 0;
while(i<a.length) {
  console.log(a[i]+"은 다음과 같습니다.");
  i = i+1; 
  };

변수 i의 숫자가 배열a의 길이만큼(.length) 반복하며 실행하는데, 콘솔에 a[i]마다 "a[i]은 다음과 같습니다."를 실행하고, i에 1을 더하여, 정해진 구간만큼 반복하라는 말이다. 그런데 이보다 더 짧게 사용할 수는 없을까? for문을 통해서 이것이 가능하다. ** do while문도 있지만 생략하겠다.

for문

const a = ["값1", "값2", "값3", "값4", "값5"];
for(let i=0; i<a.length;i++) {
  console.log(a[i]+"은 다음과 같습니다.")
  };

while문에 비해서 짧아진 코드인 것을 볼 수 있다. for(let i=0; i<a.length;i++)과 같다. while(let i=0; i<a.length;i++)로 기록할 수는 없을 까? 없다.

break와 continue

break는 특정조건을 충족하면 반복문을 중지하는 코드이다. continue는 특정조건을 충족하면 해당내용을 넘어가지만, 전체의 반복의 조건이 충족되면 그때에서야 반복문을 중지한다.

09 switch

조건문을 사용할 수 있다면, 몰라도 된다? 그러나 그 용례가 있기 때문에 조건문으로 할 수 없는 하기 난해한 조건들을 취급할 때 이를 사용할 수도 있음을 기억하며 알고 넘어가자.

let fruit = prompt("무슨 과일을 사고 싶나요?")

switch (fruit) {
  case '사과':
    console.log("100원 입니다.")
    break;
  case '바나나':
    console.log("200원 입니다.")
        break;
  case '키위':
  case '멜론':  
    console.log("300원 입니다." )     
        break;  
  default :
    console.log("그런과일이 없습니다." ) 
}
 

이런식으로 복잡한 설정이 가능하다. 사용자가 해당하는 과일을 입력하면, 해당과일에 대한 값을 콘솔에 표시해주는 것과 같은 기능을 실행할 수 있다. 그런데 설정한 값에 조건이 부합되지 않으면 어떻게 될까? default로 해당내용을 설정해주면 가능하다. break의 사용이 여기서 구체적인 예로 살펴볼 수 있다. 바나나를 입력하면, 사과는 건너뛰고, 바나나의 값을 콘솔에 표시해 준 뒤, swich문 밖으로 나오게 된다.

10 함수

코드를 작성하다보면, 중복되는 코드를 한 번의 기록으로 사용하고 싶은 욕심이 생긴다. 편의상 한글로 함수명과 매개변수라고 기록했지만, 실제코드에서는 한글을 입력할 수 없다.

function 함수명(매개변수) {
  const msg = `hello ${매개변수}`;
  console.log(msg);
};

함수명('edwin'); 
함수명('tomy'); 

이와 같이 기록함으로 사용할 수 있다. 만약에 매개변수가 없다면 어떻게 될까요? 약간의 처리를 해주면 된다.

function 함수명(매개변수) {
  let msg = `hello`;
  if(매개변수) {
  	msg = `hello ${매개변수}`
  }
  console.log(msg);
};

함수명('edwin'); 
함수명('tomy');
함수명()

그러면 조건에 따라서 edwin -> hello edwin, tomy -> hello tomy, 빈값 -> hello가 콘솔에 기록될 것이다.

msg = `hello ${매개변수}`
msg += ' ' + 매개변수
msg += ` ${매개변수}`

조건문 내의 msg는 +=(연산자)를 통하여 이렇게 간단하게 기록할 수도 있습니다. 이때, 함수 안에 선언된 변수를 "지역변수"라고 한다. 함수밖에서 지역변수를 호출해도 사용할 수 없다는 것, 하나 배우고 넘어가자. 함수밖에서 포괄적으로 사용되는 변수는 "전역변수"라고 불려진다.

function 함수명(매개변수) {
  let newName = 매개변수 || 'friend';
  let msg = `hello ${newName}` 
  console.log(msg);
};

함수명('edwin'); 
함수명('tomy');
함수명()

이렇게도 입력해 볼 수 있다. 만약 함수를 선언할 때 (argument 인자)로 ediwn과 tomy가 선언되었으면, newName에는 해당 인자가 매개변수로 기록될 것이다. 그러나 인자가 기록되지 않았다면, 매개변수 대신 friend가 newName으로 기록되어 콘솔에 기록될 것이다.

function 함수명(매개변수 = 'friend') {
  let msg = `hello ${매개변수}` 
  console.log(msg);
};

함수명('edwin'); 
함수명('tomy');
함수명()


또는 처음부터 매개변수의 초기값(default)으로 'friend'를 설정함으로 작동하게 할 수도 있다.

11 함수선언문과 함수표현식

javascript는 순차적으로 문서를 읽어가며 각 줄을 실행한다.

console.log(num);
let num = 1;

예를 들어 위와 같은 순서로 코드가 작성되었으면 작동하지 않는다. 변수가 나중에 기록되었기 때문이다. 그러나 javascript에서 함수는 이러한 사례에 포함되지 않는다는 것이 특징이다. 이는 javascript의 'hoisting'이라 불리는 특징 때문이다. javascript는 문서를 읽을 때 선언된 함수를 가장 먼저 읽어내기 때문에, 함수가 먼저 호출되고, 함수선언문이 뒤에 있어도 실행된다는 특이한 특징을 가지고 있다.

hey();
function hey() {
  alert("안녕하세요")};

그런데 만약 함수가 변수 안에 담겨 있다면, hoisting에 포함되지 못하기에, 이를 기억하며 사용해야 한다. 아래와 같이 변수에 담겨 있는 함수를 함수표현식이라고 한다. 함수표현식은 함수를 호출하는 위치가 뒤에 등장해야 한다.

let hey = function (parameter1, parameter2) {
	return parameter1+parameter2};
hey()

그런데 함수표현식은 화살표형태로도 기록이 가능하다.

let hey = (parameter1, parameter2)=>{ return parameter1+parameter2};
hey()

return을 생각하고 {}를 ()로 바꿔서 표기할 수도 있다.

let hey = (parameter1, parameter2)=>( parameter1+parameter2);
hey()

return 코드 내용이 한 줄이라면 ()도 생략이 가능하다. 그러나 함수의 내용이 복수의 줄인 경우에는 ()를 생략할 수 없다.

let hey = (parameter1, parameter2)=> parameter1+parameter2;
hey()

매개변수(parameter)가 하나라면 매개변수의 ()도 생략이 가능하다.

let hey = parameter1 => `hello, ${parameter1}` ;
hey()

그러나 매개변수가 없다면, ()를 생략할 수 없다.

let hey = () => {alert('error!')};
hey()

12 Object 객체

const student = {
   key : value,
   key : value,
   key : value,
   }

이와 같이 dictionary형의 우항의 자료가 대입연산자를 통해 좌항에 대입된 변수를 Object 객체라고 부른다. 그리고 이렇게 기록된 하나의 key : value를 property라고 부른다.

1) 객체에 접근하는 방법은 다음과 같다. 방법은 두 가지 인데 하나는 점표기법이고, 다른 하나는 [대괄호]법이다.

const student = {
   name : 'Edwin',
   address : 'Seoul',
   age : 30,
   };
   
student.name;
student['name'];

2) 객체에 내용을 추가하는 방법도 역시 두가지 표현법이 존재한다.

student.point = 30;
student['point'] = 30;

3) 객체에 있는 내용을 삭제하는 방법도 있다.

delete student.point;

4) 객체의 값을 순차적으로 불러오기, for (in) 반복문, 첫번째 콘솔은 키의 값을 가져올 것이고, 두번째 콘솔은 값(value)을 가져올 것이다.

const student = {
   name : 'Edwin',
   address : 'Seoul',
   age : 30,
   };
   
for (key in student) {
   console.log(key);
   console.log(student[key]);
};   

객체를 저장하는 방법에는 함수(매개변수)를 통하여 기록하는 것도 가능하다.

function studentInformation(name, age, number) {
	return {
    name : name,
    age : age,
    number : number
    }
}

let Mike = studentInformation("Mike", 30, "010-0000-0000");
let EdWin = studentInformation("EdWin", 30, "010-0000-0000");
console.log(Mike, EdWin)

그런데 매개변수와 프로퍼티가 동일하기 때문에, 코드의 내용을 아래와 같이 축약하여 같은 결과를 산출할 수도 있다.

function studentInformation(name, age, number) {
	return {
    name,
    age,
    number : number
    }
}

let Mike = studentInformation("Mike", 30, "010-0000-0000");
let EdWin = studentInformation("EdWin", 30, "010-0000-0000");
console.log(Mike, EdWin)

6) 객체의 property 유무 조회하기 in

function studentInformation(name, age, number) {
	return {
    name,
    age,
    number : number
    }
}

let Mike = studentInformation("Mike", 30, "010-0000-0000");
let EdWin = studentInformation("EdWin", 30, "010-0000-0000");
console.log(Mike, EdWin)
console.log('age' in Mike)
console.log('birthday' in Mike)

마지막 코드 2줄이 property의 key의 존재유무를 조회하는 코드이다. age는 있기에 true가 콘솔에 기록될 것이고, birthday는 없기 때문에 false가 뜰 것이다.

그런데 in을 실제예제에서 사용한다는 건 아래의 코드와 같다.

function isAdult(user) {
  if(!('age' in user) || user.age < 20) {
    return "성인이 아닙니다."
  } else {
    return "성인입니다."
  }}

const Mike = {
  name : "Mike",
  age : 30}

const Edwin = {
  name : "Edwin"}

console.log(isAdult(Mike)) 
console.log(isAdult(Edwin)) 

조건문을 읽어보다. if(!('age' in user) || user.age < 20), 20살보다 매개변수의 age가 작거나, 또는 매개변수 안에 age의 값이 없으면 "성인이 아닙니다"를 전달하라는 말과 같이 실행할 때, 이러한 in을 사용한다.

13 객체의 method(function)

method란? 객체에 할당된 function을 말한다. Object는 정보만을 담는 것이 아니라, 하나의 property로 함수()도 담을 수 있다. 이렇게 할당된 함수를 method라고 부른다.

let Mike = {
  name : "Mike",
  age : 30,
  alert : function() {alert(`${this.name}Information-saved`)}};
  
Mike.alert() ;

let Mike = {
  name : "Mike",
  age : 30,
  alert() {alert(`${this.name}Information-saved`)}};
  
Mike.alert();

그런데 객체에 함수를 property로 입력할 때 function을 삭제해도 정상적으로 작동한다. 코드에 기록된 this는 해당 함수가 실행된 최상위의 정보인 Object의 이름을 지칭한다. 그런데 이를 화살표형으로 기록했다면, this를 사용할 수 없다는 한계도 있음을 기억하자. 화살표형의 this는 지역객체가 아니라 전역객체에 접근하기 때문에, 윈도우가 실행될 것이다.

14 배열[Array]

let student = ["student1", "student2", "student3", "student4"];
student.length;
student.push("student5", "student6")
student.unshift("student0")
student.shift()
student.pop()

배열이란 index의 값을 부여하는 변수라고 생각하면 될 것 같다. student1는 index[0], student2는 index[1], student3는 index[2], student4는 index[3]이 된다. 그런데 배열은 이러한 문자열만 안에 가지고 있는 것이 아니라 숫자영, Boolean형, 함수, 객체도 담을 수 있다. .length는 배열에 몇개가 담겨있는지 확인하는 명령이고, .push는 배열 뒤쪽에 내용을 추가하는 명령이고, .unshift는 배열 맨앞쪽에 내용을 추가하는 명령이다. .shift는 배열 맨앞의 내용을 제거하고, .pop은 배열위 맨뒤의 내용을 제거한다.

배열의 길이를 안다는 것은, 반복문으로 for(let i=0; i.student.length;i++)문을 사용할 수 있다는 점이다. 또한 for (of)문도 사용할 수 있다. for(students of student){console.log(students)} 같이 말이다. 그러나 for (of)는 index의 값을 얻을 수 없다는 한계가 있다.

author. EDWIN.
date. 2023/01/27

profile
신학전공자의 개발자 도전기!!

0개의 댓글

Powered by GraphCDN, the GraphQL CDN