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