Lesson - 배열 기초
배열 기초
index
이전에 언급한 것처럼 String은 Immutable하므로 인덱스를 통해 원본을 변경해도 변하지 않는다.
let myName = 'Codestates';
myName[0] = 'G';
myNames; // 'Codestates'; 그러나 Array는 Mutable하므로 특정 인덱스(index)의 요소(element)를 조회하고 변경할 수 있다. 같은 원리를 통해 이중 배열의 요소 조회와 변경도 가능하다.
let myNumber = [73, 98, 86, 61, 96];
myNumber[3] = 200;
myNumber = [73, 98, 86, 200, 96];배열 반복
-
for 문과 배열을 이용해 반복적으로 코드를 실행시킬 수 있다. 이미 알고있는 기본적인 for 문 for (let i = 0; i < 5; i++)과 이중 for문을 응용하여 다양한 for 문을 만들 수 있다.
-
Week 1에서 언급한 것처럼
.split()메소드를 사용하여 String을 다루었는데, 마찬가지로 Array의 형태 변환을 도울 수 있다. 즉, 띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꿀 수 있다.str.split(" ").join(" ")
배열 기초 메소드
arr.unshift(ele): 배열 맨 앞에 ele를 추가arr.shift(): 배열 맨 앞 ele를 삭제arr.pop(): 배열 맨 뒤 ele를 삭제arr.push(ele): 배열 맨 뒤에 ele를 추가Array.isArray(ele): ele가 배열인지 여부 확인arr.indexOf(ele): 배열의 특정 ele에 대한 index값을 반환 (해당 ele가 없는 경우-1을 반환)arr.includes(ele):배열에 특정 ele의 포함 여부에 따른 true, false를 반환한다.
Lesson - 객체
let user = {
//key : value
firstName: 'Steve',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};객체의 value(값)을 사용하는 방법은 두 가지가 있다.
Dot notation
Dot notation(obj.property_name)은 가장 많이 사용되는 방법이다.
user.firstName; // 'Steve'
user.city; // 'Seoul'그러나 Dot notation을 사용할 수 없는 경우가 있는데, 바로 property_name(key)이 유효한 identifier(식별자)일 때이다. 이러한 경우에는 Bracket notation을 사용해야 한다.
let obj = {
'123' : 123
};이러한 경우, obj.123을 사용할 수 없다.
Identifier란?
An identifier is a sequence of characters in the code that identifies a variable, function, or property. Generally name of function or variable or property name of Object
유효한 Identifier란?
-
In JavaScript, identifiers are case-sensitive and
Note: case-sensitive
프로그램이나 프로그래밍 언어에서, 대문자와 소문자를 서로 다른 문자로 취급하는 것. 예를 들면 FULL과 full은 서로 다른 문자로 처리한다. -
can contain Unicode letters,
$,_, and digits (0-9),
// Bracket notation
let obj = {
'123' : 123
};
obj['123']; // 123- but may not start with a digit.
// Dot notation
let obj = {
$ : 10,
_ : 20
}
obj.$; // 10
obj._; // 20Bracket notation
property_name이 유효하지 않은 identifier인 경우(숫자로 시작되거나 기호를 포함할 때) bracket notation을 사용한다.
var obj = {
test-123 : "test"
}
// in this case we cannot use dot notation
obj['test-123']; // "test"- property_name이
nuber일 경우, bracket 내부를 작은/큰 따옴표로 감싸지 않는다.
let obj = {
123456 : 10
}
obj[123456]; // 10- property_name이
double일 경우, bracket 내부를 작은/큰 따옴표로 감싸야 한다.
let obj = {
123.456 : 10
}
obj[123.456]; // undefined
obj['123.456']; // 10- property_name이 유효하지 않은
number일 경우, 객체 선언 시 property_name을 따옴표로 감싸야 한다.
let obj = {
123.123.123 : 10 // throws invalid number error
}
For this case use single/double quotes
let obj = {
'123.123.123' : 10
}- property_name에
-과 같은 기호를 사용하는 경우, bracket 내부를 따옴표로 감싸야 한다.
let obj = {
'123-test' : "test"
}
obj[123-test]; // error(test is not defined)
obj['123-test']; // "test"property_name이 변수인 경우
// #1
let test = "test";
let obj = {
test : "Test success"
}
obj[test] // "Test success"
// #2
let obj = {
name : "Mark",
age : 20
}
let name = "age";
obj["name"]; // Mark
obj[name]; // 20
// #3
function getFood(user) {
let foods ={
veg : ["🍏", "🌽", "🍕", "🍅"],
'non-veg': ["🐓", "🐣", "🥩", "🍖"]
}
let {foodPreference} = user;
return foods[foodPreference];
}
let user = {name: "Mark", foodPreference : "veg"};
getFood(user); // ["🍏", "🌽", "🍕", "🍅"]
1차원 배열 처리 (해당 대상이 object인 경우)
let arr = ["mom", "dad", "me"];
// #1 기본 for 문
for(let i = 0; i < arr.length; i++){
console.log(i, arr[i]);
}
// 0, "mom"
// 1, "dad"
// 2, "me"
// #2 for in 문 (해당 배열 인덱스값 반환)
for(let key in arr) {
console.log(key, arr[key]);
}
// "0", "mom"
// "1", "dad"
// "2", "me"
// #3 for of 문
for(let value of arr) {
console.log(value);
}
// "mom"
// "dad"
// "me"
// #4 forEach 문
arr.forEach(fucntion(item, key) {
console.log(key, item)
}
// 0, "mom"
// 1, "dad"
// 2, "me"
2차원 배열 처리 (또는 Json 형식)
let obj = [
{name: "kim",
age: 17
},
{name: "lee",
age: 25
},
{name: "park",
age: 34
}
];
// #1 기본 for 문
for(let i = 0; i < obj.length; i++){
console.log(i, obj[i].name, obj[i].name);
}
// 0, "kim", 17
// 1, "lee", 25
// 2, "park", 34
// #2 for in 문
for(let key in obj) {
console.log(key, obj[key].name, obj[key].age);
}
// 0, "kim", 17
// 1, "lee", 25
// 2, "park", 34
// #3 for of 문
for(let value of obj) {
console.log(value.name, value.age);
}
// "kim", 17
// "lee", 25
// "park", 34
// #4 forEach 문
obj.forEach(function(key, index) {
console.log(index, key.name, key.age);
});
// "kim", 17
// "lee", 25
// "park", 34
