[object]
JS objects have no defined order, they are (by definition) an unsorted set of key-value pairs.
자바스크립트에서 객체는 정의된 순서를 갖고 있지 않기 때문에,
인덱스가 없다.
반면, 배열은 순서를 갖고 있기 때문에 인덱스를 갖고 있다.
objData["books"]["info"][1]["name"]위의 예시에서 objData와 books는 객체이다.
info는 배열이다.
name은 객체이다.
정리하자면,
객체는 -> 키 혹은 밸류명으로 원하는 결과를 얻을 수 있고,
배열은 -> 인덱스로 원하는 결과를 얻을 수 있다.
반대로는 작동하지 않기 때문에,
undefined를 반환하거나 typeerror을 내보낸다.
JavaScript 중간정리
- 프로그래밍에서 가장 중요한 것은 반복과 조건이다.
for (let i in obj) {};for in을 쓰면 순서가 없는 객체도 순회해서 출력된다.
-
모든 정보는 모두 객체로서 저장된다.
함수도 function 형태의 객체이고,
배열도 array라는 형식의 객체이다. (인덱스가 property, 값이 property value) -
var는 전역스코프가 아니고, 함수스코프다.
-
const 사용시, 값은 바뀌지 않지만, 중첩된 값을 바꾸는 것은 가능다다.
- function은 ‘기능’을 한다.
그렇게 기능을 모듈화해서 다른 곳에서도 쓸 수 있도록 한다.
-
연산자 자체가 참 혹은 거짓 값을 출력한다.
-
constructor 메소드는 class 내에서 객체를 생성하고 초기화하기 위한 특별한 메소드이다. Class라는 기능을 객체 형식으로 구현한 것이다.
-
생성자(Constructor)로 새로운 객체를 생성하는 것은 ,
class로 기능을 미리 만들어놓고, 그 기능틀을 사용해서 새로운 객체들을 생성하는 것이다.
즉, 이 관계는 붕어빵틀 - 붕어빵과 같다. -
만약, 아직 밸류값을 정하지 않았으나 객체를 생성하고 싶을 때는 아래와 같이 만들면 된다.
// 새로만들고싶은키이름 = “할당하고싶은 값”
objData[“20200710”] = {};
// objData 객체 안에 새로운 키-밸류 값이 생김. - for in => 순회해서 '키'를 뽑아오는 것
(일반적으로 객체는 순회가 불가하나, for in을 통해서는 객체를 순회할 수 있다.) - for of=> 순회해서 밸류를 뽑아오는 것
[Scope]
-
block {} 밖에서 만든 변수를 global variable이라고 한다.
-
global variable을 선언하면, 해당 프로그램의 어디에서나 사용할 수 있는 global namespace를 갖는다.
(namespace는 변수 이름을 사용할 수 있는 범위이다. )
좋은 Scoping 습관
- global scope보다 local scope를 사용하는 게 좋다.
왜냐하면,
- 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 좋아짐.
즉, 코드가 한줄한줄 쭉 나열된 것이 아니라, 각각의 기능별로 block을 나누었기 때문에 이해가 쉬움. - 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬움.
- 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약이 됌.
따라서, 가능한 block scope 변수를 사용하는 것이 좋다.
[Switch 문]
if-else 문과 switch-case-default 문은 굉장히 비슷하다.
const fruit = "melon";
if (fruit === "apple") {
console.log("사과입니다.");
} else if (fruit === "banana") {
console.log("바나나입니다.");
} else if (fruit === "melon") {
console.log("멜론입니다.");
} else if (fruit === "orange") {
console.log("오렌지입니다.");
} else if (fruit === "strawberry") {
console.log("딸기입니다");
} else {
console.log("과일이 아닙니다.");
}const fruit = "melon";
switch (fruit) {
case "apple":
console.log("사과입니다.");
break;
case "banana":
console.log("바나나입니다.");
break;
case "melon":
console.log("멜론입니다.");
break;
case "orange":
console.log("오렌지입니다.");
break;
case "strawberry":
console.log("딸기입니다.");
break;
default:
console.log("과일이 아닙니다.");
}자바스크립에서 조건이 많을 때는 switch가 성능상 더 유리하다.
if-else는 조건이 많아질 수록 성능이 크게 하락하기 때문에
boolean 혹은 3~4개 내의 조건비교에 사용하는 게 좋다.
(그렇지만 성능차이는 매우 근소함..!)
[Class]
class를 통해 생성한 객체를 인스턴스라고 한다.
따라서, class로 객체를 생성하는 과정을 인스턴스화라고 한다.
ES6의 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 클래스 기반 언어에 익숙한 프로그래머가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다.
그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다.
사실 클래스도 함수이며 기존 프로토타입 기반 패턴의 문법적 설탕(Syntactic sugar)이라고 한다.
다만, 클래스와 생성자 함수가 정확히 동일하게 동작하지는 않는다.
클래스가 생성자보다 엄격하다.
멤버 변수:
class 내부에서 constructor(매개변수) 처럼 변경이 가능한 상태값이자,
class 내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 멤버변수라고 부른다.
멤버 변수는 this 키워드로 접근한다.
[Object]
-
다른 데이터 타입(텍스트, 숫자, 배열 등..)처럼 객체를 변수에 저장할 수 있다.
-
객체는 중괄호 {}를 사용하는데, 이렇게 {} 으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 한다.
-
key는 property name이라고도 하며, value는 property value라고도 한다.
-
객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.
변수(variable) 선언할 때는 할 수 없었던 표현이다. -
color와 같이 키에 특수문자가 없으면 따옴표를 생략하고 쓸 수도 있다.
let difficult = {
33: '숫자 형식도 되네',
'my name': '스페이스 포함 가능',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군!!',
'!키': '느낌표 있는 키는 따옴표가 필요하군',
$special: '$는 없어도 되는군'
};// 숫자로 된 키는 대괄호로 접근해야 한다.
console.log(difficult['33']);// 변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능하다.
const mutableObj = {
name: '객체'
};
mutableObj = {
name: '수정'
}
// 오류메세지 확인// 그러나 프로퍼티에 접근해서 내용을 수정하거나, 프로퍼티를 추가하는 것은 가능하다.
mutableObj.name = '수정';
mutableObj.type = 'Object 타입';[Console]
console은 자바스크립트 전역에 접근가능하니 -> global 객체이다.
log는 console 객체의 메소드이다.
let methodObj = {
do: function() {
console.log('메서드 정의는 이렇게');
}
}
methodObj.do();[Object reference]
객체는 reference로 저장된다.
객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference가 저장된다.
(리터럴: 소스 코드의 고정된 값을 대표하는 용어.
리터럴과 대조적으로 '고정된 값을 가질 수 있는 변수'나 '변경되지 않는 상수'가 있음.)
텍스트는 변수에 저장하면 텍스트 자체가 저장된다.
그래서 같은 텍스트면 서로 값이 같으므로 true가 출력된다.
그러나 객체는 같은 상황에서 FASLE가 출력된다.
객체를 변수에 저장할 때, 객체가 담긴 어떤 메모리의 reference를 저장하기 때문이다.
그래서 눈에 보이는 데이터는 똑같더라도
두 객체가 갖고 있는 실제 reference 값은 다른 것이기 때문에,
같은 객체 정보를 담은 2 개의 변수를 비교하면 서로 같지 않다고 나온다.
const a = '안녕';
const b = '안녕';
console.log(a === b); // trueconst hiObj = {
name: '안녕'
};
const helloObj = {
name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj); // false위와 같이 const로 선언된 객체더라도 mutableObj.name = '수정 됩니다!'; 처럼 프로퍼티에 접근해 수정을 시도하면 객체가 저장된 reference가 바뀌는 것이 아니기 때문에 수정이 이루어진다.
[Arrow Function]
const getName = (name) => {}
const getName = name => {}-> parameter가 1개일 때는 소괄호 생략 가능
//ES5
function getName(name) {
return name;
}
//ES6
const hi = name => { return name };
const hi = name => name;-> 만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호 생략가능
[String 관련]
` 역점을 사용하면 사이에 넣은 string과 변수값과 띄어쓰기가 그대로 출력된다.
startsWith() 메소드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환한다.
The endsWith() 메소드는 어떤 문자열이 특정 문자로 끝나는지를 확인하여 결과를 true 혹은 false로 반환한다.
includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환한다.
" ".repeat(n) 메소드는 따옴표 사이의 문자를 괄호 내 숫자만큼 출력해준다.
[String 문제 풀며 알게된 점]
String are immutable, so that, is cannot be changed in JavaScript.
Again, it is impossible to change a single character.
But it is possible to change the whole string which is like an example below.
let str = 'Hi';
str = 'h' + str[1]; // replace the string
alert( str ); // hi
or
let str = 'Hello';
str = 'h' + (str.slice(1, str.length)); // replace the string
alert(str); // HelloindexOf(searchValue[, fromIndex]) 메소드는 두번째 인자로 search를 시작하고 싶은 인덱스 위치를 지정할 수 있다.
https://javascript.info 에서 추가적인 예시들을 볼 수 있다.
