자바스크립트(JS) 기초 개념 (2)

 

 

🍘  배열

- 하나의 변수에 여러 개의 값 저장

arr = [12, "apple", true]

- 서로 다른 자료형 한 배열에 저장 가능

- 배열의 길이 확인

arr.length // 3

 

 

🍘  심벌(Symbol)

- 유일성을 보장

- 객체 프로퍼티의 키(key)로 사용 가능

- 오픈 소스를 가져올 때 같은 키 이름으로 충돌하는 상황 방지

- 잘 사용하진 않음

- 선언

let var1 = Symbol()

- 심벌을 키로 사용할 때는 대괄호로 묶어서 표현

let id = Symbol()
const member = {
	id : 1234,
    [id] : 1
}
member[id]	// 1
member.id	// 1234

- 심벌에 설명 추가 가능

Symbol("설명")

 

 

 

🍘  자바스크립트의 장점이자 단점, 자료형 변환

 

다른 언어와 다르게 자바스크립트는 변수를 선언할 때 자료형을 지정하지 않고 변수에 값을 할당하면 그 값에 따라 자료형이 결정

--> 느슨한 자료형 체크

편리하지만, 여러 사람이 프로젝트를 진행할 때 변수를 일관성있게 유지하지 못함

▶︎ 자동 형 변환

- 자바스크립트는 '+'가 더하기 연산자이면서 연결 연산자로 사용됨

- '+'를 이용해서 숫자와 문자열을 더하면 숫자가 자동으로 문자열로 바뀌면서 2개의 문자열을 연결해서 보여줌

- 그외 연산자는 자동으로 문자열을 숫자로 변환한 후 계산함

 

▶︎ 직접 형 변환

- Number()

Number("200")	// 숫자 200으로 변환

 

기존 유형	반환 결과
true	1
false	0
숫자	숫자
null	0
undefined	NaN
정수,실수	맨앞 0 제거
16진수 문자열	10진수
빈 문자열	0
기타	NaN

 

- parseInt()

- parseFloat()

- toString()

- String()

값.toString()		// null, undefined 제외한 모든 자료형 문자열로 변환
값.toString(기본값)	// 기본값에 입력한 진수형으로 변환

String(값)		// null, undefined 자료형까지 모두 포함해서 문자열로 변환

 

- Boolean()

 

 

🍘  연산자

산술연산자, 연결연산자, 할당연산자, 논리연산자는 다른 언어와 거의 같다.

 

▶︎ 비교연산자

비교연산자가 다른 언어와 조금 다르다.

연산자	기능
==	피연산자와 값이 같으면 true
===	피연산자와 값, 데이터유형 모두 같으면 true
!=	피연산자와 값이 같지 않으면 true
!==	피연산자와 값, 데이터유형 모두 같지 않으면 true

- 프로그램에서 값을 비교할 때는 ===, !== 연산자 사용하는 것이 좋음

- 자바스크립트에서는 문자열끼리 비교도 가능함

- 피연산자가 문자열일 경우 문자들의 아스키코드 값을 비교해서 결정

- 첫번째 문자가 서로 같은 아스키값일 경우 다음 문자 비교 하는 식으로 비교

 

 

🍘  ForEach 문

프로그램 중에 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수를 실행할 때 사용

fruits.forEach(function(fruit) {
	console.log(fruit);
});

 

 

🍘  For...in 문

반복해서 객체의 값을 가져와서 처리할 때 사용

let book = {
    title : "가나다",
    pubDate : "2019-02-04",
    pages : 777
}

for (key in book) {
    document.write(`${key} : ${book[key]}<br>`)
}
/*
title : 가나다
pubDate : 2019-02-04
pages : 777
*/

 

 

🍘  for...of 문

문자열이나 배열같이 반복 가능(literable) 자료에서 사용하는 반복문

const students = ["a", "b", "c", "d"];

for (student of students) {
	document.write(`${student}, `);
}
//a, b, c, d