오늘 배운 것 - Javascript
- 변수와 변수 선언 방법 (var, let, const)
- 문자열 / 숫자열 데이터 타입
- 배열
- 객체
1. Javascript 란?
Javascript는 Html,Css로 꾸며진 웹페이지를 동적으로 조작하기 위해 만들어진 프로그래밍 언어로서, 다양한 연산이 가능하다.
server구축, streaming, game등 에도 사용된다.
2. 변수와 변수 선언 방법
변수란, 원하는 데이터를 담아 줄 수 있는 상자와 같은 개념이다.
변수를 선언하고, 데이터를 할당해주는 과정이 필요하다. (메모리에 할당된 데이터가 담기고, 저장공간에 담겨져 있는 데이터를 가져오게 된다.)
let 변수명;📌 변수명은 명시적으로 누구나 데이터를 유추할 수 있도록 해야 한다.
변수 선언과 할당
변수명 = 할당할 값;
let box = 123;
box = 456; // 재할당변수 선언 키워드
재할당, 재선언이 가능한 키워드가 있다.
- 재할당 : 이미 데이터가 할당되어 있는 변수에 다시 할당하는 것
- 재선언 : 이미 선언되어 있는 변수명으로 다시 선언하는 것
1) var
지양해야하는 변수 선언 방법이다.
-> 재할당, 재선언이 가능하기 때문에, 코드의 양이 많아지면 데이터를 명확하게 구분하기 어려워져 에러발생 확률이 높다.
2) let
let은 재할당은 가능하지만, 재선언은 불가능하다.
재할당 가능
let box;
box = 1;
console.log(box) // 1
box = 5;
console.log(box) // 5재선언 불가능
let box;
let box; // 에러 발생. let는 재선언이 불가능하다.3) const
상수 변수를 의미한다.
반드시 선언과 활동이 동시에 이루어져야 한다.
반드시 유지시켜야 하는 값, 다른 데이터로 변환되어서는 안되는 값들은 const로 선언해준다.
const는 재할당, 재선언 둘 다 불가능하다.
const secondWord = 'abc';
secondWord = 'def'; // 에러 발생. const는 재할당이 불가능하다.
const secondWord = 'abc';
const secondWord = 'def'; // 에러 발생. 재선언도 불가능하다.변수명 작성 주의사항
- 변수명은 동사가 아닌 명사로 작성한다.
- 첫 글자는 숫자 사용 불가능하다.
- 자바스크립트 예약어 (new, if, else, case, this 등)는 변수명으로 사용하지 않는다.
- 공백을 사용하지 않고 camelCase를 사용한다.
camelCase : 띄어쓰기 대신 대문자로 구분
snake_case : 띄어쓰기 대신 언더바로 구분
PascalCase : 첫글자도 대문자, 띄어쓰기 대신 대문자로 구분
3. 데이터 타입 기초
1) String
문자열 데이터는 더하기 연산만 가능하다.
다른 연산 시도시 Nan값을 반환한다.
큰따옴표/작은따옴표로 감싸진 데이터는 모두 문자열로 인식된다. (변수도 마찬가지이므로 유의해준다.)
console.log('Hello' + 'world')
// Helloworld2) Number
숫자 데이터는 산술 연산자를 사용한 모든 연산이 가능하다.
숫자와 문자의 더하기 연산도 가능하다. 단, 결과는 문자열이다.(이때 더하기는 문자열 연결 연산자)
console.log('1' + 1)
// 11 (문자열)
console.log(1 + '')
// 1 (문자열) -> 공백도 문자열로 취급되기 때문📌 Javascript에서 산술 연산자 사용시 주어진 데이터를 암묵적으로 숫자로 변환을 시도하게 되는데,
문자열 내 숫자로 변환할 수 없는 데이터는 Nan값을 변환하고, 숫자로 변환이 가능하면 연산이 적용된다.
console.log('a' * 1)
// NaN문자열을 포함한 연산에서 더하기가 아닌 연산은 값이 Nan이다.
console.log('2' * 2)
// 4숫자로 변환 가능한 데이터는 연산이 적용된다.
4. 배열
순서가 존재하는 여러개의 데이터를 저장할 때 사용하는 창고같은 개념이다.
-
요소(Element) : 배열에 속해있는 데이터 하나하나를 의미한다. 다양한 데이터 타입들이 배열의 요소가 될 수 있다.
-
인덱스(Index) : 배열에 속해있는 데이터 하나하나에는 0부터 시작하여 1씩 증가하며 숫자가 부여된다.
인덱스 위치값을 통해 순서에 맞게 데이터에 접근할 수 있다.
1) 배열의 속성(Property)
- Array.length
특정 배열의 길이(배열 내 요소의 개수)를 나타내는 속성이다.
index와 length는 시작하는 숫자가 다르다. (index는 0부터 시작, length는 1부터 시작)
2) 배열 메서드 (Method)
메서드는 어떠한 기능을 가지고 있는 명령어이다.
- push() : 배열의 가장 뒤에 데이터를 추가해준다.
let arr = ["Jason", "Alice", "Chris"]
arr.push("Jane") // 반환값: 배열의 길이
console.log(arr) // ["Jason", "Alice", "Chris", "Jane"]- pop() : 배열의 가장 마지막 데이터를 제거한다.
let arr = ["Jason", "Alice", "Chris"]
arr.pop() // 반환값: pop한 데이터
console.log(arr) // ["Jason", "Alice"]- includes() : 배열에 주어진 데이터가 존재하는지 확인한다. 결과값은 true | false로 반환된다.
let arr = ["Jason", "Alice", "Chris"]
console.log(arr.includes("Chris")) // true
console.log(arr.includes("Jane")) // false- indexOf() : 배열에서 주어진 데이터의 인덱스 값을 찾아 반환한다.
let arr = ["Jason", "Alice", "Chris"]
console.log(arr.indexOf("Chris")) // 2 5. 객체 (Object)
객체는 여러개의 속성(Property)을 가진 데이터 타입이다.
각 속성들은 key와 value로 이루어져 있으며, value에는 어떠한 데이터도 들어갈 수 있다.(배열, 객체 포함)
let UserData = {
name: 'Jason',
age: 25,
gender: 'Male'
};
UserData.favoriteFood = ["rice", "noodle", "chicken"]
console.log(UserData)
/*
{
name: 'Jason',
age: 25,
gender: 'Male',
favoriteFood: ["rice", "noodle", "chicken"]
};*/객체 데이터 접근 방법
1) Dot notation
let UserData = {
name: 'Jason',
age: 25,
gender: 'Male'
};
console.log(UserData.name) // "Jason"
userData.email = "jason@test.com" // 속성 추가도 가능하다.
userData = {
name: 'Jason',
age: 25,
gender: 'Male'
email: 'jason@test.com'
};2) Bracket notation
let UserData = {
name: 'Jason',
age: 25,
gender: 'Male'
};
userData["name"] // "Jason"
let name = "age"
console.log(userData[name]) // 25📌 주의! Bracket notation 사용 시 문자열이 아닌 변수를 입력하면, 그 key는 변수로 동작하게된다.
객체 메서드
- Object.keys() : 주어진 객체의 key만을 가져와 배열에 문자열로 담아주는 메서드이다.
let UserData = {
name: 'Jason',
age: 25,
gender: 'Male'
};
console.log(Object.keys(UserData)) // ["name", "age", "gender"]
---------------------------------------------------------------------------
let result = Object.keys(UserData) // key값이 담긴 배열들을 변수에 담아줄 수 있다.
console.log(result) // ["name", "age", "gender"]
console.log(result.includes("name")) // true- Object.values() : 주어진 객체의 value만을 가져와 배열에 데이터 그대로 담아주는 메서드이다.
let UserData = {
name: 'Jason',
age: 25,
gender: 'Male'
};
console.log(Object.values(UserData)) // ["Jason", 25, "Male"] 오늘의 회고
드디어 온라인 마지막 강의인 자바스크립트 강의를 듣기 시작했다.
아직 처음이라 그런지 변수와 변수 선언 방법, 배열 등 기초적인 내용을 배우느라 어렵진 않았다. 프리캠프 강의에서 미리 배우기도 했고.. 그래도 기초를 탄탄히 공부해서 나중에 어려운 내용이 나와도 당황하지 않도록 해야겠다.
프리캠프때 자바스크립트 문제를 풀면서 반복문 속에서 배열과 객체를 자주 사용했던 기억이 난다. 배열과 객체 메서드에 대해 잘 알아두자..!
