TIL : JavaScript 대괄호, 중괄호, 소괄호 사용 정리

대괄호 :[ ],  중괄호: { },  소괄호:( )

 

대괄호 => []

• list를 나열 할 때
• list의 인덱스를 지정해줄 때 e.g.) mise[0], mise[1]
• 키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작.

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어주어야 함.

대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열 뿐 아니라 모든 표현식의 평가결과를 프로퍼티키로 사용할 수 있다.

let key = "likes birds";

// user["likes birds"] = true; 와 같습니다.
user[key] = true;

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이를 응용하면 코드를 유연하게 작성할 수 있다.

예시:

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

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

하지만 점 표기법은 이런 방식이 불가하다.

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

let key = "name";
alert( user.key ) // undefined

 

중괄호 => {}

• dictionary를 만들 때 {'key':'value'}
• css에서 스타일 태그 적용시 ex) .layout { margin: auto; }
• JSX내부에서 style tag를 적용해줄 때, 자바스크립트의 값을 내부에서 사용할때 ex) <div style={style}></div>

또는

• 특정 function에 대해 정의해줄 때 ex) function openclose() { ... }
• for문의 조건문 뒤에 실행할 것을 적어 줄 때 ex) for (i=0;  i<100;  i++) { ... }
• if문 뒤에 실행 할 것을 적어 줄 때 if ( a % 2 === 0 ) { ... }

 

소괄호 => ()

• for문의 특정 조건을 적어 줄 때 ex) for (i=0;  i<100;  i++) 
• if문의 특정 조건을 적어 줄 때 ex) if(a>b)
• jquery 선택자를 적어줄때 (특정조건) $('#names-q7')
• 함수 이름 바로 뒤 (매개변수 들어갈 위치) function openclose() => ()여기에 특정 매개변수가 들어갈 수 있음.

매우 기본적으로 알아야 할 사용법이라고 생각하지만 아직까지 찾아보지 않았고 개인 프로젝트 과제를 수행하다가 소괄호 안에 id:id++이런식으로 쓰면 자꾸 오류가 떠서 찾아보게 되었다. :는 딕셔너리를 표현할 때 쓰이므로 소괄호안에서는 쓸 수 없다. 따라서 {title, id:id++}이런식으로 적어주어야 옳다.