기본기부터시작하는 IT생활

저번시간에는 js의 변수선언에대해 알아봤다. 오늘은 변수의 들어가는 자료의 타입에대해 알아보고자 한다.

JavaScript의 자료형

• JavaScript의 대표적인 자료형은 아래와 같다.

1. Number
2. String
3. Boolean
4. Undefined
5. Null

Number 타입

• 프로그래밍에서 흔히 쓰이는 숫자의 개념이다. 하지만 사용할때 한가지 유의사항이 있다. 유의사항은 아래 예제를 통해 알아보자

let score = 80;

let test = score + "10";
console.log(test) // 결과값: 8010

먼저 score 라는 변수에 80 이라는 값을 넣으면 score은 자동적으로 Number 타입의 값이 들어간다. 하지만 그 아래 test에서 80 이라는 숫자에 10 이라는 문자를 더했다. 그러자 test의 값이 8010 이라는 문자열이 되었다. 이것이 Number 타입을 사용함에 있어서 유의해야할 점이다. 즉, 다시말하면 js의 암시적 형변환은 간편함에 있어 큰 장점이 있지만 위와 같이 의도치 않게 형변환이 일어날 수도 있다. 이점 알아두자.

String 타입

• String 타입은 쉽게 말해 문자열이다. 이러한 String 타입은 텍스트 형태로 표현할 수 있는 데이터를 보관하는데 유용하다. 

let name = "YHS";
let mail = "gomboy03@gmail.com";

let longString = "기본기 부터" + "시작하는 " + "IT생활";

위의 예제를 보면 텍스트 형태로 표현할 수 있는 데이터의 예시가 좀 이해가 될것이다. String 타입은 이러한 데이터를 보관하는데 있어 많이 쓰이고 있다.

Boolean 타입

• Boolean 타입은 간단하다. true 아니면 faulse 둘 중의 하나의 값을 가진다. 사용 예시는 아래와 같다.

let check = new Boolean(true);

function isTrue(check){
	console.log("Work!");
}

isTrue(check);  // Work! 출력

보통 Boolean 타입은 참과 거짓의 판별로 작동하는 if, while 문등에서 많이 사용된다.

Undefined 와 Null 타입

• undefined 와 Null 타입은 서로 비슷하므로 한번에 알아보도록 하겠다. 둘은 아직 데이터가 없다는 것에서 동일하지만 그 쓰임새에 있어서 차이점이 있다. 아래 예제를 통해 알아보자.

let name;
console.log(name); // undefined 출력

let score = null;
console.log(score); // null 출력

name 변수는 그저 선언만 해두었다. 그리고 이를 출력해본 결과 undefined 가 출력되었고 score에는 직접 Null 을 넣어주니 Null이 출력이 되었다. 이 둘의 차이점을 더 자세히 풀어보면 undefined 와 Null의 차이점은 아직 미정이냐 안쓸것이냐의 차이인것이다. 예를 들어 내가 고객님에게 정보를 입력시키는 프로그램을 만들고자 할때 입력할 정보에 대해서는 변수의 선언이 필요할것이다. 하지만 이 값들을 내가 채울 순 없다. 따라서 이는 변수만 선언해두고 추후에 고객님이 정보를 입력했을때 변수에 저장되도록 할 수 있다. Null 로 지정한 값도 추후에 재할당이 가능하지만 근본적인 의미에서 둘은 차이점을 가지고 있다.

변수 선언

• 우선 자료형에대해 알기전에 변수를 선언하는 법부터 알아야한다. 코딩을 처음 접한 사람이라면 변수 선언이라는것이 무엇인지 감이 잘안올것이다. 변수란 데이터를 저장하기 위한 공간이다. 따라서 변수를 선언한다는것은 데이터를 저장하기위한 공간을 마련한다는것과 같다. 그렇다면 이러한 변수 선언은 어떻게 할까. 변수 선언 방식은 아래와 같다.

var 변수명 = 값;
var score = 90


let 변수명 = 값;
let i = 0;

const 변수명 = 값;
const Maximum_Num = 10;

위의 예제는 양식과 예시이다. 위 예제를 보면 한가지 궁금증이 생길것이다. var, let, const 이것들은 무엇인지 하고 말이다. 우선 결론부터 말하면 let 과 cosnt 를 사용해 코딩을 하는것이 좋다. 이제 이 셋의 차이점을 하나씩 설명해보고자 한다.

var이란?

• var은 'variable(가변적인)' 의 약자이다. 이뜻을 알면 이해하는데 편할것이다. var, let, const의 차이점은 재선언과 재할당의 가능여부에 있다. 재선언과 재할당이 무엇이냐. 아래의 예제로 설명하겠다.

var score = 90; //변수 선언
var score = 80; //변수 재선언
score = 70; //변수 재할당

우선 score 라는 이름의 변수를 선언한다. 그리고 var을 이용하여 다시 score라는 변수를 선언한다면 그것이 재선언이다. 그리고  var 없이 score의 값만 바꾸는것이 재할당이다. var을 이용한다면 위 세가지 모두가 가능하다. 그렇다면 다음으로  let을 알아보자.

let이란?

• let의 가장 큰 특징은 지역변수라는 점과 재선언이 불가능하다는 점이다. 아래의 예제로 알아보자.

let score = 90; // 변수 선언
let score = 80; // 에러-변수 재선언 불가능
score = 70; // 변수 재할당 가능


let x = 1;
if(x == 1){
	let x = 2;
	console.log(x);  // 2출력
}
console.log(x);  // 1출력

let의 재선언이 불가능하다는 뜻은 위의 예제와 같이 이미 한번 let으로 선언된 변수는 다시 let으로 선언이 안된다는 것이다. 그리고 지역변수라는 것은 그 뜻 그대로 지역안에서만 사용할 수 있는 변수라고 생각하면 된다. 이를 쉽게 설명하기 위해 위와 같은 예제를 작성했다. 필자는 x라는 이름의 변수를 선언하고 그 값을 1로 지정해주었다. 그리고  if문에서는 x의 값이 1이라면 let을 통하여 x를 재선언하고 2라는 값을 주었다. 여기서 의문이 들것이다. 분명 필자는 let은 재선언이 불가능하다고 했는데 어째서 x는 재선언이 가능한것일까. 답은 let이 지역변수라는 점에 있다. 쉽게 말해 처음 선언되었던 x와 if문 안에 있는 x의 지역이 다르다는 것이다. 위 근거로 if 문 안에서 console.log(x) 는 2라는 값을 출력하지만 if문 밖에서의 console.log(x)는 1이라는 값을 출력한다. 다시 말해 let은 지역변수로 if문 안에 있는 x가 if문 밖에 있는 x에게 영향을 줄 수 없다는 것이다.

const란?

• const는 'constant(변함없는)'의 약자이다. 이는 말그대로 변수로 선언된 이후 변함이 없다는 뜻이다. 아래의 예제를 통해 알아보자.

cosnt pie = 3.14 // 변수 선언
const pie = 2 // 에러 - 변수 재선언 불가능
pie = 1 // 에러 - 변수 재할당 불가능

위의 예제를 보면 const로 선언된  pie의 경우 선언되 이후로 값을 변경하려고 하면 전부 에러가 난다. const는 이러한 특징을 가지고 있다. 쉽게 말해서 상수의 개념을 가지고 있다고 생각하면 된다. 이러한 특징덕분에 코딩에서  const가 많이 사용된다. 그럼 이를 코딩에서는 어떻게 활용할까. 아래의 예제를 보자.

const PIE = 3.14;

function CalCircleArea(radius){
	return Maht.pow(radius,2)*PIE;
}

let circleArea = CalCircleArea(3);

위의 예제는 원의 넓이를 구해주는 함수를 작성한 예제이다. 이 예제에서 눈여겨 봐야할 점은 변하지 않는 수인  pie를 const 로 선언했다는 것이다. 이를 const로 선언할때 장점은 나중에 코드가 복잡해져도 값이 변할 우려가 없다는 점과 만일 pie를 수정해야하는 일이 발생했을때 모든 코드에서 pie의 값을 수정하는게 아니라 const로 선언된 pie의 값만 수정하면 된다는 간편함에 있다. 또한 cosnt 변수를 선언할때 변수명은 주로 대문자로 선언하니 이점 주의 바란다. 참고로 Math.pow(radius,2) 의 뜻은 radius(왼쪽) 을 2(오른쪽) 번 제곱한다는 뜻이다. 만일 이를 Math.pow(3,2)로 작성하면 값은 9가 된다.  마지막으로 변수를 선언할때의 주의점을 알아보고 글을 마치자.

변수 선언할때 주의점

• 변수 이름을 만들때 몇가지 규칙이 있다. 이러한 규칙이 있는 이유는 코딩은 주로 여러사람이 함께 작업하므로 서로 이 변수가 어떤 의미를 가지고 있는 변수인지를 쉽게 알아보기 위해 규칙이 존재한다. 규칙은 다음과 같다

1. 단어를 연결할때 첫글자를 대문자로 해야한다.(카멜(camel) 표기법)
2. 변수명의 첫글자는 영문자, 달러($), 언더바(_) 만 올 수 있다.
3. 변수는 자바스크립트의 예약어가 아니어야한다.

※사진 참조: https://ko.wikipedia.org/wiki/%EC%B9%B4%EB%A9%9C_%ED%91%9C%EA%B8%B0%EB%B2%95

Java Script 란?

• Java Scipt는 객체지향 프로그래밍 언어로 주로 프론트엔드 쪽에서 HTML 과 CSS와 같이 사용되는 언어이다.

그렇다면 객체지향 프로그래밍 언어는 무엇일까.

• 객체지향 언어는 말그대로 객체를 지향하는 언어이다. 더 자세히 풀어보면 객체란 우리 주변에 있는 물건들, 즉 유리잔이나 핸드폰과같이 독립적으로 존재하는 것을 객체라 한다. 이러한 객체를 지향한다는 뜻은 프로그래밍을 할때 코드, 함수들을 사용해 하나의 객체로서 상호작용하게 한다는것이다. 우리주변에서 흔히 볼수 있는 예시로는 컴퓨터가 있다. 컴퓨터는 그래픽카드,CPU 등의 제품들이 각각 독립적으로 존재하지만 이들은 서로 상호작용을 하여 컴퓨터를 작동시킨다.이처럼 프로그래밍을 할때 다수의 객체를 만들고 이들의 상호작용으로서 원하는 결과를 도출하도록 하는 방식이 객체지향 프로그래밍 언어이다.

그렇다면 객체지향 언어의 특징에는 무엇이 있을까.

• 객체지향 언어에는 크게 4가지의 특징이 있다. 

1. 캡슐화
2. 상속
3. 다형성
4. 추상화

캡슐화란?

• 캡슐의 정의는 '가루나 액체, 그 외 기타 등등 내용물을 고체를 이용해 포장한 형태' 이다. 그리고 캡슐화의 정의는 '객체의 속성(data fields)과 행위(메서드, methods)를 하나로 묶고,실제 구현 내용 일부를 내부에 감추어 은닉한다.' 이다.'  이를 해석하면 하나의 객체를 생성할때 기본정보를 선언해두고 이러한 정보들을 외부로부터 감춘다는 뜻이다.예를 들면 고객객체를 생성한다 했을때 고객의 정보인 ID,PW,고객번호등의 정보를 선언해두고 이러한 정보를 내부에 감춘다는 것이다. 이러한 캡슐화를 쓰는 이유는 우리가 여러개의 객체를 사용할때 코드의 중복을 피하고 내부에서 데이터를 처리하기 위해서 이다. 캡슐화를 썼을때의 장점과 자세한 설명은 추후에 예제와 함께 다시 자세히다루고자 한다.

상속이란?

• 우리는 보통 태어날때 부모님의 유전자를 물려받는다. 유전자에는 신체적 특징이 담겨져있는데 이 개념과 동일하다. 부모클래스로부터 어떠한 규격,특징을 물려받는것을 상속이라 한다. 이러한 상속을 쓰는 이유는 코드의 재사용에 있다. 예를 들면 내가 고양이 클래스와 강아지 클래스를 만들고자 할때, 이둘의 공통점인 다리의 개수와 눈,코,입의 유무들을 하나의 클래스로 만들어놓고 고양이클래스와 강아지 클래스는 이를 상속받고 값만 수정하는것으로 쉽게 코드를 작성할 수 있다. 보기엔 번거로워보일지 몰라도 만들고자하는 동물의 개수가 많으면 많을수록 이 상속의 개념은 빛을 발할것이다. 이와 관련한 예제와 자세한 설명은 추후에 다시 다루고자 한다.

다형성이란?

• 다형성의 정의는 ' 프로그램 언어 각 요소들(상수, 변수, 식, 객체, 메소드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다.' 이다. 이를 쉽게 말하면 하나의 객체가 여러개의 객체로 재구성되는것이다. 예시로 내가 고양이클래스와 강아지클래스를 만들어 각각 울음소리를 내는 함수를 구현하고자 할때, 그저 울음소리내는 함수를 상속받으면되는거 아닌가 생각할 수 있다. 하지만 동물들마다 울음소리가 각각 다 다르기 때문에 함수를 하나로 통일하지 못한다. 이때 울음소리 함수를 상속받고 각각 클래스에서 그 값만 수정해준다면 얘기는 달라진다. 이처럼 하나의 객체로 여러개의 객체에서 사용할수있도록 한것이 다형성이다. 이와 관련한 예제와 자세한 설명은 추후에 다시 다루고자 한다.

추상화란?

• 추상화는 간단히 말해 여러가지 사물이나 객체에 관해서 공통적인 특성이나 속성을 추출하는 것이다. 예시를 들면 고양이와 강아지의 공통점으로는 4족보행과 눈,코,입 등을 추출하는것이다. 이와 관련한 예제와 자세한 설명은 추후에 다시 다루고자 한다.

끝으로 객체지향 언어의 장점과 단점을 소개하면서 첫글을 마무리하려한다.

장점

1. 상속을 통해 코드를 재사용할 수 있다.
2. 오류가 났을때 객체별로 수정해주면 되기때문에 유지보수가 좋다.

단점

1. 개발속도가 느리다.
2. 실행속도가 느리다.
3. 각 객체에대해 이해해야하기 때문에 난이도가 높다.