[조발표 주제] 다양한 타입을 요소/밸류로 갖는 복잡한 배열/객체에서 요소/밸류 접근 방법

오늘 조발표 자료입니다. 조 이름이 "next level" 이라서 가져와 본 사진😁

1. 배열의 요소의 자료형에는 제약이 없습니다.

// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '레몬', 
			🍔, 
            1, 
           { name: '김코딩' }, 
           true, 
           function() { alert('만나서 반가워요'); }, 
           [2, 3, 4] 
           ];

// 인덱스가 3인 요소(객체)의 name 프로퍼티를 출력합니다.
alert( arr[1].name ); // 김코딩

// 인덱스가 5인 요소(함수)를 실행합니다.
arr[3](); // 만나서 반가워요

// 인덱스가 6인 요소(배열)의 마지막 요소를 불러보자.
arr[6][2]

2. 객체의 프로퍼티property에서는 { 키key: 문자형, 값value: 모든 자료형 } 이 허용됩니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30, // 키: "age", 값: 30
 "is Admin": true,
};

user.name //"John"
user.age // 30
user.["is Admin"] // true 💎 아래 설명

/*
💎 공백이 있는 두 단어의 경우는 dot notation 대신에 bracket notation을 사용해야 합니다. 
점 표기법의 경우, 키가 유효한 변수 식별자인 경우에만 사용할 수 있습니다. 
{ 유효한 변수 식별자 조건 : 공백이 없어야 함, 
	숫자로 시작하면 안 됨, $와_를 제외한 특수 문자가 없어야 함 } 
*/

3. 계산된 프로퍼티? 단축 프로퍼티? 그게 뭔가요?

3.1. 객체안에서 프로퍼티의 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티computed property라고 부릅니다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

3.2. 실무에서 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 많습니다. 변수를 값으로 받아와 프로퍼티를 만드는 경우는 아주 흔한데, 이 때 키의 이름과 변수의 이름이 동일하다면, 한 번만 적어주면 됩니다. 이를 프로퍼티 값 단축 구문(property value shorthand)이라고 합니다.

function makeUser(name, age) {
  return {
    name: name, // => name
    age: age, // => age
    // ...등등
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

// 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능합니다.
let user = {
  name,  // name: name 과 같음
  age: 30
};

4. 문제

let schedule = {};
schedule["8:30"] = "get up"
schedule.study = ['배열', '객체', '함수']
schedule.pm7 = "저녁모임"
schedule.pm7_30 = "저녁식사"
schedule.pm10 = "TIL블로깅"
delete schedule.pm7_30

4.1. schedule객체의 최종 프로퍼티는 몇 개일까요?![]
4.2. "get up"이라는 밸류를 불러오기 위해서 왜 대괄호 표기법을 써야만 했을까요?
4.3. schedule객체에서 함수라는 값을 지워주세요.
4.4. 4.3에서 delete 명령어를 사용하면 어떻게 되나요?

정답

5. [사견] 가장 사용하기 좋은 형태의 데이터 저장방식이 있다면?

let users = [
 {age: 21, name: '김코딩', email: '[email protected]'},
 {age: 32, name: '박해커', email: '[email protected]'},
 {age: 19, name: '소나무', email: '[email protected]'}
  ]

5.1. 위 유저 데이터를 나이가 25세 미만인 그룹으로만 모아서 보려면?

5.2. 위 유저 데이터에 '두리안', 24세, [email protected]을 추가하려면?

😃 배열로 감싸인 객체 구조의 장점.
💡배열 메서드를 사용할 수 있다.
💡배열의 요소가 객체로서 데이터를 받아오거나, 불러오기 쉽다.

😘 발표후기

가장 반응이 뜨거웠던 내용은 변수에 문자열을 값으로 할당할 때, 따옴표 처리를 하지 않으면 어떻게 되는지에 대한 이야기였다. 문자열에 따옴표를 안하고 변수에 문자열을 값으로 할당해 본 경험이 있는 사람이라면 누구나 만나게된다. 바로 참조 오류reference error이다. 읭? 무엇을 참조해? 나는 그냥 값으로써 이 문자열을 준 것이라구. 라고 생각하고 자바스크립트를 보면 아, 얘는 그러고보니, 문자열을 변수명으로 갖네. 그렇구나. 문자열에 따옴표를 안씌워주면, 얘는 이것이 변수명이라고 생각하고 할당된 값을 참조하려고 하는구나. 값이 없으니까 참조 에러를 내는구나. 내가 삽질한 이 이야기를 해줬을 때 많은 분들이 좋아하셨다. 나의 실패가 도움이 되었다면 기뻐 😉