내일배움캠프 8일차 : 자바스크립트 기본 문법 3

자바스크립트를 이해하기 위해 고군분투중이다. 적어도 내일중에는 과제를 시작해야할 것 같은데 아직 강의 전체를 이해하지 못해서 큰일이다. 그래도 앞쪽에 기초적인 부분을 재정립하고나니 이해가 가지 않던 부분을 이해하는데 더욱 도움이 되고있다. 기초를 다졌으니 심화 내용들도 빠르게 끝내보려한다.

 

JS에서 객체 생성 방법

중괄호를 통하여 객체를 생성

각 속성 ',' 쉼표로 구분

속성은 이름과 값을 가짐 (이름: 문자열, 값: 다양한 데이터 타입)

객체 내부의 함수 메소드(method) - 속성의 값으로 함수 추가할 수 있음

객체를 만들어 필요한 속성과 메소드를 추가하여 사용

 

객체의 value에 접근하는 방법 : 객체이름[key] ex) person[key]

 

배열

배열 요소 접근 : 배열의 요소에 접근할 때는 '[]' 대괄호 안에 인덱스를 넣는다

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]); // "사과"

console.log(fruits[1]); // "바나나"

console.log(fruits[2]); // "오렌지"

 

배열 메소드

• push() 메소드 : 배열 끝에 요소 추가
• pop() 메소드 : 배열의 마지막 요소 삭제
• shift() 메소드 : 배열 첫번째 요소 삭제
• unshift() 메소드 : 배열 맨 앞에 요소 추가
• splice() 메소드 : 요소를 삭제하거나 추가 (수정 시작 위치, 수정 마감 위치, 수정값)
  let fruits = ["사과", "바나나", "오렌지"];
  fruits.splice(1, 1, "포도");
  console.log(fruits); // ["사과", "포도", "오렌지"]
• forEach() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행하여 출력
• map() 메소드 : 각 요소에 대해 콜백 함수를 실행하여, 새로운 배열을 반환 (-> return문이 들어가야 함)
• filter() 메소드 : map과 비슷하지만 'return'에 필터 조건이 들어감
• find() 메소드 : 배열 각 요소에 콜백 함수 실행 후, 결과가 'true'인 첫번째 요소 반환

 

es6 문법

구조분해 할당 : 속성을 분해해 그 값을 변수에 담을 수 있도록 해주는 문법

// 배열의 경우

let [value1, value2] = [1, "new"];

console.log(value1); // 1

console.log(value2); // "new"

 

let arr = ["value1", "value2", "value3"];

let [a,b,c] = arr;

console.log(a,b,c) // value1 value2 value3

 

// let [a,b,c] = arr; 은 아래와 동일!

// let a = arr[0];

// let b = arr[1];

// let c = arr[2]; -> C까지만 할당 된 상태

let [a,b,c,d] = arr

console.log(d) // undefined  -> 할당되지 못한 d는 undefined가 뜸

let [a,b,c,d = 4] = arr

console.log(d) // 4 -> d를 따로 할당해줄 경우는 그 값을 가져옴

 

 

// 객체의 경우

let user = {name: "nbc", age: 30};

let {name, age} = user;

// let name = user.name;

// let age = user.age;

console.log(name, age) // nbc 30

 

// 새로운 이름으로 할당

let {name: newName, age: newAge} = user;

console.log(name, age) // ReferenceError: name is not defined -> newName, newAge라는 새로운 이름으로 할당해서 에러

console.log(newName, newAge) //nbc 30

 

let {name, age, birthDay} = user;

console.log(birthDay) // undefined -> birthDay 할당값이 없기 때문

let {name, age, birthDay = "today"} = user; -> 새로 할당

console.log(birthDay) // today;

 

단축속성명 : 객체의 key와 value가 같다면 생략 가능

const name = "nbc"

const age = "30"

 

const obj = { name, age: newAge } -> object에서 좌측은 key 우측은 value

const obj = { name, age } -> 우측은 값이기 때문에 변수가 들어가기도 하며, 그래서 이름이 겹칠 수 있음 -> 배열처럼 보일 수 있으나