JavaScript - 변수, 조건문

학원 교육을 이수중인데 자바스크립트 객체에 대한 모호함때문에 자바스크립트를 정리해보고자 한다. 본 포스트는 지난해 말에 Udacity에서 들었던 Intro to JavaScript로 공부한 부분을 정리했다. 당시 Object에 대한 부분을 듣지 못하고 어영부영 끝냈는데, 이번 기회에 끝까지 이수하려고 한다.

Udacity 강의와 인사이드 자바스크립트를 참고하여 정리했다.

목차

• Intro to JavaScript
• Variables
  • Null & Undefined
  • Equality
• Conditional
  • The list of False value
  • Ternary Operator
• Loop & Array

Intro to JavaScript

자바스크립트는 Firefox, Safari, Chrome같은 브라우저에서 작동하는 언어이다.

웹의 3대 언어로 HTML, CSS, Javascript가 있는데 HTML과 CSS가 정적인 언어라면, 자바스크립트는 동적인 언어라고 할 수 있다. 애니메이션과 같은 효과, 사용자의 행동에 따른 이벤트 등의 기능을 다룬다.

자바스크립트의 아빠, Brendan Eich.

이름때문에 Java와 혼란스러울수도 있지만, 자바스크립트와 Java는 전혀 무관한 언어이다. 자바스크립트는 1995년 Brendan Eich가 만들었는데, 원래 초창기 Eich가 개발한 언어의 이름은 LiveScript였다고 한다. 그러나 당시 잘 나가던 언어인 Java의 인기에 편승하고자 이름을 지금의 JavaScript로 바꿨다고 한다. (piggyback 전략)

Variables

자바스크립트에서는 모든 변수를 데이터타입에 상관없이 var로 선언한다. 이를 느슨한 데이터 타입(Loosely data type)이라고 한다.

그러나 모든 변수를 var 로 선언한다고해서 모든 변수의 데이터 타입이 똑같은건 아니다. typeof 라는 연산자를 이용하여 확인해보면 다음과 같다.

var exNum = 123;
var exString = "javascript";
var exNull = null;
var exUndefined;
var exBoolean = true;

typeof exNum;				// number
typeof exString;		// string
typeof exNull;			// null
typeof exUndefined;	// undefined
typeof exBoolean;		// boolean

아마 자바스크립트 엔진이 데이터를 자동 분류하는게 아닐까 싶다. 이부분은 나중에 더 공부해보고 보충하는걸로..

자바스크립트의 데이터 타입은 크게 **기본 타입(숫자, 문자, 비교, undefined, null)**과 **참조 타입(객체)**으로 나뉜다. 5가지 기본타입을 제외하면 자바 스크립트는 모든 것이 객체로 구성되는 언어라고 할 수 있다.

Null, Undefined

• null : 아무런 값이 없지만 데이터가 존재하는 상태
• undefined : 아무런 값이 없고, 데이터가 존재하지 않는 상태

null과 undefined는 둘 다 값이 없다는 점에서 같다고 착각할 수 있다.
실제로 == 연산자를 이용하여 둘을 비교하면 같다고 출력된다. 그러나 엄격한 비교 연산자 === 를 이용하면 다르다고 출력된다.
비교 연산자에 대한 설명은 아래 이어진다.

정리하면..

datatype	description
null	- 아무런 값이 없지만 데이터가 존재하는 상태 - value of nothing
undefined	- 변수는 선언되었지만 초기값조차 선언되지 않은 아무런 값이 없는 상태 - absence of value

자바스크립트의 변수 중에서도 기본타입에 대해서만 정리해보았다. 사실 자바스크립트의 변수에 대한 공부는 더할 필요가 있어 보인다. 하지만 현재 필요한 부분은 아니므로 일단 여기까지만 알고 넘어가겠다.

Equality

변수와 변수를 비교한다고 가정할 때, value만 비교한다면 == 으로 비교할 수 있지만, 이 방법은 옳은 방법이라고 할 수는 없다. 데이터 타입까지 엄격한 비교 기호로 ===를 쓸수 있는데, 이 방법으로 해야 모호함을 피할 수 있다.

예로 위에서 null과 undefined를 비교할 때 어떤 연산자를 쓰느냐에 따라 다른 boolean값이 출력됨을 알 수 있었다. 이와 비슷하게 number 타입 1과 boolean 타입 true 를 비교시, 어떤 동등 연산자를 사용하느냐에 true를 출력하기도, false를 출력하기도 한다. 하지만 엄밀히 비교한다면 당연히 false가 출력되어야 한다. 때문에 === 를 기본적으로 사용하고 특수한 경우에만 == 를 사용하는 습관을 들여야 할 것같다.

Conditional

Java와 마찬가지로 자바 스크립트에서의 조건문도 코드 스타일이 거의 비슷하다.

알아둬야할 부분만 정리해보았다.

False 값을 반환하는 조건

1. false를 갖는 boolean 값
2. null 타입
3. undefined 타입
4. number 타입의 0
5. String 타입의 “”
6. NaN

당연히 위 6가지 조건이 아닌 모든 조건은 true가 된다. 이를 활용하여 조건식을 만들면 된다.

Ternary Operator

Java에서도 사용했던 삼항 연산자인데 익혀두면 좋아서 다시 정리해본다.

conditionals ? (if its true) : (if its false); 형태로 구성된다.

이항 연산자만을 사용한 조건문과 같은 조건을 삼항 연산자로 사용했을 때의 코드를 비교해보자.

var isGoing = true;
var lightColor;

// 이항 연산자 사용
if(isGoing){
  lightColor = "green";
} else {
  lightColor = "red";
}
console.log(lightColor);	// green

// 삼항 연산자 사용
isGoing ? lightColor="green" : lightColor="red";
console.log(lightColor);	// green

똑같이 green을 출력했는데, 어떤게 더 간단해 보이는가?

Loop & Array

자바스크립트에서 반복문과 배열은 Java와 다른게 없어보인다. 향후 자바스크립트를 더 깊히 공부한다면 그 때 정리해보겠다.