데이터 불러오기
변수, 상수, 배열, 객체 → 출력
16. 변수 : 데이터 불러오기
{
let x = 100, y = 200, z = "javascript";
document.write(x); //100
document.write(y); //200
document.write(z); //javascript
}상수 : 데이터 변경X : 데이터 추가X
17. 상수 (const)
{
const x = 100, y = 200, z = "javascript"
document.write(x); //100
document.write(y); //200
document.write(z); //javascript
}19. 배열 : 2차 배열
{
const arr = [100, 200, ["javascript"]];
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(arr[2][0]); //javascript
}20. 배열 : 개수 구하기 (.length)
{
const arr = [100, 200, "javascript"];
document.write(arr.length); //3
}*21. 배열 : for문
{
const arr = [100, 200, "javascript"];
for(let i=0; i>arr.length; i++){
document.write(arr[i]);
}
//100
//200
//javascript
}*22. 배열 : forEach문 / each()
{
const arr = [100, 200, "javascript"];
arr.forEach(finction(element){ //*콜백함수
document.write(element);
});
arr.forEach(finction(element, index, array){
document.write(element); //100
//200
//javascript
document.write(index); //100
//0
document.write(array); //100,200,javascript
//200
//1
//100,200,javascript
//javascript
//2
//100,200,javascript
});
}배열 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행
매개변수
의미
element
배열의 요소
index
배열 요소의 인덱스
array
forEach를 호출한 배열
*23. 배열 : for in
{
const arr = [100, 200, "javascript"];
for(let i in arr){
document.write(arr[i]);
}
//100
//200
//javascript
}*24. 배열 : for of
{
const arr = [100, 200, "javscript"];
for(let i of arr){
document.write(i);
}
//100
//200
//javascript
}*25. 배열 : map();
{
const arr = [100, 200, "javascript"];
arr.map((el) => {
document.write(el);
});
//100
//200
//javascript
}map = 배열을 변형시키거나 요소를 재정렬해주는 메서드
ㄴ모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환
*중요 es5,6차이점 es6이 무엇인가 (function생략하고 => 로)
26. 배열 : 펼침 연산자 (...)
{
const arr = [100, 200, "javascript"];
document.write(arr); //100,200,javascript
document.write(arr[0], arr[1], arr[2]); //100200javascript
document.write(...arr); //100200javascript
}27. 배열 : 배열 구조 분해 할당
{
let a,b,c;
[a,b,c] = [100, 200, "javascript"];
document.write(a); //100
document.write(b); //200
document.write(c); //javascript
}28. 객체 : 데이터 불러오기
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
document.write(obj.a); //100
document.write(obj.b); //200
document.write(obj.c); //javascript
//죽은문법
document.write(obj['a']); //100
document.write(obj['b']); //200
document.write(obj['c']); //javascript
}*29. 객체 : 키와 값 : Object.keys/values/entries
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
document.write(Object.keys(obj)); //a,b,c
document.write(Object.values(obj)); //100,200,javascript
document.write(Object.entries(obj)); //a,100,b,200,c,javascript
}호출문
의미
Object.keys
객체의 키만 담은 배열을 반환
Object.values
객체의 값만 담은 배열을 반환
Object.entries
[키, 값] 쌍을 담은 배열을 반환
30. 객체 : 변수
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const name1 = obj.a;
const name1 = obj.b;
const name1 = obj.c;
document.write(name1); //100
document.write(name2); //200
document.write(name3); //javascript
}*31. 객체 : for in
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let i in obj){
document.write(obj[i]);
}
//100
//200
//javascript
}*32. 객체 : map();
{
const obj = [
{a: 100},
{a: 200},
{a: "javascript"}
];
obj.map(el => {
document.write(el.a);
})
//100
//200
//javascript
}*33. 객체 : hasOwnProperty()
has 검색기능
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
document.write(obj.hasOwnProperty("a")); //true
document.write(obj.hasOwnProperty("b")); //true
document.write(obj.hasOwnProperty("c")); //true
document.write(obj.hasOwnProperty("100")); //false
document.write("a" in obj); //true
document.write("b" in obj); //true
document.write("c" in obj); //true
document.write("100" in obj); //false
}34. 객체 : 펼침 연산자 : 복사
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj}
document.write(spread.a); //100
document.write(spread.b); //200
document.write(spread.c); //javascript
}*35.객체 : 펼침 연산자 : 추가
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj, d: "jquery"}
document.write(spread.a); //100
document.write(spread.b); //200
document.write(spread.c); //javascript
document.write(spread.d); //jquery
}*36. 객체 : 펼침 연산자 : 결합
{
const objA = {
a: 100,
b: 200
}
const objB = {
c: "javascript",
d: "jquery"
}
const spread = {...objA, ...objB}
document.write(spread.a); //100
document.write(spread.b); //200
document.write(spread.c); //javascript
document.write(spread.d); //jquery
}*37. 객체 : 객체 구조 분해 할당 (=비구조화 할당)
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a,b,c} = obj;
document.write(a); //100
document.write(b); //200
document.write(c); //javascript
}*38. 객체 : 객체 구조 분해 할당 : 별도 이름 저장
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a:name1, b:name2, c:name3} = obj;
document.write(name1); //100
document.write(name2); //200
document.write(name3); //javascript
}Last updated