예전에 독학할 때 작성해 놓은 JS 정리와, 내일배움단에서 배우는 JS의 내용이 크게 다르지 않아서 이해하는데 어려움은 없었다.
변수
변수란, 값을 담는다.
let a = 1;
let b = 2;let a = 1 은 a라는 변수에 1을 담는다는 것. a는 1을 나타내게 된다.
여기서 let이 뭔지 궁금할 수도 있다.
let name = 'a'
console.log(name) // a
let name = 'b'
console.log(name) // b
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'c'
console.log(name) //c
const name = 'kim'
console.log(name) // kim
const name = 'lee'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'park'
console.log(name)
//Uncaught TypeError: Assignment to constant variable.let이 달린 변수는 재할당이 가능하다.
하지만 let이 아닌 const를 쓰는 경우도 있는데, const는 변수 재선언, 변수 재할당 모두 불가능하다.
var은 이제 안녕..
let a = 20;
let b = 30;
a + b; // 50변수에 담은 것들로 숫자를 더할 수도 있고,
let a = '너'
let b = '굴'
a + b; // '너굴'문자를 더할 수도 있다.
let a = 1;
let b = "kim";
a + b // '1kim'
typeof(a); // 'number'
typeof(b); // 'string'근데, 위 처럼 숫자와 문자를 더할 수 있다. 하지만 이럴 때는 더한 결과가 문자열이 된다. 숫자를 자동으로 문자로 변환해 더하는 것이다.
배열과 객체
데이터를 저장하는 방법에는 배열(array)과 객체(object)로 담을 수 있다.
그리고 프로그래밍에서는 자리의 위치를 0부터 센다. 우리는 보통 첫 번째 자리를 1번자리라고 하지만, 컴퓨터는 0번자리라고 한다.
1, 2, 3, 4 가 있다면 1은 0번 자리, 2는 1번 자리 이렇게 나아간다.
let a = [1, 2, 3, 4];
a; // [1, 2, 3, 4]
a.length; // 4
a[0]; // 1이건 배열에 담는 것이다.
배열의 이름 뒤에 다양한 속성들을 사용해서 길이나, 특정 위치의 값을 불러올 수도 있다.
let b = {name : 'kim', age : 29, laug : 'kor'};
b; // {name : 'kim', age : 29, laug : 'kor'}
b.name; // 'kim'이건 객체로 담는 것이다. name, age, laug 부분은 key라고 부르고, 나머지 부분은 value라고 부른다.
객체 이름 뒤에 다양한 속성을 사용해서 key의 value를 출력할 수도 있다.
객체를 담을 때, name과 'name'처럼 따옴표로 감쌀 수 있는데, 차이점이 궁금해서 콘솔창에 찍어보니 둘 다 name으로 나왔다.
담을 때 따옴표로 감싸든 아니든, 인식은 따옴표 없는 걸로 인식하는 것 같다.
단, 객체에 다른 key와 value를 추가할 때는 .으로 추가하는지 []로 추가하는지에 따라 따옴표 유무가 달라진다.
이렇게 저장한 배열, 객체에 요소를 추가할 수도 있다.
먼저, 배열이다.
let a = [1, 2, 3, 4];
a.push(5);
a; // [1, 2, 3, 4, 5]push를 사용해서 배열 안에 다른 요소를 추가할 수 있다. 맨 뒤에 추가가 된다.
배열에 배열을 추가할 수도 있다.
let a = [1, 2, 3, 4];
let b = ['a1', 'b1', 'c1', 'd1'];
a.push(b);
a; // [1, 2, 3, 4, Array(4)]배열 안에 배열을 넣은 것이기 때문에 [1, 2, 3, 4, 'a1', 'b1', 'c1', 'd1']가 되지 않는다.
그래서 만약 b가 추가된 a에서 'a1'를 출력하고 싶다면, a[4][0]; 라고 쓰면 된다. (배열의 4번째 자리에 있는 값의 0번째 자리의 값)
내일배움단 강의를 듣기 전, 독학할 때 배운 것 중에 배열에 '배열'을 넣는 게 아닌, 배열에 '배열의 값'을 넣는 방법도 있었다.
let a = [1, 2, 3];
let b = [4, 5]
a.push(...b);
a; // [1, 2, 3, 4, 5]push로 넣을 값 앞에 ...을 써주면 된다. 전개구문이라는 건데, 이건 배열에 객체를 넣을 때도 사용할 수 있다.
const max = Math.max.apply(null, array);
const max = Math.max.(...array); // 전개구문위 코드처럼 apply를 사용할 수도 있지만, 전개구문을 사용하여 짧게 나타낼 수 있다.
다음은 객체.
let a = {name: 'kim', age: 29, laug: 'kor'}
a.height = 186;
a; // {name: 'kim', age: 29, laug: 'kor', height: 186}
a['s'] = 'm'; // a[s] = 'm'; 이건 안된다.
a; // {name: 'kim', age: 29, laug: 'kor', height: 186, s: 'm'}점(.)으로 추가할 수도 있고, 대괄호([])로 추가할 수 있다.
주의할 점은 대괄호로 추가할 때, key가 문자열이라면 따옴표로 감싸줘야하고, 점으로 추가한다면 따옴표를 쓰지 않는다.
JavaScript 기본함수 split
JS에는 기본으로 제공되는 함수가 굉장히 많다. 이걸 다 외워서 쓰진 못하고 검색으로 찾아쓰는게 좋다.
기본 제공 함수 중, split 함수에 대해 알아보자.
let email = "example@emali.com"
emali.split("@"); // ['example', 'emali.com']
email.split("@")[1]; // 'emali.com'
email.split("@")[1].split("."); // ['emali', 'com']
email.split("@")[1].split(".")[0]; // 'emali'
email; // 'example@emali.com'split 함수는 어떤 값을 기준으로 나눠, 배열로 반환해준다.
그리고 그 배열의 위치를 불러오고, 다시 나누고, 다시 불러오고 하는 게 가능하다.
하지만 그 값이 나눠진 값으로 바뀌는 건 아니다.
