[자바스크립트] 변수, 주석, 자료형, 연산자

자바스크립트 소개

• ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
• 뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시되었다.

 

script 태그 사용

• 태그의 위치가 중요합니다.
• html 태그 아래에 위치하는 것이 좋습니다.

 

변수

• 데이터를 담아 놓기 위한 공간입니다.
• var num = 10 + 20;
• var은 키워드, num은 식별자, =은 대입 연산자, 10+20은 표현식이며 표현식의 값은 30입니다.

키워드

어떤 역할이나 기능이 정해진 특별한 단어

식별자

변수, 함수 등에 부여되는 이름, '변수명'이라고도 합니다. 키워드는 식별자로 사용 불가합니다.

식별자 명명 규칙

키워드 사용 불가, 공백 포함 불가, 한글 불가, 숫자로 시작 불가, 특수문자 포함 불가(_, $은 가능)

연산자

연산 작업에 사용되는 기호입니다.

표현식

평가되어 하나의 값을 반환하는 식 또는 코드입니다.

값

더 이상 평가할 수 없는 데이터입니다.

세미콜론(;)

자바스크립트에서 하나의 문(문법)이 끝났음을 의미합니다.

 

변수 선언

• 변수를 담을 수 있는 공간을 만들어 둡니다.
• 변수 선언 후에 변수 초기화를 해야 합니다.
• 변수 초기화란 이름표를 붙인 공간에 숫자를 집어넣는 것입니다.

let

• ES6에서 새로 추가되었습니다.
• var 키워드의 여러 기능을 개선하였습니다.

let의 특징

 

1. 변수명 중복 불가능합니다.

    키워드 자체에서 중복선언을 차단하여서 다른 사람이 선언한 변수명을 재선언하는 경우 제거합니다.

    let 선언 후 var와 같이 변수명 중복으로 사용하면 오류가 납니다.

2. 호이스팅되지 않습니다.

    var 키워드로 선언, 할당했을 때, 변수 선언을 자바스크립트의 스코프* 맨 위로 올려 실행하는 것입니다.

#스코프: 변수에 접근할 수 있는 유효 범위

3. 스코프의 범위가 다릅니다.

 

const

• ES6에서 새로 추가되었습니다.
• 기본 속성 let과 동일합니다.
• 재할당이 불가능하다는 것이 let과 차이점입니다.

 

주석

• //single line: 한 줄에만 적용됩니다.
• /* milti lines: 여러 줄에 적용됩니다. */

 

자료형

• 기본 자료형: 문자, 숫자, 논리, undefined, null, symbol
• 참조 자료형: 객체(object)

 

객체(object)

• 속성(property)의 모임으로 이루어진 데이터입니다.
• 속성은 '키(key): 값(value)' 쌍으로 구성됩니다.
• 키는 문자형, 값엔 모든 자료형 허용됩니다.
• 프로퍼티 키는 '프로퍼티 이름'이라고 불립니다.

 

빈 객체 생성 방법

1. '객체 생성자' 문법으로 생성하기

2. '객체 리터럴' 문법으로 생성하기 -> 중괄호 {...}를 이용해 객체를 선언하는 것

let user = new Object(); //객체 생성자 문법
let user = {}; //객체 리터럴 문법

 

리터럴과 프로퍼티

let user ={ //객체
name: "John", //키: "name", 값: "John
age: 30 //키: "age", 값: 30
};

 

 

객체의 값 호출하기

1. 온점(.)으로 호출

2. 대괄호([])로 호출

//1. 온점으로 호출하기
let user={
name:"John", 
age:30
};

console.log(user.name);
console.log(user.age);

//2. 대괄호로 호출하기
console.log(user['name']);
console.log(user['age']);

• 스페이스가 포함된 키는 반드시 대괄호로 접근해야 합니다. 
• 숫자로 된 키는 대괄호로 접근해야 합니다.

let user={
name:"John", 
age:30,
'user name':'choi',
3:3
};

console.log(user['user name']);
console.log(user['3']);

프로퍼티 추가하기

let user={
name:"John", 
age:30
};

console.log(user);

user.time=5;
console.log(user);

프로퍼티 삭제하기(delete)

let user={
name:"John", 
age:30
};

user.time=5;
delete user.age;
console.log(user);

실습2

 

연산자

1개의 표현식에 대해 산술, 대입, 논리(참거짓), 타입에 관해서 이것들을 평가해서 값을 생성하는 작업입니다.

1. 산술 연산자

• 수학적인 계산이 이루어지는 연산자 
• 사칙연산

2. 대입 연산자(할당 연산자)

• 무언가 할당할 때 쓰는 연산자

let num = 10 + 20;
//=과 +

3. 비교 연산자

• 비교를 하는 연산자
• >, <. <=, >=

4. 논리 연산자

• 주어진 논리식을 판단하여 true, false를 반환하는 연산자
• or(||), and(&&), not(!)

5. typeof 연산자

• 데이터의 타입을 알려주는 연산자

삼항연산자

• 참/거짓에 따라 선택적으로 실행되는 조건문입니다.
• 조건문? 선택문1 : 선택문2

let x = 2, y = 1;
let z = x > y ? "x가 y보다 더 큼" : "x가 y보다 더 작음";
console.log(z);

 

 

setter 함수와 getter 함수

• Getter와 Setter는 객체 지향 프로그래밍에서 사용되는 개념입니다. 일조의 메서드라고 보면 됩니다.
• 단어 그대로 Getter는 객체의 속성(property) 값을 반환하는 메서드이며, Setter는 객체의 속성 값을 설정, 변경하는 메서드입니다.

const user = {
	name: 'likelion',
    age: 50,
    
    // 객체의 메서드(함수)
    getName() {
    	return user.name;
    },
    setName(value) {
    	user.name = value;
    }
}

console.log(user.getName()); // likelion

user.setName('tistory');

console.log(user.name);

 

연산자 우선순위

• 괄호 → 증감 연산자 → 산술 연산자 → 비교 연산자 → 논리 연산자 → 대입 연산자 순서

 

명시적 형변환

• 코드 내에 String(), Number(), Boolean() 등의 함수를 사용하여 명시적으로 타입을 변환하는 명시적 형변환(explicit coercion)

1) String Type

-String() : 인자를 문자열로 변환한다.
-toString() : 인자로 기수를 받을 수 있다.

//String
String(22) // "22"

//toString
const foo = 22;
foo.toString()  //”22"
foo.toString(2) // "10110"

2) Number Type

-Number() : 인자를 숫자로 변환한다.
-parseInt() : 인자를 정수형의 숫자로 변환한다. 이때 인자가 숫자 0으로 시작할 경우 8진수로 변환하고, 0x로 시작한다면 16진수 숫자로 변환한다. 또한 앞 부분에 공백 뒤에 문자가 나오는 경우 NaN을 반환한다.

//Number
Number("123")  //123

//parseInt
parseInt(333.234) //333
parseInt(0134) // 92 (8진수)
parseInt(0x1b) // 27 (16진수)
parseInt(  "가나") //NaN

3) Boolean Type

-Boolean : 인자를 불리언 값으로 변환한다.

Boolean("1") //true

//falsy value
값이 없는 경우
0
-0
null
false
NaN
undefinded
""

 

묵시적 형변환

• 비교, 산술, 논리 연산자 이용시 자바스크립트 엔진이 필요에 따라 자동으로 타입을 변환하는 암시적 형변환(implicit coercion)

1) String Type

-연산자 사용 시 피연산자 중 문자열이 하나라도만 있으면 String Type으로 변환됩니다.
-undefined 나 null도 문자열로 변환됩니다.

 

2) Number Type

-연산자를 제외한 산술 연산자(-, /, *, >, < 등) 사용시 Number Type으로 변환됩니다.

"2" + "2" //22
"2" - "2" //0
"2" * "2" //4
"2" / "2" //1
[0] - 1 //-1

-숫자 이외의 글자가 들어있는 문자열, 배열 및 undefined 는 숫자 타입으로 변환되지 않고 NaN(Not a Number)을 반환합니다.

"hello" - 1 //NaN
["hello"] -1 // NaN
undefined - 1 // NaN

 

3) 엄격하지 않은 동등 비교 (==)

true == 1;    // true  (true를 1로 변환) 
false == 0;   // true  (false를 0으로 변환)
'1' == true;  // true  ('1'를 true로 변환)
'1' == 1;     // true  ('1'를 1로 변환)

 

4) 논리연산자(!!)

const arr = []
!!arr //true