JavaScript - 변수, 자료형 등 기본 문법

자바스크립트는 처음에는 웹개발용으로 사용되는 언어였으나 현재는 VR, AR, 블록체인, 모바일 등의 개발도 가능해졌다.

2015년 발생한 업데이트 이후 사람들이 좋아하게 되었다고 한다.

 

기본 문법

세미콜론

한 줄에 한 문장씩 입력하는 경우, 자바스크립트는 알아서 맨 뒷줄에 ';' 세미콜론을 찍어준다.

하지만 한 줄에 두 문장이 오게될 경우 세미콜론을 붙여서 문장을 구분해줘야한다.

console.log('A') 
console.log('B')
console.log('C')console.log('D') // 에러발생

---

주석

사용 목적 

• 어떤 의도로 코드가 작성되었는지 설명할 때
• 구현한 코드가 어떤 동작을 하는지 기록할 때

 

한 줄 주석

// const a = 'A';

 

여러 줄 주석

/*
const num = 30;
const flag = true;
*/

 

---

자료형

Number

• 정수(Integer)
• 소수(floating point)

1. 지수표기법
    - let num = 1e9; >> 1000000000. 지수표기법 이라 부른다.
    - 25e5 === 2500000
    - 3.5e-3 === 0.0035
    - -9.1e-5 === 0.000091
    
2. 2,8,16진법 표기
    - 0b11111111 === 0o377 === 0xff
    - 2진법.           8진법      16진법
    
3. 숫자형메소드
    - toFixed
        - let myNumber = 0.3591; my number.toFixed(7) === 0.3591000
           >>> toFixed함수는 소숫점아래 파라미터번째까지 무조건 소수점으로 표현해주는 것.
        - 현재 가진 소숫점보다 적은 값을 입력하면 반올림, 많은 값을 입력하면 0으로 채워준다.
        - 리턴값은 문자열이다. 
        - 문자열앞에 ‘+’ 붙이면 넘버가된다. 예를들면 +’3.5’ 
    - toString
        - Number.toString(2) >> number를 2진법으로 바꿔준다.
        - number.toString(8) >> number를 8진법으로 바꿔준다.
        - Number.toString(16) >> number를 16진법으로 바꿔준다.
        - 리턴값은 문자열.
        - toString을 number라는 변수에 담지 않고 바로 숫자에 붙여도 되는데, 정수에 .을 붙일경우 소수점으로 오해할 수 있으니 . 을 2번 붙인다.
            - 255..toString(2) 이렇게.
            - 아니면 (255).toString(2) 이렇게.
            
4. 랜덤
// 특정 범위 안에서의 랜덤 숫자를 뽑는 방법
Math.floor(Math.random() * (max - min)) + min;

// 예시 0 <= num < 10
Math.floor(Math.random() * (10 - 0)) + 0;

// 예시 0 <= num <= 10
Math.floor(Math.random() * (10 - 0 + 1)) + 0;

 

 

문자열(String)

• 문자열의 앞 뒤 따옴표를 " 또는 ' 로 통일시켜야한다.
• length가 있다.
• 배열처럼 값에 접근 가능하다.
• for of문 사용 가능하다.
• 문자열과 배열의 차이 : 배열은 mutable 바뀔 수 있는 자료형이고, 문자열은 immutable 바뀔 수 없는 자료형이다.

 

불린(Boolean)

• true / false 값이 올 수 있다.
• 직접 값을 넣기보다는 조건문의 결과로 값이 들어가는 경우가 더 많다.

 

null

• 의도적으로 빈 값을 표현할 때 사용하는 값.

 

undefined

• 값이 없다는 것을 확인하는 값

 

객체

{
	key : value
	propertyName : property Value
}

key

• propertyName은 문자열이다.
• propertyName은 따옴표로 감싸지 않아도 자바스크립트가 알아서 문자열로 인식한다.
• 하지만 따옴표로 감싸지 않을 때에는 아래의 조건을 갖춰야한다.
  - 첫번째 글자는 [ 문자, _, $ ] 중 하나로 시작해야한다.
  - 띄어쓰기와 '-' 사용이 금지된다.

value

• null, 객체도 value가 될 수 있다.

 

객체의 데이터에 접근하기

	let person = {
		name: ‘Ann’,
		‘born Year’ : 2000,
		student: true,
		hate: null,
		like: {
			title: ‘diving’,
			period: 3
		}
	}
    
    // 점표기법
    person.name;
    
    // 대괄호 표기법
    person['name'];
    person['born'+'year'];

 

객체의 프로퍼티 수정하기

person.name = 'Anna';

 

객체의 프로퍼티 추가하기

person.favoritFood = 'pizza';

 

객체의 프로퍼티 삭제하기

delete person.favoriteFood;

 

프로퍼티의 존재 여부 확인하기

console.log('name' in person); //true

 

Date 객체

Let myDate = new Date();
Let myDate = new Date(‘2023-09-21’);
Let myDate = new Date(‘2023-09-21T11:30:29’);
Let myDate = new Date(2023, 8, 21,11,30,29);

/* get 함수들 */
myDate.getFullYear();
myDate.getMonth(); // 1월은 0.
myDate.getDate(); // 일자
myDate.getDay; // 요일. 일요일부터 0~6.
myDate.getHours();
myDate.getMinutes();
myDate.getSeconds();
myDate.getMilliseconds();
myDate.getTime(); // 타임스탬프
Date.now(); // 지금 시간이 필요할 때 사용해라. 가독성, 성능도 유리.

/* set 함수들 */
setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds) // 1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜 설정

/* locale */
console.log(myDate.toLocaleDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); // myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)

 

배열

let animals = ["토끼", "거북이", "강아지", "고양이"];
animals[10] = "노루";
console.log(animals[6]); // undefined

/* 배열 함수들 */
// 1. splice
Member.splice(1); // 1번인덱스부터 전체삭제. (값 1개만 남아있다.)
Member,splice(1,2) // 1번인덱스부터 2개 삭제.

Members.splice(1,1,’NiceCodeit,’HiCodeit’) // 1번인덱스부터 1개를 삭제하고 뒤 2개를 추가한다.
members.splice(0,0,’a1’,’a2’) // 0번째 인덱스부터 0개 삭제하고 뒤 값 2개 0번째에 추가한다.

// 2. shift() : 첫 요소 삭제
// 3. Pop() : 마지막 요소 삭제
// 4. unshift(value) : 첫 요소로 값 추가
// 5. push(value): 마지막요소로 값 추가
// 6. Members.indexOf(‘토끼’) // 0. 없으면 -1. 여러개면 맨 처음거만.
// 7. members.lastIndexOf(‘토끼’) // 뒤에서부터 찾기때문에 여러개면 맨 뒤에거만.
// 8. Members.includes(‘토끼’) // true, 없으면 false
// 9. members.reverse() // 배열순서를 거꾸로 뒤집는다.

 

 

typeof 연산자

typeof 1 // 'number';
typeof(typeof 1) // 'string'

• 위와같이 값이 어떤 자료형인지 문자열로 알려준다.
• 사칙연산보다 연산 우선순위가 높다.

 

형변환

• 산술연산(+, -, *, / %, **)의 경우 '+' 를 제외사고 숫자로 자동형변환된다.
• 관계 비교 연산(<, <=, >, >=) 숫자형으로 비교 후 불린값을 출력한다. 비교 불가능한 경우에는 false.
• 같음 비교 연산(===, !==, ==)  

 

---

추상화(Abstraction)

• 여러가지 사물이나 개념에 공통되는 특성이나 속성따위를 추출하여 파악하는 작용.
• 구체적인 정보는 숨기고 꼭 필요한 핵신만 보여주는 것을 추상화라고 한다.
• 책의 제목, 영화의 줄거리, 지도 등 목적에 맞게 단순화 하는 작업을 추상화라고 할 수 있다.

 

추상화 방법

• 목적을 명확히 한다.
• 불필요한 것들은 숨긴다.
• 핵심만 드러낸다.

 

optional parameter

function introduce(name, nationality = '한국'){
	console.log(nationality);
}

introduce('Ann');

• 위와같이 파라미터로 nationality가 들어오지 않을 경우, '한국'으로 값을 할당해준다.
• 옵셔널파라미터는 파라미터 위치 중 가장 뒤쪽으로 와야한다.

---

변수

• 값을 담기 위해 이름을 붙인 상자.
• 반복적으로 구체적인 값을 입력해야 할 때 용이하다.
• 수정에 안정적이다.
• 변수이름으로 값을 설명할 수 있다.

변수 선언

let potato;

변수 할당

potato = 10;

 

변수 작명 가이드

1. 필수 룰(어길시 에러 발생)

• 문자, 밑줄, 달러기호로 시작해야한다.
• 두번째 글바주터 숫자를 넣을 수 있다.
• 대문자와 소문자를 구별한다.
• 예약어는 사용하지 않는다.(if, for,let 등 사용불가능)

2. 선택 룰(어겨도 에러가 발생하지 않는다.

• 의미없는 이름 짓지 않기(ex- const a;)
• 너무 추상적인 이름 짓지 않기(ex- const name;)
• 변수 이름은 camelCase로 짓기(ex-const tomatoJuice;)

---

함수

• 명령을 저장한다.
• 변수와 마찬가지로 선언이 필요하다.

함수 선언

function makeJuice(){
	명령;
    명령;
}

함수 호출

makeJuice();

---

파라미터

• 매개변수
• 함수 내에서 변수처럼 사용할 수 있다.

---

for in 반복문

for(let key in person){
	console.log(key);
}

• 객체를 반복할 때 적합하다.

---

for of 반복문

for(let element of influencer){
	console.log(element);
}

• 배열을 반복할 때 적합하다.
• 인덱스가 필요할경우 그냥 for문을 쓰는 것이 좋다.

---

기본형과 참조형

1. 기본형

• number, string, boolean, null, undefined
• 변수라는 상자에 값을 넣는 형태

2. 참조형

• object, array
• 변수라는 상자에 주소값이 담긴다.

3. 복사하기

/* 배열의 복사 */
let arr = [1, 2, 3];

// 얕은 복사
let arr2 = arr;

// 깊은 복사
let arr3 = arr.slice();


/* 객체의 복사 */
let ob = { name: 'Ann', age: '20'};

// 얕은 복사
let ob2 = ob;

// 깊은 복사
let ob3 = Object.assign({},ob);

// 아래 함수는 객체의 값이 참조형인경우 전체를 복사하는 함수이다.
function cloneObject(object){
	if(object === null || typeof object !==‘object’){
		return object;
	}

	let temp;
	if(Array.isArray(object)) {
		temp = [];
	}else{
		temp = {};
	}

	for( let key of Object.keys(object)) {
		temp[key] = cloneObject(object[key])
	}

	return temp;
}