1let myNumber = [79, 98, 86, 61, 96];배열 기초
index, element, length,
arr[0]
1// myNumber 배열 안 3번째 index의 element2myNumber[3]; // 613
4// 배열의 길이를 알아낼 수 있다5myNumber.length; // 5배열에서 특정 인덱스(index)의 요소(element)를 조회 및 변경
1myNumber[0] = 100;2// [100, 98, 86, 61, 96]이중 배열
1let myNumber = [2 [13, 30],3 [73, 8],4 [44, 17],5];6// myNumber의 1번째 index의 값은?7// myNumber의 1번째 index값의 0번째 인덱스 값은?8myNumber[1]; // [73, 8]9myNumber[1][0]; // [73]for 문과 배열을 이용
1for (let n = 0; n < myNumber.length - 1; n++) {2 console.log(myNumber[n]);3}응용 for문
1let myNum = [10, 20, 40, 10];2let sum = 0;3for (let i = 0; i < myNum.length; i++) {4 sum += myNum[i];5}6// 80띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꾸기 str.split(" ") .join(" ")
1let str = "ciao ciao the cat";2let arr = a.split(" "); // ["ciao", "ciao", "the", "cat"]3arr.join(" "); // "ciao ciao the cat"1let arr = [0, 1, 0, 1, 2, 3, 4, 8, 7, 6, 5];2let head = arr.slice(0, 3).join("");3let front = arr.slice(3, 7).join("");4let back = arr.slice(7).join("");5let result = `(${head})${front}-${back}`;6// (010)1234-8765배열 요소(element)의 조회, 추가, 삭제, 복사, 분리
unshift, shift, slice, length
1// 앞에 있는 요소 삭제2let arr = ["code", "states"];3arr.shift(); // "code"4
5// 배열 앞에 요소 추가6arr.unshift("creative"); // ["creative", "states"]배열의 요소(element)를 추가 및 삭제 push, pop
1// 배열 끝에 값을 추가2myNumber.push(96);3console.log(myNumber); // [79, 98, 86, 61, 96, 96]4
5// 배열 마지막 값을 삭제6myNumber.pop(); // 967console.log(myNumber); // [79, 98, 86, 61, 96]자바스크립트의 특정 값이 배열인지 아닌지 판별 Array.isArray
1Array.isArray(myNumber); // true2Array.isArray("문자열"); // false자바스크립트의 특정 값이 배열에 포함되어 있는지 확인 indexOf, includes
1let words = ["Radagast", "the", "Brown"];2words.indexOf("the") // 1 (index 의 값이 반환)3words.indexOf("Brown") // 24words.indexOf("없는 단어") // -15// 특정한 값이 배열에 포함되어 있지 않으면 -1이 반환된다.6// indexOf는 대문자와 소문자 값을 구분한다7
8// #boolean 값으로 반환하기9words.indexOf("없는 단어") !== =1 //false10words.includes("Radagast") // trueconsole.table()
1let arr = ["code", "states"];2console.table(arr);| (index) | Value |
|---|---|
| 0 | "code" |
| 1 | "states" |
1참고 - 인사이드 자바스크립트1const a = [1, 2, 3];2let b;3// b 에 a 할당4b = a;5b.push(4);6console.log(b); // [1, 2, 3, 4]7console.log(a); // [1, 2, 3, 4]b 에 a를 할당하게 되면 [1, 2, 3]이 들어가는게 아니라 [1, 2, 3]을 갖고있는 메모리의 주소를 할당받게 된다.
왜일까!
(아래 자세히 설명)
자바스크립트에서는 기본 타입을 제외한 모든 값이 객체이다. 배열, 함수 모두 자바스크립트 객체로 표현된다.
객체란 이름(key):값(value)형태의 프로퍼티들을 저장하는 컨테이너이다.
기본 타입은 하나의 값만 가지는 데 비해, 참조타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있다. 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.
이러한 프로퍼티의 성질에 따라 객체의 프로퍼티는 함수로 포함할 수 있다. 이러한 프로퍼티를 자바스크립트에서는 메서드라고 부른다.
1let a = 100;2let b = 100;3
4let objA = {5 value: 100,6};7let objB = {8 value: 100,9};10let objC = objB;11
12console.log(a === b); //true13console.log(objA === objB); // false 1️⃣14console.log(objB === objC); // true 2️⃣변수 a와 b는 숫자 100을 저장하고 있는 기본 타입의 변수다. 기본 타입의 경우 비교 할 때 값을 비교한다 1️⃣: 위 코드처럼 objA와 objB는 다른 객체지만, 같은 형태의 프로퍼티값을 가지고 있다. 하지만 두 객체를 비교하면 결과는 1️⃣과 같이 false가 나온다. 그 이유는 기본타입의 경우는 값 자체를 비교해서 일치 여부를 판단하지만, 객체와 같은 참조 타입의 경구 참조값이 같아야 true가 된다.
2️⃣: objB와 objC는 같은 객체를 참조하므로 2️⃣와 같이 true가 나오는 것이다.
자바스크립트에서는 한 번 정의된 문자열은 변하지 않는다.
1let str = "text";2str[0] = "T";3console.log(str); // test4
5let arr = [1, 2, 3];6arr[0] = 0;7console.log(arr); // [0, 2, 3]문자열은 문자 배열처럼 인덱스를 이용해서 접근할 수 있지만, 수정은 불가능하다.
자바스크립트 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined 이다.
undefined는 타입이자, 값을 나타낸다
1let a;2console.log(typeof a); // undefined3
4let b = null;5console.log(typeof b); // object배열 [] === []의 값은 false이다.
자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각하기 때문.
객체 기초
1let user = {2 firstName: "Solhee",3 lastName: "Kim",4 email: "09merus@gmail.com",5 city: "cheonan",6};7
8// dot notation과 bracket notation9user.firstName; // "Solhee"10user["city"]; // "cheonan"객체 속성(property)의 추가, 삭제
1// 프로퍼티 추가2user.isAdult = true;3// 프로퍼티 삭제4delete user.email;in 연산자를 이용해 특정 키가 있는지 확인
1"lastName" in user; //true2"abcdef" in user; // false객체를 위한 for문 for ... in 문
1for (let key in user) {2 console.log(key);3}4// firstName5// lastName6// email7// city