본문 바로가기

코드스테이츠 SEB FE 41기/Section 별 내용 정리

section1/unit9/Javascript 배열&객체(9/5)

반응형

블로깅 주제

  • Javascript 객체

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

  • 주말을 푹 쉬고 오니 월요일이라는게 믿기지가 않는다. 어제 밤부터 현실 부정하고 싶은 마음가득^^ 그래도 이번주 열심히 살아야겠다. 스터디 모임도 본격적으로 시작되니 열심히 살고있다는 마음이 든다! 점점 성장하겠지?

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

  • 객체

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 객체를 사용하는 두 가지 방법

let user = {
    firstName = 'Steve';
    lastName = 'Lee';
    email = 'steve@codestates.com';
    city = 'Seoul';

1. Dot notation

user.firstName -> Steve
user.city -> Seoul

2. Bracket notation

user['firstName'] -> Steve
user['city'] -> Seoul

- 객체 삭제

delete user.city;

- 객체 포함 여부 조회

'firstName' in user ->true

- splice -> 없는 요소 일 때 

원본 배열 pokemon에 5번째 요소는 없기 때문에(undefined), 5번째 요소로 ‘이브이'가 추가됨

- 배열이 빈 배열인지 확인하는 법 

arr.length === 0

arr === []  -> x

[] === []은 false . 자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각하기 때문.

- 배열의 길이 리턴 vs 배열 리턴 

배열의 길이 리턴
배열 리턴

- for in vs for of

  • for in : 속성 출력(key 값...)
  • for of: 속성 값 출력(배열 인덱스 안에 들어있는 값...)
//for in
const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"


//for of
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

- 배열의 마지막 요소

a = [0, 1, 0, 1, 2, 3, 4, 5, 6, 7, 8]
a.slice(-8,-4) -> [1, 2, 3, 4]
a.slice(-7,-4) -> [2,3,4]
a.slice(-1) -> [8]

- sort() 

a = [ 5, 10 ] -> sort하면 [10, 5] 가 됨

why? 문자로 취급되어 '1'이 들어있는 '10'이 앞으로 옴

앞과 뒤의 차로 파악! 정확히 sort됨

arr.sort(function (a, b) {
        return a - b;}
arr.sort((a, b) => a - b);

->오름차순

arr.sort((a, b) => b - a);

-> 내림차순

- 객체안의 key 값 포함 여부 검색하기(true/false 반환)

!(key in obj1)
반응형